:root {
    --bgColour: white;
    --navTextColour: white;
    --navBgColour: #333;
    --navHoverBgColour: #111;
    --footerBorderColour: yellow;
    --wpcardBgColour: bisque;
    --ksqcardBgColour: lightskyblue;
}

body {
    margin: 0% 10%;
    justify-content: center;
    background-color: var(--bgColour);
}

.banner {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 30% auto;
    justify-content: center;

    .logo {
        width: 100%;
        align-content: center;
        background-size: contain;
        height: max-content;
    }

    .banner-text {
        font-size: 3em;
        justify-content: center;
        align-content: center;
        text-align: center;
    }
}
nav {
    padding: 10px 10px;
    box-sizing: border-box;
    background-color: var(--navBgColour);
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;

    .menu {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
    }
    .menu li {
        position: relative;
    }
    .menu a {
        display: block;
        padding: 10px 20px;
        color: var(--navTextColour);
        text-decoration: none;
        border-radius: 25px;
        white-space: nowrap;
        transition:
            background 0.3s,
            color 0.3s;
    }
    .menu li:hover > a {
        background-color: var(--navHoverBgColour);
        color: var(--navTextColour);
        border-radius: 25px;
    }
    .submenu,
    .submenu-right {
        display: none;
        position: absolute;
        background: var(--navBgColour);
        min-width: 12em;
        list-style: none;
        z-index: 100;
        border-radius: 25px;
    }

    @media (min-width: 769px) {
        .menu li:hover > .submenu {
            display: block;
            top: 100%;
            left: 0;
            border-radius: 25px;
        }

        .submenu li:hover > .submenu-right {
            display: block;
            top: 0;
            left: 100%;
        }

        .submenu .dropdown > a:after {
            content: "▸";
            float: right;
            margin-left: 1em;
        }

        .submenu .dropdown:hover > a::after {
            content: "▼";
            float: right;
        }

        .hamburger,
        #menu-toggle {
            display: none;
        }
    }
    @media (max-width: 768px) {
        .hamburger {
            display: block;
            font-size: 26px;
            color: var(--navTextColour);
            background: none;
            border: none;
            cursor: pointer;
            margin-bottom: 10px;
        }
        border-radius: 25px;

        .menu {
            display: none;
            flex-direction: column;
            width: 100%;
            background: var(--navBgColour);
        }

        #menu-toggle {
            display: none;
        }

        #menu-toggle:checked + label + ul {
            display: flex;
        }

        .menu li {
            width: 100%;
        }

        .submenu,
        .submenu-right {
            position: static;
            display: none;
            padding-left: 20px;
        }

        .menu li:hover > .submenu,
        .submenu li:hover > .submenu-right {
            display: block;
        }

        .submenu .dropdown > a::after {
            content: "▸";
            float: right;
        }

        .submenu .dropdown:hover > a::after {
            content: "▼";
        }
    }
}

header {
    padding-bottom: 1em;
}

li {
    margin: 0.25em;
}

h1,
h2 {
    text-align: center;
    margin-top: 1em;
}

h1 {
    margin-left: 2em;
}

.grid-container {
    margin-inline: auto;
    container-type: inline-size;
}

.wp {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1em;

    @container (width >=calc(150px * 2 + 1rem)) {
        .wp-card {
            grid-column: span 2;
        }
    }

    @container (calc(150px * 4 + 3rem) < width < calc(150px * 6 + 5rem)) {
        .wp-card:last-child:nth-child(odd) {
            grid-column: 2 / span 2;
        }
    }

    @container (calc(150px * 6 + 5rem) < width < calc(150px * 8 + 7rem)) {
        .wp-card:nth-child(3n + 4):last-child {
            grid-column: 3 / span 2;
        }

        /* &:has(:nth-child(3n + 5):last-child)> :nth-last-child(2) {
            grid-column: 2 / 4;
        } */
    }

    /* @container (calc(150px * 8 + 7rem) < width < calc(150px * 10 + 9rem)) {
        .wp-card:nth-child(4n + 5):last-child {
            grid-column: 4 / 6;
        }

        &:has(:nth-child(4n + 6):last-child)> :nth-last-child(2) {
            grid-column: 3 / 5;
        }

        &:has(:nth-child(4n + 7):last-child)> :nth-last-child(3) {
            grid-column: 2 / 4;
        }
    } */

    .wp-card {
        background-color: var(--wpcardBgColour);
        justify-content: center;
        align-content: center;
        text-align: center;
        border-radius: 20px;
        position: relative;

        .wp-card-text {
            font-size: large;
            padding: 5%;
        }

        .wp-card-months {
            padding: 0;
            margin: 0;

            &:before {
                content: "(";
                font-size: 1.5em;
            }

            &:after {
                content: ")";
                font-size: 1.5em;
            }
        }
        .wp-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
            z-index: 10;
        }
    }
}

footer {
    border: var(--footerBorderColour);
    margin-top: 2em;
    margin-bottom: 2rem;

    .bar {
        height: 3rem;
        background-color: var(--navBgColour);
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;

        .webmaster {
            float: right;
            color: var(--navTextColour);
            margin-right: 1rem;
            margin-top: 0.5rem;

            a {
                color: var(--navTextColour);
            }
        }
    }

    .auto-grid {
        place-items: center;
        --min-card-size: 150px;
    }

    .logo {
        margin: 15%;
    }
}

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

.ksq {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1em;

    @container (width >=calc(200px * 2 + 1rem)) {
        .ksq-card {
            grid-column: span 2;
        }
    }

    @container (calc(200px * 4 + 3rem) < width < calc(200px * 6 + 5rem)) {
        .ksq-card:last-child:nth-child(odd) {
            grid-column: 2 / span 2;
        }
    }

    @container (calc(200px * 6 + 5rem) < width < calc(200px * 8 + 7rem)) {
        .ksq-card:nth-child(3n + 4):last-child {
            grid-column: 3 / span 2;
        }

        &:has(:nth-child(3n + 5):last-child) > :nth-last-child(2) {
            grid-column: 2 / 4;
        }
    }

    @container (calc(200px * 8 + 7rem) < width < calc(200px * 10 + 9rem)) {
        .ksq-card:nth-child(4n + 5):last-child {
            grid-column: 4 / 6;
        }

        &:has(:nth-child(4n + 6):last-child) > :nth-last-child(2) {
            grid-column: 3 / 5;
        }

        &:has(:nth-child(4n + 7):last-child) > :nth-last-child(3) {
            grid-column: 2 / 4;
        }
    }

    .ksq-card {
        background-color: var(--ksqcardBgColour);
        justify-content: center;
        align-content: center;
        text-align: center;
        border-radius: 40px;
        padding: 5%;
    }
}

.data-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2em;

    & figure {
        transition: all 1s;
    }

    & figure:hover {
        /* display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%; */
        position: absolute;
        translate: calc(50vw - 50%) calc(50vh - 50%);
    }
}

.skip-nav-link {
    background: var(--navBgColour);
    color: var(--bgColour);
    padding: 0.5rem 1.5rem;
    border-radius: 0 0 0.25rem 0.25rem;
    position: absolute;
    opacity: 50%;
    left: 6rem;
    transform: translateY(-120%);
    transition: transform 325ms ease-in;

    & > a {
        color: var(--bgColour);
    }

    &:hover {
        background-color: var(--navHoverBgColour);
    }

    &:focus {
        transform: translateY(0);
    }
}

table,
thead {
    border: 1px solid black;
    border-collapse: collapse;
}

th,
td {
    padding: 10px;
}

thead {
    background-color: var(--wpcardBgColour);
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

td {
    text-align: center;
}

table.center {
    margin-left: auto;
    margin-right: auto;
    width: 60%;
}

.auto-grid {
    display: grid;
    gap: var(--gap, 1rem);

    grid-template-columns: repeat(
        auto-fit,
        minmax(min(var(--min-card-size, 300px), 100%), 1fr)
    );
}

.pcard {
    background-color: var(--wpcardBgColour);
    justify-content: center;
    align-content: center;
    text-align: center;
    border-radius: 20px;
    position: relative;

    display: grid;
    grid-template-columns: 33% auto;

    div {
        text-align: justify;
        padding: 10px;
    }
    div:nth-child(odd) {
        color: green;
        font-size: large;
    }
    .pname:before {
        content: "Name : ";
    }
    .prole:before {
        content: "Role : ";
    }
    .pinst:before {
        content: "Institution : ";
    }
    .pbio:before {
        content: "Bio : ";
    }
}

#main-content {
    margin: auto 5%;
    text-align: justify;
}

.file-listing {
    font-size: large;
    text-align: center;

    & > pre::first-line {
        background-color: var(--ksqcardBgColour);
    }
}