@import url('/fonts/georama/georama.css');

:root {
    --text: #FFFFFF;
    --background: #000000;
    --primary: #8080FF;
    --secondary: #FF78AE;
    --primary-hsl: 240deg 100% 75%;
    --secondary-hsl: 336deg 100% 74%;

    --body-font: 'Georama', system-ui, sans-serif;
    --heading-font: 'Georama Condensed', system-ui, sans-serif;

    --noise-course: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    --noise-medium: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    --noise-fine: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    --noise-ultra-fine: url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");

    --shadow-px: .04rem; /* good looking magic number */
    /* Manual gradient between primary and secondary */
    --shadow-color-0: var(--secondary-hsl);
    --shadow-color-1: 315deg 73% 69%;
    --shadow-color-2: 287deg 68% 68%;
    --shadow-color-3: 263deg 89% 73%;
    --shadow-color-4: var(--primary-hsl);
    --box-shadow: calc(1 * var(--shadow-px)) calc(2 * var(--shadow-px)) calc(2 * var(--shadow-px)) hsl(var(--shadow-color-0)/ .36),
                  calc(2 * var(--shadow-px)) calc(4 * var(--shadow-px)) calc(4 * var(--shadow-px)) hsl(var(--shadow-color-1) / .36),
                  calc(4 * var(--shadow-px)) calc(8 * var(--shadow-px)) calc(8 * var(--shadow-px)) hsl(var(--shadow-color-2) / .36),
                  calc(8 * var(--shadow-px)) calc(16 * var(--shadow-px)) calc(16 * var(--shadow-px)) hsl(var(--shadow-color-3) / .36),
                  calc(16 * var(--shadow-px)) calc(32 * var(--shadow-px)) calc(32 * var(--shadow-px)) hsl(var(--shadow-color-4) / .36);
    --box-shadow-glow: 0 0 calc(2 * var(--shadow-px)) calc(2 * var(--shadow-px)) hsl(var(--shadow-color-0)/ .36);

    --drop-shadow: drop-shadow(calc(1 * var(--shadow-px)) calc(2 * var(--shadow-px)) calc(2 * var(--shadow-px)) hsl(var(--shadow-color-0)/ .36))
                   drop-shadow(calc(2 * var(--shadow-px)) calc(4 * var(--shadow-px)) calc(4 * var(--shadow-px)) hsl(var(--shadow-color-1) / .36))
                   drop-shadow(calc(4 * var(--shadow-px)) calc(8 * var(--shadow-px)) calc(8 * var(--shadow-px)) hsl(var(--shadow-color-2) / .36))
                   drop-shadow(calc(8 * var(--shadow-px)) calc(16 * var(--shadow-px)) calc(16 * var(--shadow-px)) hsl(var(--shadow-color-3) / .36))
                   drop-shadow(calc(16 * var(--shadow-px)) calc(32 * var(--shadow-px)) calc(32 * var(--shadow-px)) hsl(var(--shadow-color-4) / .36));
    --drop-shadow-glow: drop-shadow(calc(-1 * var(--shadow-px)) calc(-1 * var(--shadow-px)) calc(2 * var(--shadow-px)) hsl(var(--shadow-color-0)/ .36));

    --line-height: 1.5;
    --v-grid: calc(var(--line-height) * 1rem);

    --column-width: 26rem;
}

/* Use rch if supported */
@supports(width: 40rch) {
    :root {
        --column-width: 40rch;
    }
}

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
    box-sizing: border-box;
}
* {
    margin: 0;
}
body {
    line-height: var(--line-height);
    -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
input, button, textarea, select {
    font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* Typography base */
html {
    font-size: 5vw; /* 16px at 320px */
}

@media (max-width: 320px) {
    html {
       font-size: 16px;
    }
}

@media (min-aspect-ratio: 4/5), ( (min-aspect-ratio: 2/3) and (min-width: 600px) ) {
    html {
        font-size: 2.5vh; /* 16px at 600px */
    }
}


@media (min-aspect-ratio: 4/5) and (max-height: 600px) {
    html {
       font-size: 16px;
    }
}

body {
    color: var(--text);
    font-family: var(--body-font);
}


/* Generic elements */
h1, h2, h3 {
    font-family: var(--heading-font);
}

h1 {
    margin-bottom: var(--v-grid);
    font-size: 3.375rem;
    line-height: calc(var(--v-grid) * 3);
}

h2 {
    margin-bottom: var(--v-grid);
    font-size: 2.25rem;
    line-height: calc(var(--v-grid) * 2);
}

h3 {
    margin-bottom: var(--v-grid);
    font-size: 1.5rem;
    line-height: var(--v-grid);
}

a,
a:visited {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: .1em;
}

a:hover,
a:focus {
    margin: 0 -.2em;
    padding: 0 .2em;
    background: var(--text);
    outline: none;
    color: var(--background);
    text-decoration: none;
}

/* Layout */
body {
    min-height: 100vh;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    padding-top: var(--v-grid);
    padding-bottom: var(--v-grid);

    background-color: var(--background);
}

body::before {
    --flare-0-origin: 30vw calc(100vh - 20vw);
    --flare-1-origin: 50vw calc(100vh - 40vw);
    --noise: var(--noise-course);

    content: '';
    display: block;

    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: -1;

    background-color: var(--background);
    background-image: radial-gradient(75vmin 75vmin at var(--flare-0-origin), hsl(var(--secondary-hsl) / .25) 2%, transparent 38%),
                      radial-gradient(50vmin 50vmin at var(--flare-1-origin), hsl(var(--primary-hsl) / .25) 2%, transparent 38%),
                      linear-gradient(23deg, transparent 63%, hsl(var(--primary-hsl) / .3) 100%),
                      linear-gradient(64deg, hsl(var(--primary-hsl) / .3) 0%, transparent 30%),
                      linear-gradient(336deg, transparent 40%, hsl(240deg 100% 7% / .6) 100%),
                      linear-gradient(294deg, hsl(0deg 0% 0% /.6) 0%, hsl(0deg 0% 42% /.6) 100%),
                      var(--noise);
    background-size: cover;
    background-attachment: scroll;

    filter: contrast(150%) brightness(50%) saturate(50%);
}

header {
    position: relative;
    width: 100%;
    margin-left: auto;
    padding-top: calc(var(--v-grid) * 5);
    font-family: var(--heading-font);
    font-weight: bold;
}

header .overlay {
    position: absolute;
    top: 0;
    width: 100vw;
    z-index: 10;
    display: flex;
    flex-flow: column nowrap;
}

header h1 {
    --height: calc(var(--v-grid) * 3.25);
    height: var(--height);
    margin-left: auto;
    margin-right: 1rem;
    margin-bottom: 0;
    font-size: 3.375rem;
    line-height: var(--height);
}

header p {
    --height: calc(var(--v-grid) * 2.25);
    height: var(--height);
    margin-left: 1rem;
    font-size: 2.25rem;
    line-height: var(--height);
}

header figure {
    filter: var(--drop-shadow-glow) var(--drop-shadow);
}

header figure img {
    margin-left: auto;
    max-width: calc(100vw - 2rem);
    border-radius: calc(2 * var(--shadow-px)); /* Undone by clip path, but it's the tought that counts. It's very subtle anyway. */
    clip-path: polygon(1.5% 5%, 100% 0%, 100% 100%, 0% 94%);
}

section {
    width: var(--column-width);
    max-width: 100vw;
    margin-top: calc(var(--v-grid) * 2);
    margin-bottom: calc(var(--v-grid) * 2);
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
}

section + section {
    margin-top: 0;
}

section > p {
    text-wrap: balance;
}

section > p:not(:last-child) {
    margin-bottom: var(--v-grid);
}

footer {
    font-size: small;
}

@media (min-aspect-ratio: 4/5), ( (min-aspect-ratio: 2/3) and (min-width: 600px) ) {
    body::before {
        --flare-0-origin: 30vh 80vh;
        --flare-1-origin: 50vh 60vh;
    }

    header {
        width: max-content;
        padding-top: calc(var(--v-grid) * 1);
    }

    header .overlay {
        width: auto;
    }

    header h1 {
        margin-left: -3.125rem;
    }

    header p {
        margin-left: -5rem;
    }

    header figure img {
        max-width: 80vw;
        max-height: 75vh;
    }

}

@media (min-aspect-ratio: 3/2) {
    header {
        margin-right: auto;
        padding-left: 20vh;
    }
    header figure img {
        clip-path: polygon(1.5% 5%, 100% 0%, 98.5% 100%, 0% 94%);
    }
}

@media (min-height: 900px), (min-width: 900px) {
    body::before {
       --noise: var(--noise-medium);
    }
}

@media (min-height: 1200px), (min-width: 1200px) {
    body::before {
       --noise: var(--noise-fine);
    }
}

@media (min-height: 1800px), (min-width: 1800px) {
    body::before {
       --noise: var(--noise-ultra-fine);
    }
}

/* Components: Box */
.box {
    --baseline-offset: .05em;
    --basline-offset-top: 0;
    --basline-offset-bottom: var(--baseline-offset);
    --_height: var(--height, calc(var(--v-grid) * 1.5));

    height: var(--_height);
    width: max-content;

    padding-top: var(--basline-offset-top);
    padding-right: 1rem;
    padding-bottom: var(--basline-offset-bottom);
    padding-left: 1rem;

    box-decoration-break: clone;
    box-shadow: var(--box-shadow-glow), var(--box-shadow);
    border-radius: calc(2 * var(--shadow-px));
    background-color: var(--background);

    color: var(--text);
    line-height: calc(var(--_height) - var(--baseline-offset));
}

.box + .box {
    margin-top: calc(var(--v-grid) / 2);
}

/* Components: Links */
ul.links {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--heading-font);
    font-weight: bold;
}

ul.links li {
    width: 100%;
}

ul.links li + li {
    margin-top: calc(var(--v-grid) / 2);
}

ul.links a {
    display: block;
    margin: 0 auto;
    width: 80%;
    text-decoration: none;
    text-align: center;
    transform: scale(1); /* Make sure element doesn't change stacking context during transition */
    transition-property: background, color, transform;
    transition-duration: .125s;
}

ul.links a:hover,
ul.links a:focus {
    margin: 0 auto;
    padding-top: var(--basline-offset-top);
    padding-right: 1rem;
    padding-bottom: var(--basline-offset-bottom);
    padding-left: 1rem;
    background: var(--background);
    color: var(--text);
    transform: scale(1.05);
}

ul.links a:active,
ul.links a:focus {
    background: var(--text);
    color: var(--background);
}