body{
    margin:0;
    background: url(images/rainbowcloud2.png);
    background-size:cover;
    background-attachment:fixed;
    font-family:'illusion';
}


#warning{
    width:100vw;
    height:100vh;
    position:absolute;
    top:0;
    left:0;
    z-index:9999;
    pointer-events: none;
    text-shadow: -1px -1px 0 var(--warning), 1px -1px 0 var(--warning), -1px 1px 0 var(--warning), 1px 1px 0 var(--warning);
    a{
        text-shadow: -1px -1px 0 var(--stroke3), 1px -1px 0 var(--stroke3), -1px 1px 0 var(--stroke3), 1px 1px 0 var(--stroke3);
        color:var(--warning);
        text-decoration-style: wavy;
    }
    a:hover{
        text-shadow: -1px -1px 0 var(--warning), 1px -1px 0 var(--warning), -1px 1px 0 var(--warning), 1px 1px 0 var(--warning);
        color:var(--pink);
    }
}

details{
    position:relative;
    z-index:9999;
    width:80%;
    margin:5% auto;
    background:none;
    display:hidden;
    pointer-events: none;
}

a{
    color:red;
    -webkit-transform: perspective(0);
}

a:hover{
    text-transform:uppercase;
}

summary{
    visibility:collapse;
}

.latest{
    display:flex;
    justify-content: space-between;
    width:80%;
    .text{
        width:50%;
        margin-left:2%;
    }
}

#latest{
    filter: drop-shadow(3px 0 0 var(--warning)) drop-shadow(0 3px 0 var(--warning)) drop-shadow(-3px 0 0 var(--warning)) drop-shadow(0 -3px 0 var(--warning));
    width:50%;
}

h1{
    margin:0;
}

#yamu{
    position:absolute;
    max-height:100vh;
    top:-29%;
    right:-30%;
}

#thing{
    filter: drop-shadow(3px 0 0 var(--warning)) drop-shadow(0 3px 0 var(--warning)) drop-shadow(-3px 0 0 var(--warning)) drop-shadow(0 -3px 0 var(--warning));
    width:80%;
    background:url(images/journal3.png);
    background-size:cover;
    image-rendering: pixelated;
    color:white;
    z-index:9999;
    position:relative;
    padding:2%;
    border-radius:10px;
    font-family:'retro';
    font-size:1.5rem;
}

details:open > summary{
    z-index:9999;
    position:relative;
    filter: drop-shadow(2px 0 0 var(--stroke2)) drop-shadow(0 2px 0 var(--stroke2)) drop-shadow(-2px 0 0 var(--stroke2)) drop-shadow(0 -2px 0 var(--stroke2));
    font-size:3rem;
    font-family:'dico';
    list-style-image: url(images/Ok.png");
    visibility:visible;
    color:white;
}

details:open > #overlay{
    background:rgba(0,0,0,0.8);
    width:140vw;
    height:140vh;
    position:absolute;
    top:-20vh;
    right:-20vw;
    pointer-events: none;
}

details:open{
    display:visible;
    pointer-events:all;
}

#statuscafe {
    font-size:1.3rem;
    padding:5px;
    display:inline-block;
    box-sizing: border-box;
    font-family:'pc9800';
    max-width:100%;
    color:white;
    
    a{
        filter: drop-shadow(2px 0 0 var(--stroke3)) drop-shadow(0 2px 0 var(--stroke3)) drop-shadow(-2px 0 0 var(--stroke3)) drop-shadow(0 -2px 0 var(--stroke3));
        color:hotpink;
        font-family:'telesys';
    }
    
    #up{
        filter:none;
    }
    a:hover{
        color:white;
    }
}

#statuscafe-username {
    display:inline;
    margin-bottom: .5em;
}

#statuscafe-content {
    filter: drop-shadow(1px 0 0 var(--stroke3)) drop-shadow(0 1px 0 var(--stroke3)) drop-shadow(-1px 0 0 var(--stroke3)) drop-shadow(0 -1px 0 var(--stroke3));
    display:inline;
    margin: 0 1em 0.5em 1em;
    animation:strokeMe 3s linear infinite;
}

#left, #right{
    width:40%;
    height:1080px;
    background-size:contain;
    background-repeat:repeat-y;
    position:fixed;
    animation: handsDown 12s linear infinite;
    background-image:url(images/hands1.png);
    top:0;
    filter: 
 drop-shadow(
        1px 2px 4px var(--stroke2));
    z-index:-1;
}

#left{
    left:0;
}

#right{
    right:0;
    transform:scaleX(-1);
}

img{
    max-width:100%;
}

#floatingimg{
    max-height:40%;
    position:absolute;
    bottom:0;
    right:0;
}


#centerpiece{
    width:100%;
}

#trees{
    position:fixed;
    bottom:0;
    left:0;
    z-index:-2;
    height:26%;
    width:100%;
    background:url(images/flowerbg2.png);
    background-size:contain;
    background-repeat:repeat-x;
    animation:backgroundDrift 40s linear infinite;
}

#front{
    margin:0 auto 10vh auto;
    width:90vw;
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    
}

footer{
    border-top:2px solid white;
    padding:0.5rem 0 0.5rem 0;
    width:100%;
    text-align:center;
    background:url(images/abbg2.png);
    background-position:center center;
    font-family:'ft88';
    a{
        color:var(--linkshadow);
        filter: drop-shadow(1px 0 0 var(--blue)) drop-shadow(0 1px 0 var(--blue)) drop-shadow(-1px 0 0 var(--blue)) drop-shadow(0 -1px 0 var(--blue));
    }
}

aside{
    padding-right:1%;
    box-sizing: border-box;
    width:50%;
}

#links{
    flex-wrap: wrap;
    display:flex;
    justify-content: space-between;
    width:50%;
    background-size:contain;
    background-position:bottom center;
    background-repeat:no-repeat;
    a{
        h3{
            filter: drop-shadow(1px 0 0 var(--stroke2)) drop-shadow(0 1px 0 var(--stroke2)) drop-shadow(-1px 0 0 var(--stroke2)) drop-shadow(0 -1px 0 var(--stroke2));
            text-shadow: -1px -1px 0 var(--stroke), 1px -1px 0 var(--stroke), -1px 1px 0 var(--stroke), 1px 1px 0 var(--stroke);
        }
        color:black;
        text-decoration:none;
    }

    #older{
        float:right;
    }
}

.song{
    padding-left:4px;
}

#whatsnew{
    height:2rem;
    filter: drop-shadow(1px 0 0 var(--stroke2)) drop-shadow(0 1px 0 var(--stroke2)) drop-shadow(-1px 0 0 var(--stroke2)) drop-shadow(0 -1px 0 var(--stroke2));
}

#first, #second, #fourth{
    width:27%;
}

.onehundred{
    width:100%;
}

#contain{
    padding-top:20%;
    background-position:top center;
    background-image:url(images/fly.gif);
    background-size:contain;
    background-repeat:no-repeat;
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
}

#preamble{
    margin:2vh auto;
    box-sizing: border-box;
    padding:1%;
    width:50%;   
    background:url(images/papercrumpled.gif);
    border-radius:10px;
    border:3px dashed var(--warning);
}

#quicknav{
    text-align:center;
    width:100%;
    font-family:'illusion';
}

#first{
    
    .button{ 
        margin-left:auto;
    }

    #about{
        background:url(images/reicon.jpg);
        background-position: bottom center;
        background-size: cover;
        position:relative;
    }

    #about::before{
        content:url(images/13mo3.gif');
        position:absolute;
        right:90%;
        top:-5%;
    }

    #gallery{
        width:100%;
        background:url(images/butterfly\ knight.png);
        background-position: center center;
        background-size: 130%;
    }

    #writing{
        width:85%;
        background:url(images/blog.png);
        background-position: center center;
        background-size: cover;
    }

    .button:nth-child(4){
        text-align:center;
        background:none;
        width:70%;
        color:white;
        h3{
            font-family:'web437';
            letter-spacing: 0.5rem;
        }
        p{
            font-family:ms pgothic;
            font-size:12px;
        }
        a{
            color:yellow;
        }
        a:hover{
            color:blue;
        }
    }

    .button:nth-child(4):hover{
        filter:none;
    }
}

#second{
    .button{
        
        width:100%;
    }
    #community{
        background:url(images/buncircle.png);
        background-size:cover;
    }
    #projects{
        background:url(images/knave5.gif);
        background-size:cover;
        background-position:center center;
    }
    #garden{
        background:url(images/lowers3.gif), url(images/grassypixel.png);
        background-size:cover;
    }
    #sitemap{
        background:url(images/etscape.gif), url(images/map.png);
        background-position:right, center center;
        background-size:auto, cover;
        background-repeat:no-repeat;
    }
    p{
        font-family:ms pgothic;
        background:white;
        display:inline-block;
    }
}

#third {
    width:15%;
    padding-top:10%;
    .updates{
        filter: drop-shadow(1px 0 0 var(--stroke2)) drop-shadow(0 1px 0 var(--stroke2)) drop-shadow(-1px 0 0 var(--stroke2)) drop-shadow(0 -1px 0 var(--stroke2));
        margin-top:1%;
        border-image: url(images/bluecloud.png) 8 fill round;
        border-width:8px;
        border-style:solid;
        border-image-outset: 6px; 
        box-sizing: border-box;
        position:relative;
        background-color:#f0f9fd;
        font-family:tahoma;
        font-size:10px;
    }
    .updates::after{
        content: url(images/bluecloud.png');
        position:absolute;
        bottom:-100%;
        color:#f0f9fd;
        left:20%;
    }
    #linkme{
        width:100%;
        text-align:center;
        background:none;
    }
    #crouton{
        width:100%;
        text-align:center;
        background:none;
    }
}

#shrines{
    background:none;
     
}

#shrines:hover{
    filter:invert(1);
}

#mary{
    display:hidden;
    background:url(images/bg4.png);
    background-position:center center;
    text-shadow: -1px -1px 0 var(--warning), 1px -1px 0 var(--warning), -1px 1px 0 var(--warning), 1px 1px 0 var(--warning);
}     

#fourth {
    #services{
        height:10%;
        width:50%;
        background:url(images/moneys.png);
        h3{
            font-size:1.2rem;
        }
    }
    #linkpile{
        background:url(images/house.jpg);
        width:100%;
        background-size:cover;
    }
    #resources{
        background:url(images/library.jpg);
        h3{
            font-size:1.3rem;
        }
    }
    #sketchbook{
        h3{
            font-size:1rem;
        }
        width:50%;
        background:url(images/scribble.jpg);
        background-size:cover;
    }

}




.button{
    padding:2%;
    box-sizing: border-box;
    width:70%;
    height:13vh;
    margin-top:0.5rem;
    border-radius:10px;
    background:green;
    filter: 
 drop-shadow(
        1px 2px 4px var(--stroke2));
}

.button:hover{
    filter: drop-shadow(2px 0 0 var(--stroke)) drop-shadow(0 2px 0 var(--stroke)) drop-shadow(-2px 0 0 var(--stroke)) drop-shadow(0 -2px 0 var(--stroke));
}

.button h3{
    margin:0;
    font-family:'2credits';
    font-size:2rem;
}

#untrust{
    font-family:'dico';
    color:deeppink;
    filter: drop-shadow(1px 0 0 var(--stroke2)) drop-shadow(0 1px 0 var(--stroke2)) drop-shadow(-1px 0 0 var(--stroke2)) drop-shadow(0 -1px 0 var(--stroke2));
    font-size:2rem;
    -webkit-background-clip: none;
    -webkit-text-fill-color: none;
}

#title{
    filter: drop-shadow(1px 0 0 var(--stroke2)) drop-shadow(0 1px 0 var(--stroke2)) drop-shadow(-1px 0 0 var(--stroke2)) drop-shadow(0 -1px 0 var(--stroke2))
    drop-shadow(8px 10px 10px var(--stroke2));
    color:white;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: url(images/tuukz2.png);
    background-size:40vw;
    animation:backgroundMove 10s linear infinite;
    display:inline-block;
    width:100%;
    text-align:center;
    font-family: 'gothicpixels';
    margin:0 auto;
    font-size:10rem;
    pointer-events: all;
    .test{
        animation: bounceLol 2s ease-in-out infinite;
        display:inline-block;
    }
    .test:first-child{
       animation-delay:0ms; 
    }
    .test:nth-child(2){
        animation-delay: -0.3s;
    }
    .test:nth-child(3){
        animation-delay: -0.6s;
    }
    .test:nth-child(4){
        animation-delay: -0.9s;
    }
    .test:nth-child(5){
        animation-delay: -1.2s;
    }
    .test:nth-child(6){
        animation-delay: -1.5s;
    }
    .test:nth-child(7){
        animation-delay: -1.8s;
    }
    .test:nth-child(8){
        animation-delay: -2.1s;
    }
    .test:nth-child(9){
        animation-delay: -2.4s;
    }
    .test:nth-child(10){
        animation-delay: -2.7s;
    }
    .test:nth-child(11){
        animation-delay: -2.1s;
    }
}

#webrings{
    width:40%;
    #yuri{
        border:2px solid hotpink;
        border-radius:5px;
        background-image:         
                    url(images/akiriamu2.jpg');
                    /* upload your image or use the preuploaded one :- ) */
                    background-size:cover;
                    background-position:center center;
                    display:grid;
                    height:200px;
                    width:100%;
                    color:#fff;
                    font-family:'2credits';
                    font-size:3rem;
    }
    #musicring{
        display:inline-block;
        width:104px;
        a{
            color:black;
            text-decoration-style:dashed;
        }
    }
    #touhou-ring{
        display:inline-block;
    }
}

#neighbors{
    width:10%;
}

#empty{
    width:45%;
    position:relative;
    img{
        position:absolute;
        top:-40%;
        right:0;
    }
}



.cloud{
    padding:1%;
    box-sizing: border-box;
    border-width:8px;
    border-style:solid;
    border-image: url(images/bluecloud.png") 8 fill round;
}

/* ANIMATIONS */

@keyframes backgroundMove {
    0%{
        background-position:center center;
    }
    50%{
        background-position:bottom center;
    }
    100%{
        background-position:center center;
    }
}

@keyframes bounceLol2{
    0%{
        transform:translateY(20%);
    }
    50%{
        transform:translateY(0%);
    }
    100%{
        transform:translateY(20%);
    }
}

@keyframes bounceLol{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(20%);
    }
    100%{
        transform:translateY(0);
    }
}

@keyframes strokeMe {
    0%{
        filter: drop-shadow(2px 0 0 var(--stroke3)) drop-shadow(0 2px 0 var(--stroke3)) drop-shadow(-2px 0 0 var(--stroke3)) drop-shadow(0 -2px 0 var(--stroke3));
    }

    12.5%{
        filter: drop-shadow(2px 0 0 var(--orange)) drop-shadow(0 2px 0 var(--orange)) drop-shadow(-2px 0 0 var(--orange)) drop-shadow(0 -2px 0 var(--orange));
    }

    25%{
        filter: drop-shadow(2px 0 0 var(--yellow)) drop-shadow(0 2px 0 var(--yellow)) drop-shadow(-2px 0 0 var(--yellow)) drop-shadow(0 -2px 0 var(--yellow));
    }

    37.5%{
        filter: drop-shadow(2px 0 0 var(--green)) drop-shadow(0 2px 0 var(--green)) drop-shadow(-2px 0 0 var(--green)) drop-shadow(0 -2px 0 var(--green));
    }

    50%{
        filter: drop-shadow(2px 0 0 var(--blue)) drop-shadow(0 2px 0 var(--blue)) drop-shadow(-2px 0 0 var(--blue)) drop-shadow(0 -2px 0 var(--blue));
    }

    62.5%{
        filter: drop-shadow(2px 0 0 var(--purple)) drop-shadow(0 2px 0 var(--purple)) drop-shadow(-2px 0 0 var(--purple)) drop-shadow(0 -2px 0 var(--purple));
    }

    75%{
        filter: drop-shadow(2px 0 0 var(--violet)) drop-shadow(0 2px 0 var(--violet)) drop-shadow(-2px 0 0 var(--violet)) drop-shadow(0 -2px 0 var(--violet));
    }

    87.5%{
        filter: drop-shadow(2px 0 0 var(--warning)) drop-shadow(0 2px 0 var(--warning)) drop-shadow(-2px 0 0 var(--warning)) drop-shadow(0 -2px 0 var(--warning));
    }

    100%{
        filter: drop-shadow(2px 0 0 var(--stroke3)) drop-shadow(0 2px 0 var(--stroke3)) drop-shadow(-2px 0 0 var(--stroke3)) drop-shadow(0 -2px 0 var(--stroke3));
    }
}

@keyframes handsDown {
    0%{
        background-position:0 0;
    }

    100%{
        background-position:0 1080px;
    }
}

@keyframes backgroundDrift {
    0%{
        background-position: -1920px 0;
    }

    100%{
        background-position: 1920px 0;
    }
}