@font-face { font-family: 'Inconsolata'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url('assets/inconsolata.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url('assets/rubik.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

html {
    color-scheme: dark light auto;
    background-color: #002b36;
    color: #AAAAAA;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

body {
    max-width: 900px;
    font-family: 'Rubik', sans-serif;
    margin: auto;
}

h1 { margin-bottom: 0; }
.mono { font-family: 'Inconsolata', monospace; }


@media screen and (max-width: 480px){
    li {
        margin-bottom: 1em;
    }
}

.box {
    padding: 1em;
    padding-bottom: 0em;
    border: 2px solid #AAAAAA;
    background-color: #003847;
    border-radius: 10px;
}

.box>h2, .box>h3 {
    margin: 0;
}

.box>p {
    margin-top: 0;
}

a, a:visited {
    color: #2aafdb;
}

.tooltip {
    text-decoration: underline #aaa5 dashed 3px;
    cursor: help;
}

.nav {
    display: flex;
    gap: 1em;
    padding: .5em;
}
.nav>div {
    background-color: #003847;
    margin: 0;
    border-radius: .5em;
    height: 100%; 
    margin-bottom: 20px\9;
}
.nav>div>a {
    display: block;
    padding: .75em;
    height: 100%;
    text-decoration: none;
}
#nav-div {
    display: inline\9;
    display: flex;
    align-items: center;
    column-gap: 1em;
    flex-wrap: wrap;
}
#nav-div>h1 {
    margin-top: 0;
}
@media only screen and (max-width: 900px) {
    #nav-div {
        justify-content: center;
    }
}