:root {
    /* Main colors */
    --bg: #55666e;
    --bg-grad: linear-gradient(180deg, #94b4b2 0%, #55666e 100%);
    --main: rgba(207, 218, 217, 0.8);
    --pattern: url("./resources/images/dark-mosaic.png");
    --text: black;
    --accent: #729292;
    --link: #055a45;
    /* Depths */
    --gradient-depths: linear-gradient(180deg, #94b1be 0%, #140c27 100%);
    /* Bottom */
    --gradient-bottom: linear-gradient(180deg, #57532c 0%, #000000 100%);
}

#depths, #guide {
    --bg: #323c42;
    --main: #1d1d2d;
    --text: rgb(242, 248, 247);
    --accent: #6f6f8c;
    --link: #f1fceb;
}

#bottom {
    --bg: black;
    --main: rgb(29, 29, 26);
    --text: rgb(241, 240, 228);
    --accent: rgb(52, 51, 53);
    --link: rgb(237, 228, 178);
}

body:has(#bottom:target) {background: black; background-image: none;}

@media only screen and (prefers-color-scheme: dark) {
    :root {
        --bg: #323c42;
        --bg-grad: linear-gradient(180deg, #655165 0%, #0c1f27 100%);
        --main: #1d1d2d;
        --text: rgb(242, 248, 247);
        --accent: #6f6f8c;
        --link: #f1fceb;
    }
    img {filter: brightness(50%) hue-rotate(40deg);}
}

body {
    margin: 0; padding: 0;
    font-family: Dyslexie, OpenDyslexic, 'Atkinson Hyperlegible', Verdana, Ubuntu, roboto, noto, Arial, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, -apple-system, BlinkMacSystemFont, Sans-Serif;
    font-size: 1em;
    line-height: 1.5em;
    background-color: var(--bg);
    background: var(--bg-grad);
    color: var(--text);
    overflow-x: clip;
    /*background-image: var(--pattern);*/
}

a {color: var(--link);}

.bg-pattern {
    background-image: var(--pattern);
    padding-top: 1em;
    padding-bottom: 1em;
}

.bg-pattern {min-height: 100vh;}

main {
    max-width: 55ch;
    margin: auto auto;
    padding: 0 1em;
}

img {display: block; margin: 0.5em auto; max-width: 100%; padding: 0; border-radius: 10px;}

.bg-pattern {background-image: var(--pattern);}

h1 {
    font-family: Dyslexie, OpenDyslexic, "The Bold Font", sans-serif;
    font-size: 2.5em;
    line-height: 1em;
    margin-top: 0.2em;
    margin-bottom: 0;
}

.box {
    border: 2px solid var(--accent);
    border-radius: 10px;
    background: var(--main);
    max-width: 55ch;
}

.box, main {
    padding: 1em;
}

.flex {display: flex; padding: 0 1em; margin-bottom: 1em; flex-wrap: wrap; border-bottom: 3px solid var(--accent);}
.flex :is(h1) {flex-grow: 2; flex-basis: 75%;}
.flex p {flex-grow: 1; flex-basis: 25%;}
.flexlist {display: flex; padding-left: 0; margin-bottom: 0; flex-wrap: wrap; justify-content: center; row-gap: 0.5em;}
.flexlist li {flex-basis: calc(49% - 1em); border: 1px solid var(--accent); margin-left: 0; text-align: center; padding: 0.5em 0.5em; flex-grow: 1;}
.flexlist li::marker {color: transparent;}
li:hover {backdrop-filter: brightness(110%);}

.center {text-align: center;}
.right, .tagline {text-align: right;}
.centerleft {margin: 0.5em auto; text-align: center;}

@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'The Bold Font';
    font-style: normal;
    font-weight: 400;
    src: local("The Bold Font"),
    url('../resources/fonts/theboldfont.ttf') format('truetype');
  }

.transitioner, #guide a {font-family: "VCR", sans-serif; text-transform: uppercase;}
.flex:has(.transitioner) {border-bottom: none;}

/* Background altering overlay that sits behind the main box */
#depths::after, #bottom::after, main:has(#surface:target)::after, #guide::after {
    content: "";
    height: 200vh;
    width: 200vw;
    position: absolute;
    top: -100vh; bottom: 0;
    left: -100vw; right: 0;
    background: var(--gradient-depths);
    opacity: 80%;
    pointer-events: none;
    display: none;
    z-index: -1; /* witchcraft */
}
#bottom::after, #guide::after {background: var(--gradient-bottom); opacity: 100%;}
#bottom, #depths, #guide {color: var(--text);}
main:has(#surface:target)::after {opacity: 0%; z-index: 5;}

/* ew */
#depths:target, #depths:target::after, #bottom:target, #bottom:target::after, main:has(#surface:target)::after, #guide:target::after {
    display: block;
}

#depths img {filter: brightness(60%) hue-rotate(90deg); opacity: 50%;}
#depths {box-shadow: 0 0em 2em rgba(237, 214, 236, 0.819);}
/*#guide p::before {content: "|-- ";}*/

/* Horrible awful nightmare code to make the target show/hide work */
#depths, #bottom, #guide {display: none;}
#depths:target, #bottom:target, #guide:target {display: block;}
#guide:target ~ #surface, #depths:target ~ #surface, #bottom:target ~ #surface {display: none;}

/* Opening animation when first loading the window */
@media only screen and not (prefers-reduced-motion: reduce) {
    #depths:target::after {
        animation: lowfader 2s linear;
        animation-iteration-count: 1;
        animation-direction: forwards;
    }
    #depths:target, #bottom:target {
        animation: opener 1.5s ease;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-direction: forwards;
    }
    main:has(#surface:target)::after {
        animation: fader 2s ease;
        animation-iteration-count: 1;
        animation-direction: reverse;
    }

    /* used on main */
    @keyframes opener {
    0% {opacity: 0%; transform: scaleX(0);}
    100% {opacity: 100%;  transform: scaleX(100%);}
    }

    @keyframes fader {
    0% {opacity: 0%;}
    100% {opacity: 100%;}
    }

    @keyframes lowfader {
    0% {opacity: 0%;}
    100% {opacity: 80%;}
    }
}
/* END OF ANIMATION CODE */

@font-face {
    font-display: block; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Elian';
    font-style: normal;
    font-weight: 400;
    src: local("Owl Elian"),
    url('./resources/fonts/owl-elian.ttf') format('truetype');
  }

  .elian {
    font-family: "Elian", sans-serif; 
    text-transform: lowercase; 
    font-size: 2em;
    margin-top: -1em;
    font-display: swap;
}

h1.elian {
    font-size: 4em;
    margin-top: 0em;
}

@font-face {
    font-display: block; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'VCR';
    font-style: normal;
    font-weight: 400;
    src: local("VCR OSD Mono"),
    url('./resources/fonts/VCR_OSD_MONO_1.001.ttf') format('truetype');
  }

/* Making mobile cooperate */

@media only screen and (max-width: 60ch) {
    main {border-radius: 0;}
    /* Kill animations on mobile because of scrolling weirdness */
    #depths:target, #surface:target, #bottom:target, main:has(#surface:target)::after {
        -webkit-animation: none;
        animation: none;
    }
    body {overflow-y: scroll;}
    main {margin: 0; padding: 0; min-width: 100vw; border-radius: 0;}
    #bottom .box {margin-top: -1em;}
    .bg-pattern {padding: 0;}
}
@media only screen and (max-width: 600px) {
    h1 {margin-top: 0.6em; text-align: center;}
    .tagline {text-align: center; margin-top: 0;}
    #bottom .box {border: none;}
    #bottom .tagline {margin-bottom: 0.5em;}
    #bottom .flexlist {margin-top: 2em;}
    #bottom .transitioner, #surface .transitioner {text-align: center;}
    img {display: none;}
}

/* Plus some stuff for a table of contents to center text vertically */
main:has(#guide:target) {
    font-size: 1.5em;
    height: calc(100vh - 5em);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#guide:target {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100vh;
}
#guide p {margin: 0 auto; width: min-content;}

/* Text runs off screen at small heights without this */
@media only screen and (max-height: 400px) {
    #guide:target {
    display: block;
    margin-top: 2em;
    }
    .bg-pattern:has(#guide:target) {
        min-height: 0;
    }
    body:has(#guide:target) {
        padding-top: 1em;
    }
}