@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&family=Roboto:wght@400;700&family=Zen+Dots&display=swap');

:root {
    --bodyfont: 'Roboto', sans-serif;
    --headerfont: 'Space Grotesk', monospace;
    --titlefont: 'Zen Dots', monospace;
    --body-background: url("../artwork/eggsacLEFT.png") no-repeat top left, url("../artwork/eggsacRIGHT.png") no-repeat top right, black;
    --ufo: url("../artwork/colorwoerm.png");
    --ufo-position: no-repeat 52% 30% / 65% auto;
    --card-transform: translate(-50%, -65%);
    --color:#000000;
    --block: #ffffff;
    --link:#23110b;
    --linkhover:#23110b;
    --h1:#23110b;
    --h2:#23110b;
    --h3:#23110b;
    --button:#eeeeef;
}

body.entrance {
    --body-background: url("../artwork/planetpuke.png") no-repeat top left, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEoAAABKCAIAAACTslUmAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACi0lEQVR4nO2bS2/CMAyAgUIRoA3YYNCuHWMam4TEiV2Qxv//WzsUdV3eTezG6fqdSpumediO7YRez4ooGo7iAX/TrrbmSLPUsYaik/P5vfDp627nWD/P4f2gL9Qf9IU/AefkcrlUf2apdChJC8LdbIZaP68XASOTc8vyjGCUUspfdNyYTCe+myAhioZIuiS0H5vNE0jlSbI1KteJ4g3TATNDYSEWi6W6wB/GcVy8UL2jeFmhSIZTTVEiKLbJkHEcA9YW8ECMBmKPgbQbJQRwSmE7r3BWEXnJb9FAXTeqgO7STxqZk0kBxCmVWRE7KMpeMZOMz5mlqZ12MZSmC0ReTqeTvpDsS9gRaqPACtLDcuVYA0XBbp5dnntugbXSfhw+AT5vp+UulgbESvmk6kO56CGs388izJbifhIJJrrt1bdddYXc0Ta6G2cVFo3Tqhz8YhBFQ7wVJngTImS/f/PdBGS03iBUbpMuzOZRR4DZHRTUurFerZkLsliascl0ArtjaJjqOh6P/E3e5WghvLENJibMlccXzHUkANvjbUkMRhgMqdsfEv23bgSpbK8lCivsfn7JG0xgniaJ4YvtjHqoY5cywZurRy65oEg3lIuH0dk5LYAmUWuf6i7NhAxecysHQf+F6XytsTifv1SPcfNqHURJthvZI1RNK3wMYXz4C/14/F9AwllvjJYInXmmCHJ6eQeqyV2xlkydf2C2vw3gXXnglEzpxKGmer6vV7zKG8W/rS9EgklCVjXbXMsJhS3YwMSgHf5xX8Sc/h9okVypHiX0bz/UZM8ZbIV5lstiKA9jof2kYZjP+3GtJcjMb2kkwN1rQ9ePxHrDd95ud7K8bv8podpoBYxgmrTgB9zZIiHSBDCVAAAAAElFTkSuQmCC");
    --ufo: url("../artwork/ufopaintlight.png");
    --ufo-position: no-repeat 52% 45% / 65% auto;
    --card-transform: translate(-50%, -75%);
}

body.not-found {
    /* 404 page has more text than the entrance page, so it needs to sit higher to stay inside the mouth cavity. */
    --card-transform: translate(-50%, -110%);
}

@media (prefers-color-scheme:dark) {
    :root {
        --color:#d0dae0;
        --block: #000000;
        --link:#d0dae0;
        --linkhover:#d0dae0;
        --h1:#d0dae0;
        --h2:#d0dae0;
        --h3:#d0dae0;
        --button:#191934;
    }
    :root         { --ufo: url("../artwork/wormboccs4colordarkmoed.png"); }
    body.entrance { --ufo: url("../artwork/ufopaintdark.png"); }
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
    background: var(--body-background);
    font:1rem sans-serif;
    color:var(--color);
}

main {
    background: var(--block);
    position: relative;
    z-index: 2;
}

@media screen and (max-width: 1909px) {
    main {
        margin-top: 10px;
        background: var(--block);
        padding: 15px;
        border-radius: 80px;
        position: static;
        width: auto;
        max-height: none;
        overflow: visible;
    }
    body::before {
        display: none;
    }
    /* Below this width the UFO/mouth scene is hidden, so match the rest of the site's
       page background instead of the desktop-only eggsac corner art. */
    body {
        background: #000000;
    }
    @media (prefers-color-scheme: light) {
        body {
            background: url("../artwork/Tilebg.png") #eeeef6; /* Lavender */
        }
    }
}

@media screen and (min-width: 1909px) {
    main {
        position: absolute;
        background: none;
        top: 50%;
        left: 50%;
        transform: var(--card-transform);
        width: 60%;
        max-width: 750px;
        max-height: 400px;
        overflow: auto;
        z-index: 2;
    }
}

body::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ufo) var(--ufo-position);
    pointer-events: none;
    z-index: -1;
}

main h1 {
    font:2.2em var(--titlefont);
    color:var(--h1);
    margin:0 0 10px 0;
    text-align:center;
}

.abducted-buttons {
    display: none;
}

@media (min-width: 1200px) and (min-height: 850px) {
    .abducted-buttons {
        position: fixed;
        bottom: 65px;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 12px;
        margin: 0;
        z-index: 5;
        pointer-events: auto;
    }
}

.abducted-buttons img {
    filter: sepia(1) hue-rotate(70deg) saturate(3);
    animation: abducted-float 3s ease-in-out infinite;
}
.abducted-buttons img:nth-child(2) { animation-delay: -0.75s; }
.abducted-buttons img:nth-child(3) { animation-delay: -1.5s; }
.abducted-buttons img:nth-child(4) { animation-delay: -2.25s; }

@keyframes abducted-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

main h2 {
    font:1.8em var(--titlefont);
    color:var(--h2);
    margin:20px 0 10px 0;
}

main h3 {
    font:1.3em var(--headerfont);
    color:var(--h3);
}

p {
    line-height:1.5;
    margin:10px 0 10px 0;
}

.center { text-align: center; }

main a {
    color:var(--link);
    transition:0.5s ease;
}
main a:hover, main a:focus {
    color:var(--linkhover);
    transition:0.5s ease;
}

main hr {
    border: none;
    margin: 20px;
    color: var(--color);
    text-align: center;
    font-size: 1.1em;
    letter-spacing: 0.3em;
}
main hr::before {
    content: "✦ ✦ ✦";
    display: block;
}

main ul {
    list-style-position: outside;
    margin-left: 25px;
}
main ul li {
    line-height:1.5;
}

main img {
    max-width:100%;
}

main blockquote, main .box {
    padding:10px;
    border-left:20px solid var(--link);
}

main details {
    background:rgb(0,0,0,0.1);
    padding:10px;
    margin:10px 0 10px 0;
}
main details summary {
    cursor:pointer;
}

.taijitu {
    list-style-image: url("data:image/gif;base64,R0lGODlhDwAPALMAAAAAABAQEBgYGCEhITExMWZmZpycnKWl9729vc7OztbW1t7e3ufn5/f39////6Wl9yH5BAEAAA8ALAAAAAAPAA8AAARA8EkJap34Vcf5xUAnMp8mbtzwhR3qCBcrdojlzgpsi41RFDZLR6EK7jgEo82kEDqCFEfCCaU0AkpAJqvNUJaYCAA7");
}

main input,
textarea,
select,
button, .cta-button {
    background: var(--button);
    color: var(--color);
    font: 1.1rem var(--headerfont);
    border: 1px solid #100e25;
    border-radius: 60px;
    padding: 1rem 2rem;
    display: inline-block;
    margin: 0.25rem 0.5rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.button2::before {
    content: "✦ ";
}
.button2:nth-of-type(3n+1)::before { color: #D60270; }
.button2:nth-of-type(3n+2)::before { color: #9B4F96; }
.button2:nth-of-type(3n+3)::before { color: #0038A8; }
.button2 {
    background: var(--button);
    width: 50%;
    border-radius: 50px;
    padding: 0.3rem 0.5rem;
    text-align: left;
}

dl dt {
    font-family: 'Space Grotesk', monospace;
    font-size: 1.4em;
    font-weight: bold;
    padding: 1em;
    font-variant: small-caps;
    letter-spacing: 0.05em;
}
dl dd {
    padding-top: 0.5em;
    padding-bottom: 2em;
}

#container {
    width: calc(100% - 20px);
    padding:10px;
    margin-top:10px;
}

#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    background:var(--block);
    color:var(--link);
    z-index:1000;
    padding:5px;
}
#skip a:focus {
    top: 0;
    transition:top 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

@media (forced-colors: active) {
    main a { text-decoration: underline; }
}

@media (prefers-contrast: more) {
    :root {
        --color: #000000;
        --block: #ffffff;
        --link: #0000ee;
        --linkhover: #551a8b;
        --h1: #000000;
        --h2: #000000;
        --h3: #000000;
        --button: #ffffff;
    }
    body::before {
        display: none;
    }
    main {
        border: 3px solid var(--color);
    }
    main a {
        text-decoration: underline;
    }
    main input, textarea, select, button, .cta-button, .button2 {
        border: 2px solid var(--color);
    }
    @media (prefers-color-scheme: dark) {
        :root {
            --color: #ffffff;
            --block: #000000;
            --link: #ffff00;
            --linkhover: #00ffff;
            --h1: #ffffff;
            --h2: #ffffff;
            --h3: #ffffff;
            --button: #000000;
        }
    }
}