@import url('https://fonts.upset.dev/css2?family=Space+Grotesk:wght@400;600&display=swap');
@import url('https://fonts.upset.dev/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap');
:root {
    --bodyfont: 'Roboto', sans-serif;
    --headerfont: 'Space Grotesk', monospace;
    --titlefont: 'Zen Dots', monospace;
    --body-background: url("/assets/artwork/eggsacLEFT.png") no-repeat top left, url("/assets/artwork/eggsacRIGHT.png") no-repeat top right, black;
    --ufo: url("/assets/artwork/colorwoerm.png");
    --ufo-position: no-repeat 52% 30% / 65% auto;
    --card-transform: translate(-50%, -65%);
    --color:#000000;
    --block: #eeeef6;
    --link:#23110b;
    --linkhover:#23110b;
    --footer:#d0dae0;
    --footerlink:#d0dae0;
    --footerlinkhover:#d0dae0;
    --h1:#23110b;
    --h2:#23110b;
    --h3:#23110b;
  	--button:#eeeeef7;
}
body.entrance {
    --body-background: url("/assets/artwork/planetpuke.png") no-repeat top left, url("/assets/artwork/Stars.png");
    --ufo: url("/assets/artwork/ufopaintlight.png");
    --ufo-position: no-repeat 52% 45% / 65% auto;
    --card-transform: translate(-50%, -75%);
}
@media (prefers-color-scheme:dark) {
    :root {
--color:#d0dae0;
--block: #111122;
--link:#d0dae0;
--linkhover:#d0dae0;
--footer:#d0dae0;
--footerlink:#d0dae0;
--footerlinkhover:#d0dae0;
--h1:#d0dae0;
--h2:#d0dae0;
--h3:#d0dae0;
--button:#191934;
    }
    :root        { --ufo: url("/assets/artwork/wormboccs4colordarkmoed.png"); }
    body.entrance { --ufo: url("/assets/artwork/ufopaintdark.png"); }
}
* { margin:0; padding:0; }
body {
    background: var(--body-background);
    font:1.1rem sans-serif;
    color:var(--color);
}
#main-header {
    font:2.5em var(--headerfont);
    color:var(--header);
    text-align:center;
    margin-bottom:10px;
}
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;
    }
}
@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);
}
main h4 {
    font:1em var(--headerfont);
    font-style:italic;
    color:var(--h4);
}
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 none var(--link);
}
main details {
    background:rgb(0,0,0,0.1);
    padding:10px;
    margin:10px 0 10px 0;
}
main details summary {
    cursor:pointer;
}
#main-footer {
    text-align:center;
    padding:15px;
    color:var(--footer);
}
#main-footer a {
    color:var(--footerlink);
    transition:0.5s ease;
}
#main-footer a:hover, #main-footer a:focus {
    color:var(--footerlinkhover);
    transition:0.5s ease;
}
.taijitu {
  list-style-image: url("/assets/yinyang.gif");
}
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;
}
#banner-content {
    width: calc(100% - 20px);
}
#main-menu li {
    margin-bottom:15px;
    display:inline-block;
}
#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 screen and (min-width: 800px) {
    #container {
        max-width:800px;
        width:90%;
        margin:25px auto 0 auto;
        display:flex;
        flex-wrap:wrap;
    }
    #main-header {
        flex: 1 1 100%;
        text-align:left;
    }
    #main-menu {
        flex: 1 1 100%;
        text-align:left;
    }
    #banner {
        flex: 1 1 calc(25% - 20px);
        margin-top:10px;
        height:500px;
        background:var(--banner-image-desktop);
        background-position:var(--banner-position-desktop);
    }
    main {
        flex: 1 1 calc(75% - 30px);
        overflow:auto;
        height:calc(500px - 30px);
    }
    #main-footer {
        flex: 1 1 calc(100% - 30px);
    }
}