body {
    background-color: black;
    height:100vw;
    width:100vw;
    overflow-y: scroll;
    overflow-x: hidden;
    background-image: url('backgrounds/IMG_0386.png');
    background-size:cover;
}

::-webkit-scrollbar {
    display: none;
}

#blackhole {
    position:absolute;
    width:50vw;
    height:50vw;
    top:10vw;
    left:25vw;
}

#yellow {
   color:#E5B054;
}

#red {
    color:#EE5156;
}

@font-face {
   font-family: 'chopinscript';
   src: url("ChopinScript.otf");

}

@font-face {
   font-family: 'connectionserif';
   src: url("ConnectionSerif-d20X.otf");

}

.introtext {
    color:#D4A657;
    font-size: 1vw;
    padding-left: 1vw;
    padding-right: 1vw;
    text-align: center;
    font-family: connectionserif;
    
}

h1:hover,
h1:focus {
    filter:brightness(2);
}

p:hover,
p:focus {
    filter:brightness(2);
}

.chopin {
   font-family: chopinscript;
}



h1 {
    font-size: 4vw;
    color:#D4A657;
    text-align: center;
}

h2 {
    font-size: 2vw;
}

#title {
    position:absolute;
    top:-2vw;
    width:40vw;
    left:30vw;
    animation-name: myAnimation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

@keyframes myAnimation {
  from {top:-2vw; filter:brightness(1);}
  to {top:0vw; filter:brightness(1.5);}
}




div {
    overflow-y: scroll;
}

#intr {
    position: absolute;
    top:7vw; 
    width:50vw;
    left:25vw;
    border-width:3px;
    border-style:double;
    border-color:#faebd7;
    background-image:url('backgrounds/IMG_0355.png');
    background-size:cover;
    overflow-y:scroll;
    height:14vw;
}

#revs {
    position: absolute;
    width:50vw;
    left:25vw;
    right:25vw;
    top:22vw;
    border-width: 3px;
    border-style: dashed;
    border-color: antiquewhite;
    height:fit-content;
    display: grid;
    grid-template-columns: 12.5vw 12.5vw 12.5vw 12.5vw;
    grid-template-rows: 20vw 20vw 20vw 20vw 20vw 20vw 20vw 20vw 20vw ;
}

.rev:hover,
.rev:focus {
    filter:brightness(0.6);
}

.rev {
    border-width: 3px;
    border-style:double;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-left:0.5vw;
}

.review {
    font-family: connectionserif;
    font-size:1vw;
}

#cler {
    background-image:url('backgrounds/IMG_0414.png');
    background-size: cover;
    grid-row: 1/2;
    grid-column: 1/2;
    border-color:antiquewhite;
}

#clertxt {
    color:antiquewhite;
}



#youyou {
    background-image:url(backgrounds/IMG_0402.png);
    background-size:cover;
    grid-row: 1/2;
    grid-column: 2/3;
    border-color:#1D1D28;
}

#youyoutxt {
    color:#1D1D28;
}


#tanti {
    background-image:url(backgrounds/IMG_0356.png);
    grid-row: 1/2;
    grid-column: 3/4;
    border-color:#D4A657;
    background-size: cover;
}

#tantitxt {
    color:#D4A657
}

#yunwei {
    background-image:url(backgrounds/IMG_0379.png);
    grid-row: 1/2;
    grid-column: 4/5;
    border-color:antiquewhite;
    background-size:cover;
}

#yunweitxt {
    color:antiquewhite;
}

#finley {
    background-image:url('backgrounds/IMG_0396.png');
    grid-row: 2/3;
    grid-column: 1/2;
    border-color:#D4A657;
    background-size:cover;
}

#finleytxt {
    color:#D4A657;
}

#back {
    top:1vw;
    left:1vw;
    position:absolute;
    width:8vw;
}

#back:hover,
#back:focus {
    filter:brightness(1.5);
    top:0.5vw;
    left:0.5vw;
    width:9vw;
}

#idbuttons {
    position:absolute;
    border-color:antiquewhite;
    border-style:dotted;
    border-width: 3px;
    background-image:url('backgrounds/IMG_0368.png');
    width:11vw;
    height:fit-content;
    right:12.5vw;
    top:12vw;
    
}

.id {
    margin:auto;
    width:11vw;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

.stamp {
    width:8vw;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    position:absolute;
}

#plush {
    top:5vw;
    right:2vw;
}

#dizzy {
    top:1vw;
    right:3vw;
}

#me {
    top:6vw;
    right:10vw;
}

#awkward {
    top:1vw;
    right:9vw;
}

#chickenjockey {
    top:10vw;
    right:4vw;
}

#chaotic {
    top:14vw;
    right:2vw;
}

#loser {
    top:2vw; 
    right:17vw;
}

#butterfly {
    top:5vw;
    right:17vw;
}

#rad {
    top:20vw;
    right:3vw;
}

#cringe {
    top:1vw; 
    right:26vw;
}

#facts {
    position:absolute;
    width:13vw;
    top:12vw;
    left:10.5vw;
    border-style:dotted;
    border-color: antiquewhite;
    border-width:3px;
    height:fit-content;
    background-image: url('backgrounds/IMG_0398.png');
}

#fun {
    margin:0vw;
    font-family:connectionserif;
    color:#1D1D28;
    font-size:1.5vw;
    text-align: center;
    border-style:double;
    border-width:1px;
    border-color:antiquewhite;
}

#smoke {
    top:4.5vw;
    left:25vw;
    position:absolute;
    width:10vw;
}

#pride {
    position: absolute;
    top:5.5vw;
    left:10vw;
    width:10vw;
}

#glitch {
    top:5vw;
    left:15vw;
    position:absolute;
}

#contact {
    position:absolute;
    top:26vw;
    right:2vw;
    width:9vw;
    height: 10vw;
    border-color:#D4A657;
    border-style:double;
    border-width: 3px;
    padding:0vw;
    background-image: url(backgrounds/IMG_0356.png);
}

#intgif {
    position: absolute;
    top: 37vw;
    right:3vw;
    width:19vw;
}

#interests {
    position: absolute;
    top: 40vw;
    right:2vw;
    width:21.5vw;
    height:fit-content;
    background-image: url(backgrounds/IMG_0383.png);
    border-color: #D4A657;
    border-width: 3px;
    border-style: dashed;
    background-size: cover;
}

#finleebutton {
    position:inherit;
    width:5vw;
}

#lick {
    top:7vw;
    left:1vw;
}

#catgreen {
    top:11vw;
    left:2vw;
}

#space {
    top:17vw;
    left: 1vw;
}

#neon {
    top:20vw;
    left:2vw;
}

#ahshit {
    top:24vw;
    left:1vw;
}