@font-face {
    font-family: "#OpenSans";
    src: url("/static/fonts/OpenSans/OpenSans-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "#OpenSans-SemiBold";
    src: url("/static/fonts/OpenSans/OpenSans-SemiBold.ttf") format("truetype");
}

@font-face {
    font-family: "#RobotoMono";
    src: url("/static/fonts/RobotoMono/RobotoMono-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "#RobotoMono-Bold";
    src: url("/static/fonts/RobotoMono/RobotoMono-Bold.ttf") format("truetype");
}

:root {
    --foreground0: #919699;
    --foreground1: #C2C7CC;
    --foreground2: #DAE0E6;
    --foreground3: #F2F9FF;

    --background0: #0A0A0A;
    --background1: #141414;
    --background2: #1F1F1F;
    --background3: #292929;

    /* https://supercolorpalette.com/?scp=G0-hwb-FFD814-9EFF3D-33FFDD-3399FF-6647FF-E047FF-FF5533-FF9429 */
    --yellow0: #FFD814;
    --green0:  #9EFF3D;
    --cyan0:   #33FFDD;
    --blue0:   #3399FF;
    --purple0: #6647FF;
    --pink0:   #E047FF;
    --red0:    #FF5533;
    --orange0: #FF9429;

    /* https://supercolorpalette.com/?scp=G0-hwb-FFDF3D-ABFF57-4AFFE1-409FFF-6C4FFF-E357FF-FF6647-FF9E3D */
    --yellow1: #FFDF3D; /*  8 -> 24 = 16 */
    --green1:  #ABFF57; /* 24 -> 34 = 10 */
    --cyan1:   #4AFFE1; /* 20 -> 29 =  9 */
    --blue1:   #409FFF; /* 20 -> 25 =  5 */
    --purple1: #6C4FFF; /* 28 -> 31 =  3 */
    --pink1:   #E357FF; /* 28 -> 34 =  6 */
    --red1:    #FF6647; /* 20 -> 28 =  8 */
    --orange1: #FF9E3D; /* 16 -> 24 =  8 */

    /* https://supercolorpalette.com/?scp=G0-hwb-FFE770-BDFF7A-6BFFE6-66B3FF-8269FF-E875FF-FF846B-FFB56B */
    --yellow2: #FFE770;
    --green2:  #BDFF7A;
    --cyan2:   #6BFFE6;
    --blue2:   #66B3FF;
    --purple2: #8269FF;
    --pink2:   #E875FF;
    --red2:    #FF846B;
    --orange2: #FFB56B;

    --highlight-color0: var(--foreground2);
    --highlight-color1: var(--foreground3);

    --body-padding: 1.5em;
    --body-margin-top: 1em;
    --body-margin-bottom: 1em;
    --header-height: clamp(40px, 6vw, 3.25em);
    --header-padding: 1.5em;
    --footer-height: clamp(1em, calc(5em - 10vw), 2.5em);
    --footer-margin-top: 2em;
    --footer-padding: clamp(0.75em, 3vw, 1em);

    --content-max-width: max(60vw, 1160px);
}

.show-mobile {
    display: none;
}
@media (max-width: 640px) {
    .show-mobile {
        display: inherit;
    }
    .hide-mobile {
        display: none;
    }

    :root {
        --header-padding: 0.75em;
        --body-margin-top: 0em;
    }
}

body {
    background: var(--background1);
    color: var(--foreground2);
    font-family: "#OpenSans", "sans-serif";
    font-size: clamp(100%, 0.96vw, 185%);
    text-align: left;
    margin: var(--body-margin-top) auto var(--body-margin-bottom) auto;
    padding: 0 var(--body-padding);
    max-width: var(--content-max-width);
}

main {
    margin: 0;
    --main-height: calc(
        100vh
        - var(--body-margin-top)
        - var(--body-margin-bottom)
        - var(--header-padding) * 2
        - var(--header-height)
        - var(--footer-margin-top)
        - var(--footer-padding) * 2
        - var(--footer-height)
        - 1px
    );
    min-height: var(--main-height);
}

main > :not(center), main > center > * {
    display: inline-block;
}

div.center {
    width: max-content;
    margin: auto;
    display: block;
}

.highlight {
    color: var(--highlight-color0);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--foreground3);
    margin-top: 1.75em;
    margin-bottom: 0.75em;
}
h1 {
    font-family: "#RobotoMono-Bold", "monospace";
}
h2, h3, h4, h5, h6 {
    font-family: "#RobotoMono", "monospace";
}

br.half {
    display: block;
    content: "";
    margin-top: 0.5em;
}
br.double {
    content: "";
    display: block;
    margin-top: 2em;
}

p, li {
    text-align: justify;
}
@media (max-width: 640px) {
    li {
        text-align: inherit;
    }
}

ul li {
    padding: 0.25em 0.3em;
}

ol li {
    padding: 0.5em 0.3em;
}

ul, ol {
    padding: 0 2em;
}

ul {
    list-style: square;
}

a {
    color: var(--highlight-color0);
    text-decoration: none;
    transition: color 0.1s;
}
a:hover {
    color: var(--highlight-color1);
}

button {
    font-family: "#RobotoMono", "monospace";
    font-size: large;
    background-color: var(--background1);
    border: 2px var(--foreground0) solid;
    color: var(--highlight-color0);
    margin: 0.25em;
    padding: 0.5em 0.75em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
button:hover {
    background-color: var(--background2);
    color: var(--highlight-color1);
    cursor: pointer;
}

pre {
    font-family: "#RobotoMono", monospace;
    background: var(--background2);
    padding: 0.75em;
    margin: 0.75em 0;
    overflow: auto;
}

code {
    font-family: "#RobotoMono", monospace;
    font-size: 95%;
    background: var(--background2);
    padding: 0 0.25em;
}

img {
    max-width: 100%;
    object-fit: cover;
    display: block;
    margin: 2em auto 0 auto;
}

.img-flex {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}
.img-flex-elem {
    list-style: none;
    height: 12em;
    flex-grow: 1;
    padding: 0.3em;
}
.img-flex-elem img {
    max-height: 85%;
    min-width: 100%;
    margin: unset;
}

figcaption {
    font-family: "#RobotoMono-Bold", monospace;
    font-size: 0.75em;
    text-align: center;
    padding: 0.5em 0;
}

.fa-at, .fa-external-link-alt, .fa-file-pdf {
    margin: 0 0.2em;
}

.nowrap {
    white-space: nowrap;
}

a.download-button {
    display: inline-block;
    height: 100%;
    white-space: nowrap;
    font-family: "#RobotoMono-Bold", monospace;
    font-size: 95%;
    padding: 0.3em 0.65em;
    border-radius: 0.25em;
    color: var(--background3);
    background-color: var(--yellow0);
}

a.download-button:hover {
    color: var(--background1);
    background-color: var(--yellow2);
}