@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 {
    /* https://supercolorpalette.com/?scp=G0-hsl-92918B-B9B8B1-D7D5CC-F5F4EF-90929D-B8B9C7-D6D6E6-F4F4FB */
    --foreground0: #92918B;
    --foreground1: #B9B8B1;
    --foreground2: #D7D5CC;
    --foreground3: #F5F4EF;
    --foreground-var0: #90929D;
    --foreground-var1: #B8B9C7;
    --foreground-var2: #D6D6E6;
    --foreground-var3: #F4F4FB;

    /* https://supercolorpalette.com/?scp=G0-hsl-11100D-1F1E1A-292824-32322F-131415-1F1F29-29273F-333263 */
    --background0: #11100D;
    --background1: #1F1E1A;
    --background2: #292824;
    --background3: #32322F;
    --background-var0: #131415;
    --background-var1: #1F1F29;
    --background-var2: #29273F;
    --background-var3: #333263;

    /* 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(--yellow0);
    --highlight-color1: var(--yellow1);

    --margin-top: 0em;
    --body-margin-top: 4em;
    --body-margin-bottom: 1em;
    --footer-height: 3.5em;
    --footer-margin-top: 2.5em;
    --footer-padding-top: clamp(0.75em, 3vw, 1.5em);

    --content-max-width: 960px;
}

html {
    margin-top: var(--margin-top);
}

body {
    background: var(--background1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='0.06'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.2' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='35' specularConstant='1.3' specularExponent='20' lighting-color='%23FFE770' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='1'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%2300000000'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23ffe770' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
    background-attachment: fixed;
    color: var(--foreground2);
    font-family: "#OpenSans", "sans-serif";
    font-size: clamp(100%, calc(90% + 0.4vw), 115%);
    text-align: left;
    margin: var(--body-margin-top) auto var(--body-margin-bottom) auto;
    padding: 0 1.5em;
    max-width: var(--content-max-width);
}

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

.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";
}

.plain-link, a {
    color: var(--foreground2);
    text-decoration: none;
}
.plain-link:hover, a:hover {
    color: var(--foreground3);
}

button {
    font-family: "#RobotoMono", "monospace";
    font-size: large;
    background-color: var(--background1);
    border: var(--foreground0) solid 2px;
    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;
}
.plain-button {
    color: var(--foreground2);
}
.plain-button:hover {
    color: var(--foreground3);
}

pre {
    padding: 0.75em;
    margin: 0.75em 0;
    overflow: auto;
}

code {
    padding: 0 0.25em;
    font-size: 95%;
    background: var(--background3);
}

pre, code {
    font-family: "#RobotoMono", monospace;
}
pre, pre code {
    background: var(--background2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='0.07'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.167' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='40' specularConstant='2.8' specularExponent='20' lighting-color='%23FFE770' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='191'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%2300000000'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23ffe770' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
}

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;
    flex-grow: 1;
    padding: 0.3em;
}
.img-flex-elem img {
    max-height: calc(100% - 1.8em);
    min-width: 100%;
    margin: unset;
}

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

.contact {
    color: var(--foreground2);
    font-family: "#RobotoMono", "monospace";
    font-size: clamp(85%, 2.5vw, 100%);
    display: inline-block;
    min-width: clamp(8.25em, 20vw, 12em);
    margin: 0 0.25em 0.15em 0.25em;
    line-height: 1.75em;
    white-space: nowrap;
}
.contact:hover {
    color: var(--foreground3);
}

footer {
    border-top: 1px solid var(--foreground1);
    text-align: center;
    margin-top: var(--footer-margin-top);
    padding-top: var(--footer-padding-top);
    height: var(--footer-height);
}

.fa-at {
    margin: 0 0.2em;
}

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