body{
    background:url('images/laundry.png');
    background-size:cover;
    margin:0;
    font-family: 'pixeltimes';
}

a{
    font-family: 'pixeltimesbold';
    color:black;
    text-decoration: none;
    background:yellow;
}

a:hover{
    color:white;
    background:turquoise;
}

#venus{
    position:absolute;
    bottom:0;
    right:0;
    z-index:9999;
}

.icon{
    background:none;
    
}

.icon img{
    image-rendering: pixelated;
    filter: drop-shadow(5px 6px 4px rgba(0,0,0,0.5));
    box-shadow: 0px 0px 0px 8px rgba(255,255,255);
}

.icon img:hover{
    background:none;
    transform:scale(1.1);
}

main{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width:100vw;
    height:100vh;
}

header{
    color:rgba(255,255,255,0.8);
    font-style: italic;
    font-family:'alagard';
    font-size:3rem;
    width:100%;
    margin-top:-10vh;
    position:relative;
    padding-left:12vw;
    padding-top:15vh;
    box-sizing: border-box;
}

footer{
    width:100%;
}

#second{
    padding-left:0;
    padding-right:12vw;
    text-align:right;
}


.gallery{
    display:inline-block;
    animation: fontChange 2s linear infinite;
    font-size:4rem;
    line-height:1rem;
    height:5vh;
}

.hidden{
    display:hidden;
}

#heaven{
    position:absolute;
    bottom:0;
    left:0;
    z-index:-1;
}

#angel{
    position:absolute;
    left:0;
    top:50%;
    width:40%;
    z-index:-1;
    image-rendering: pixelated;
}

#third{
    padding-right:20vw;
    padding-left:0;
    text-align:right;
}

#point{
    position:absolute;
    max-width:20%;
    right:10%;
    top:50%;
    z-index:-1;
    image-rendering: pixelated;
}

#meat{
    position:absolute;
    right:0;
    top:20%;

}

marquee{
    pointer-events: none;
}

mark{
    text-transform: uppercase;
    background:none;
    color:white;
    font-size:1.5rem;
    width:2%;
    height:100%;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

aside{
    width:30%;
    color:white;
}


section{
    display:flex;
    flex-wrap:wrap;
    width:68%;
    height:100%;
    overflow-y:scroll;
    scrollbar-color: orange lightyellow;
}

section figure{
    text-align:center;
    width:22%;
    background:url('images/paper3.png');
    height:38%;
    padding-top:5%;
    box-sizing: border-box;
    position:relative;
    margin:1%;
}

figure a{
    font-family: 'pixeltimes';
}

section figcaption{
    width:60%;
    margin:0 auto;
}

section figure img{
    max-width:60%;
    max-height:55%;
    position:relative;
}

section figure::after{
    content: url('images/tape1.png');
    position:absolute;
    top:0;
    right:40%;
    width:20%;
    height:20%;
    pointer-events: none;
}

nav{
    margin-top:30%;
    background-image:url('images/papernav.png');
    background-position:center top;
    background-repeat:no-repeat;
    width:100%;
    box-sizing: border-box;
    height:45vh;
    padding-left:18%;
    padding-top:4%;
    color:black;
}

nav p{
    width:80%;
}

nav figure{
    display:inline-block;
    text-align:center;
    
}

.stickers{
    image-rendering: pixelated;
    transform:rotate(9deg);
    position:absolute;
    z-index:9999;
    max-width:5vw;
    top:10%;
    right:15%;
    filter: drop-shadow(2px 2px 0px white) drop-shadow(-2px -2px 0px white) drop-shadow(-2px 2px 0px white) drop-shadow(2px -2px 0px white) drop-shadow(2px -2px 4px black);
}

.stickers:hover{
    transform:rotate(20deg);

}


#knave{
    margin-left:20%;
    width:80%;
    position:relative;
    height:25vh;
    background-image:url('images/papertexture.png');
    border:1px solid black;
}

#knave #switching{
    position:absolute;
    top:10%;
    right:10%;
    max-width:100%;
    image-rendering: pixelated;
    background:url('images/goldframe.png');
    background-size:cover;
    padding:8%;
}

#knave h1{
    margin:0;
    position:absolute;
    bottom:-70%;
    right:15%;
    color:transparent;
    background-image: url('images/dots.png');
    background-repeat: repeat;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes fontChange {
    0%{
        font-family: 'oceanside';
    }
    20%{
        font-family: 'hack';
    }
    40%{
        font-family: '2credits';
    }
    60%{
        font-family: 'p22';
    }
    80%{
        font-family: 'canterbury';
    }
    100%{
        font-family: 'handy00';
    }
}


@font-face {
    font-family: 'p22';
    src: url(fonts/P22\ Morris\ Golden\ Regular.ttf);
}

@font-face {
    font-family: 'canterbury';
    src: url(fonts/Canterbury.ttf);
}

@font-face {
    font-family: 'handy00';
    src: url(fonts/handy00.ttf);
}

@font-face {
    font-family: 'pixeltimesbold';
    src: url('fonts/PixelTimesBold.ttf');
}

@font-face {
    font-family: 'pixeltimes';
    src: url('fonts/PixelTimes.ttf');
}

@font-face {
    font-family: 'oceanside';
    src: url('fonts/oceanside.ttf');
}

@font-face {
    font-family: 'hack';
    src: url(fonts/Hack-Regular.ttf);
}

@font-face {
    font-family: '2credits';
    src: url(fonts/2Credits.ttf);
}

@font-face {
    font-family: 'alagard';
    src: url(fonts/alagard.woff);
}