@font-face {
    font-family: "Inter Normal";
    src: url("source/font/Inter-Variable-Normal.woff2") format("woff2-variations");
    font-stretch: 100% 100%;
    font-style: normal;
    font-weight: 100 900;
    font-optical-sizing: auto;
}

@font-face {
    font-family: "Inter Italic";
    src: url("source/font/Inter-Variable-Italic.woff2") format("woff2-variations");
    font-stretch: 100% 100%;
    font-style: normal;
    font-weight: 100 900;
    font-optical-sizing: auto;
}



* {
    font-family: "Inter Normal", sans-serif;
    font-weight: 300;
}

b {
    font-family: "Inter Normal", sans-serif;
    font-weight: 600;
}

i {
    font-family: "Inter Italic", sans-serif;
    font-weight: 300;
}



body {
    --bg: hsl(0 0% 9.5%);     /* background color */
    --fg: hsl(0 0% 95%);      /* foreground color */
    --hl: hsl(35 80% 60%);    /* highlight color */
    --w: 70%;                 /* relative content width */
    --nav: 40pt;              /* navigation bar height */
    background-color: var(--bg);
    color: var(--fg);

    /* make child flush with screen */
    margin: 0;
    padding: 0;
}



.wrapper {
    padding-top: 60pt;    /* vertical content offset */
    width: var(--w);
    margin: 0 auto;       /* horizontal centering */
}



.navigation {
    background-color: hsla(from var(--bg) h s l / 0.85);    /* transparent background */
    backdrop-filter: blur(2pt);                              /* frosted glass effect */
    display: flex;                                           /* enable flexbox module */
    top: 0;
    position: fixed;
    width: 100%;
    height: var(--nav);
    overflow: hidden;
    z-index: 1000;                                           /* set as top most element */
    align-items: center;                                     /* center child vertically */
    justify-content: center;                                 /* center child horizontally */
    border-bottom: 1pt solid var(--fg);                      /* draw border line */

    /* make child flush with screen */
    margin: 0;
    padding: 0;
}

.navigation .container {
    display: flex;
    width: var(--w);

    /* make child flush with screen */
    margin: 0;
    padding: 0;
}

.navigation .container a:first-child {

    /* make left most element flush with content */
    margin-left: 0;
    padding-left: 0;
}

.navigation .container a:last-child {

    /* make right most element flush with content */
    margin-right: 0;
    padding-right: 0;
}

.navigation .container a {
    transition: all 250ms ease;    /* transition animation */
    color: var(--fg);
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    padding: 10pt 5pt;
}

.navigation .container a:nth-of-type(2) {

    /* set all elements except first one to be on right side */
    margin-left: auto;
}

.navigation .container a:not(.home):hover {
    color: var(--hl);    /* highlight on mouse cursor hover */
}

.navigation .container a.active {
    color: var(--hl)    /* highlight current parent directory */
}

@keyframes grow {

    /* define animation keyframes */
    from { width: 0%; }
    to { width: 100%; }
}

.scrollbar {
    position: fixed;
    top: var(--nav);
    left: 0;
    width: 0;
    height: 1pt;
    background: var(--hl);    /* use highlight color for scolling indicator */
    z-index: 1001;

    /* link animation to document scroll */
    animation-name: grow;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-timeline: scroll();
}