:root {
    --md-primary: rgb(80 91 146);
    --md-surface-tint: rgb(80 91 146);
    --md-on-primary: rgb(255 255 255);
    --md-primary-container: rgb(222 225 255);
    --md-on-primary-container: rgb(9 22 75);
    --md-secondary: rgb(90 93 114);
    --md-on-secondary: rgb(255 255 255);
    --md-secondary-container: rgb(223 225 249);
    --md-on-secondary-container: rgb(23 26 44);
    --md-tertiary: rgb(118 84 110);
    --md-on-tertiary: rgb(255 255 255);
    --md-tertiary-container: rgb(255 215 242);
    --md-on-tertiary-container: rgb(45 18 40);
    --md-error: rgb(186 26 26);
    --md-on-error: rgb(255 255 255);
    --md-error-container: rgb(255 218 214);
    --md-on-error-container: rgb(65 0 2);
    --md-background: rgb(251 248 255);
    --md-on-background: rgb(27 27 33);
    --md-surface: rgb(251 248 255);
    --md-on-surface: rgb(27 27 33);
    --md-surface-variant: rgb(227 225 236);
    --md-on-surface-variant: rgb(70 70 79);
    --md-outline: rgb(118 118 128);
    --md-outline-variant: rgb(198 197 208);
    --md-shadow: rgb(0 0 0);
    --md-scrim: rgb(0 0 0);
    --md-inverse-surface: rgb(48 48 54);
    --md-inverse-on-surface: rgb(242 240 247);
    --md-inverse-primary: rgb(185 195 255);
    --md-primary-fixed: rgb(222 225 255);
    --md-on-primary-fixed: rgb(9 22 75);
    --md-primary-fixed-dim: rgb(185 195 255);
    --md-on-primary-fixed-variant: rgb(56 67 121);
    --md-secondary-fixed: rgb(223 225 249);
    --md-on-secondary-fixed: rgb(23 26 44);
    --md-secondary-fixed-dim: rgb(195 197 221);
    --md-on-secondary-fixed-variant: rgb(67 70 89);
    --md-tertiary-fixed: rgb(255 215 242);
    --md-on-tertiary-fixed: rgb(45 18 40);
    --md-tertiary-fixed-dim: rgb(229 186 216);
    --md-on-tertiary-fixed-variant: rgb(93 60 85);
    --md-surface-dim: rgb(219 217 224);
    --md-surface-bright: rgb(251 248 255);
    --md-surface-container-lowest: rgb(255 255 255);
    --md-surface-container-low: rgb(245 242 250);
    --md-surface-container: rgb(239 237 244);
    --md-surface-container-high: rgb(233 231 239);
    --md-surface-container-highest: rgb(227 225 233);
}

body {
    font-family: Inter, -system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
    line-height: 1.625;
    background-color: var(--md-surface);
    color: var(--md-on-surface);
    display: flex;
    margin: 0;
    padding: 0;
}

aside {
    background-color: var(--md-surface-container);
    margin-right: 2rem;
    padding: 1rem 1.5rem;
    font-size: 1.25rem;
    min-height: 95vh;
}

aside a {
    display: block;
    margin-bottom: 1rem;
}

.info-card {
    padding: .75rem 1.25rem;
    background-color: var(--md-primary-container);
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    width: max-content;
    max-width: 70vw;
}

img {
    max-width: 100%;
}

.hamburger {
    display: none;
}

@media (max-width: 768px) {
    nav {
        display: none;
        width: 100vw;
    }

    .info-card, img {
        width: calc(100vw - 10rem);
    }

    .hamburger {
        display: block;
        border: none;
        font-size: 1.25rem;
        background-color: var(--md-primary);
        color: var(--md-on-primary);
        padding: .3rem .5rem 0.55rem .5rem;
        border-radius: 100rem;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --md-primary: rgb(185 195 255);
        --md-surface-tint: rgb(185 195 255);
        --md-on-primary: rgb(33 44 97);
        --md-primary-container: rgb(56 67 121);
        --md-on-primary-container: rgb(222 225 255);
        --md-secondary: rgb(195 197 221);
        --md-on-secondary: rgb(44 47 66);
        --md-secondary-container: rgb(67 70 89);
        --md-on-secondary-container: rgb(223 225 249);
        --md-tertiary: rgb(229 186 216);
        --md-on-tertiary: rgb(68 38 62);
        --md-tertiary-container: rgb(93 60 85);
        --md-on-tertiary-container: rgb(255 215 242);
        --md-error: rgb(255 180 171);
        --md-on-error: rgb(105 0 5);
        --md-error-container: rgb(147 0 10);
        --md-on-error-container: rgb(255 218 214);
        --md-background: rgb(18 19 24);
        --md-on-background: rgb(227 225 233);
        --md-surface: rgb(18 19 24);
        --md-on-surface: rgb(227 225 233);
        --md-surface-variant: rgb(70 70 79);
        --md-on-surface-variant: rgb(198 197 208);
        --md-outline: rgb(144 144 154);
        --md-outline-variant: rgb(70 70 79);
        --md-shadow: rgb(0 0 0);
        --md-scrim: rgb(0 0 0);
        --md-inverse-surface: rgb(227 225 233);
        --md-inverse-on-surface: rgb(48 48 54);
        --md-inverse-primary: rgb(80 91 146);
        --md-surface-dim: rgb(18 19 24);
        --md-surface-bright: rgb(56 57 63);
        --md-surface-container-lowest: rgb(13 14 19);
        --md-surface-container-low: rgb(27 27 33);
        --md-surface-container: rgb(31 31 37);
        --md-surface-container-high: rgb(41 42 47);
        --md-surface-container-highest: rgb(52 52 58);
    }

    a {
        color: lightblue;
    }

    .payment-students a {
        color: white;
    }

    textarea, input {
        background-color: #322F35;
        border: 1px solid #4A4458;
        color: white;
    }
}

/* Fonts */

/* inter-300 - latin */
@font-face {
    font-display: swap;
    font-family: "Inter";
    font-style: normal;
    font-weight: 300;
    src: url("/fonts/inter-v13-latin-ext-300.woff2") format("woff2");
}

/* inter-regular - latin */
@font-face {
    font-display: swap;
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/inter-v13-latin-ext-regular.woff2") format("woff2");
}

/* inter-500 - latin */
@font-face {
    font-display: swap;
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    src: url("/fonts/inter-v13-latin-ext-500.woff2") format("woff2");
}

/* inter-600 - latin */
@font-face {
    font-display: swap;
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    src: url("/fonts/inter-v13-latin-ext-600.woff2") format("woff2");
}

/* inter-700 - latin */
@font-face {
    font-display: swap;
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    src: url("/fonts/inter-v13-latin-ext-700.woff2") format("woff2");
}