@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    --clr: 10;
    --sat: 90%;

    --brand: hsl(var(--clr), var(--sat), 50%);
    --dark: hsl(var(--clr), 100%, 10%);
    --medium: hsl(var(--clr), 100%, 75%);
    --lighter: hsl(var(--clr), 100%, 90%);
    --light: hsl(var(--clr), 100%, 95%);
    --lightest: hsl(var(--clr), 100%, 98%);
    --black: #000;
    --white: #fff;
    --white-blur: #fff6;
}

body {
    background: var(--lightest);
    font-family: 'Barlow', sans-serif;
    font-size: 16px;
    min-height: 100dvh;
    margin: auto;
    color: var(--dark);
    display: grid;
    grid-template-rows: auto 1fr auto;
}

header {
    position: sticky;
    left: 0;
    top: 0;
    background: var(--white-blur);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); 
    color: var(--dark);
    border-bottom: 1px solid var(--light);
    width: 100%;
    display: grid;
    align-items: center;
    z-index:99;
    grid-template-columns: auto 1fr;

    & .brand {
        font-weight: bold;
        font-size: 1.25rem;
        letter-spacing: -0.5px;
        padding: 1rem;
        color: var(--brand);
        transition: 300ms ease-in-out;

        & a {
            display: flex;
            align-items: center;
            gap: 1rem;
            text-decoration: none;
            color: inherit;
            max-width: 325px;

            & img {
                height: 80px;                
            }
        }
    }

    nav {
        justify-self: end;
        padding: 1rem;

        & .overlay {
            background: #000b;
            position: fixed;
            left: 0;
            top: 0;
            width: 100dvw;
            height: 100dvh;
            display: none;
        }

        & .menu,
        & .close,
        & #toggleMenu {
            all: unset;
            cursor:pointer;
            display: none;
        }

        ul {
            display: flex;
            gap: 0.25rem;
            background: transparent;
            list-style: none;
            z-index: 99;

            li {
                a {
                    /* font-size: 14px; */
                    font-weight: 500;
                    display: block;
                    text-decoration: none;
                    color: inherit;
                    border-radius: 9999px;
                    padding: 0.5rem 1.25rem;
                    transition: 300ms ease-in-out;

                    &:hover {
                        background: var(--light);
                        color: var(--dark);
                        transition: 300ms ease-in-out;
                    }

                    &.active {
                        background: var(--brand);
                        color: var(--light);
                        /* font-weight: bold; */
                    }

                }
            }
        }
    }
}

main {
    padding-bottom: 5rem;

    & .hero-section {
        display: block;
        width: 100%;

        & img {
            width: 100%;
            object-fit: cover;
        }
    }
}

footer {
    background: var(--white);
    color: var(--medium);
    border-top: 1px solid var(--light);
    text-align: center;
    padding: 0.5rem 1rem;
}

img {
    display: block;
    max-width: 100%;
}

p,
small {
    line-height: 1.5;
}

.two-cols {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 1fr;
}

.col {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    align-items: center;
}

.heading {
    padding: 1rem;
    text-align: center;
}

.fit {
    width: 100%;
}

.fit-cover {
    width: 100%;
    object-fit: cover;
}

.fit-contain {
    width: 100%;
    object-fit: contain;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.justify {
    text-align: justify;
}

.contain-auto {
    max-width: 1200px;
    margin: auto;
}

.m0 {
    margin: 0
}

.m1 {
    margin: 1rem
}

.m2 {
    margin: 2rem
}

.m3 {
    margin: 3rem
}

.m4 {
    margin: 4rem
}

.m5 {
    margin: 5rem
}

.p0 {
    padding: 0
}

.p1 {
    padding: 1rem
}

.p2 {
    padding: 2rem
}

.p3 {
    padding: 3rem
}

.p4 {
    padding: 4rem
}

.p5 {
    padding: 5rem
}

.flex {
    display: flex;
    flex-direction: row;
    gap: 0.5rem
}

.flex-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem
}

.g0 {
    gap: 0
}

.g1 {
    gap: 1rem
}

.g2 {
    gap: 2rem
}

.g3 {
    gap: 3rem
}

.g4 {
    gap: 4rem
}

.g5 {
    gap: 5rem
}

.f0 {
    flex-shrink: 0;
}

.f1 {
    flex: 1
}

.f2 {
    flex: 2
}

.f3 {
    flex: 3
}

.f4 {
    flex: 4
}

.f5 {
    flex: 5
}

.wrap {
    flex-wrap: wrap;
}

.no-wrap {
    flex-wrap: nowrap;
}

.jcfs {
    justify-content: flex-start;
}

.jcfe {
    justify-content: flex-end;
}

.jcc {
    justify-content: center;
}

.jcsb {
    justify-content: space-between;
}

.aifs {
    align-items: flex-start;
}

.aic {
    align-items: center;
}

.aife {
    align-items: flex-end;
}

.w100 {
    width: 100%
}

.h100 {
    height: 100%
}

hr {
    width: 100%;
    border: none;
    border-top: 0.5px solid var(--light)
}

.bold {
    font-weight: bold
}

.normal {
    font-weight: normal
}

a {
    text-decoration: none;
    color: var(--brand)
}

a:hover {
    color: var(--dark)
}

.faculty {
    border-radius: 1rem;
    width: 125px;
    height: 150px;
    object-fit: cover;
}

@media (max-width:1000px) {
    header {        
        align-items: flex-start;
         & .brand {
            transition: 300ms ease-in-out;
         }
    }

    nav {
        padding: 1rem !important;

        & .menu,
        & .close {
            display: block !important;
        }

        & ul {
            position: fixed;
            background: var(--white) !important;
            height: 100dvh;
            padding: 1rem;
            gap: 1rem;
            width: 300px;
            flex-direction: column;
            top: 0;
            right: -100vh;
            transition: right 300ms ease-in-out;

            & li:first-child {
                align-self: flex-end;
            }

            & a {
                margin-block: 0.25rem;
                padding: 0.75rem 2rem !important;
                font-size: 1rem !important;
            }
        }

        & #toggleMenu:checked~.menu {
            display: none !important;
        }

        & #toggleMenu:checked~.overlay {
            display: block;
        }

        & #toggleMenu:checked~ul {
            display: flex !important;
            right: 0;
            transition: right 300ms ease-in-out;
        }
    }

    .two-cols,
    .cols {
        grid-template-columns: 1fr;
    }
}

@media (max-width:400px) {
    header {
        & .brand {
            font-size: 1rem;

            & a img {
                height: 50px;                
            }
        }
    }
}