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

/* The following CSS applies on all screen sizes */

/* Colors and fonts */
:root {
    /* Fonts */
    --bodyfont: 'Roboto', sans-serif;
    --headerfont: 'Space Grotesk', monospace;
    --titlefont: 'Zen Dots', monospace;
    
    /* Main colors */
    --background: black;  /*Main background color*/
--ufo: url("https://lutzbug.neocities.org/assets/backgrounds/colorwoerm.png");
    --color:#000000;
    --block: #eeeef6;

    --link:#23110b;
    --linkhover:#23110b;

    --footer:#d0dae0;
    --footerlink:#d0dae0;
    --footerlinkhover:#d0dae0;

    --h1:#23110b;
    --h2:#23110b;
    --h3:#23110b;
  	--button:#eeeeef7; 
}

@media (prefers-color-scheme:dark) {
    :root {
--background: black;  /*Main background color*/
--ufo: url("https://lutzbug.neocities.org/assets/backgrounds/wormboccs4colordarkmoed.png");
--color:#d0dae0;
--block: #111122;

--link:#d0dae0;
--linkhover:#d0dae0;

--footer:#d0dae0;
--footerlink:#d0dae0;
--footerlinkhover:#d0dae0;

--h1:#d0dae0;
--h2:#d0dae0;
--h3:#d0dae0;
       
--button:#191934; 
    }
}

* { margin:0; padding:0; }

/* Main body styling */
body {
   background: 
        url("https://lutzbug.neocities.org/assets/backgrounds/eggsacLEFT.png") 
        no-repeat top left,   
        url("https://lutzbug.neocities.org/assets/backgrounds/eggsacRIGHT.png") 
        no-repeat top right, var(--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;
}

/* Content styling */

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: translate(-50%, -65%); 

        width: 60%;
        max-width: 750px;
        max-height: 400px;

        overflow: auto;
        z-index: 2;
    }
}
body::before {  
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ufo)
               no-repeat 52% 30% / 65% auto; 
    pointer-events: none;
    z-index: -1;
}







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

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

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("https://lutzbug.neocities.org/assets/yinyang.gif");
}

main input,
textarea,
select,
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 dt:first-of-type {
  background: url("https://lutzbug.neocities.org/assets/backgrounds/rainbow.png") no-repeat;
}


dl dt:nth-of-type(2) {
  background: url("https://lutzbug.neocities.org/assets/backgrounds/Stripholder%20SLIME%20TRANSPARENT.%20png.png") no-repeat;
}


dl dd {
    padding-top: 0.5em;
    padding-bottom: 2em;
}



/* The following CSS ONLY applies to mobile/small screens */

/* Container styling */
#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 to content button */

#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;
}

/* The following CSS ONLY applies to desktop/big screens */

@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);
    }
}