html{overflow-x: hidden;}

body{background-image: url(background.png); background-size: cover; background-position: center; background-repeat: no-repeat; height: 100vh; margin: 0;}

@font-face {font-family: 'tangerine'; src: url('./tangerine.woff2') format('woff2');}

@font-face {font-family: 'yrsa'; src: url('./yrsa.woff2') format('woff2');}

header{position: absolute; top: 0%; left: 0%; width: 100%; height: 10%; background-color: #20B1AA; border-bottom: 2px solid black;}

#phone{display: none;}

#chocolanya{display: none;}

#thanks{display: none;}

#computercat{display: none;}



#name{position: absolute; left: 12%; top: -5%; font-size: 2.5vw; font-family: "tangerine"; transform: translateX(-50%);}

#thebar{position: absolute; left: 51%; top: 19%; width: 40%; height: 60%; transform: translateX(-50%); display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; box-sizing: border-box;}

#home{position: absolute; left: 5%; top: 40%; text-decoration: none; font-size: 22px; color: beige; transition: color 0.2s;}

#home:hover{color: blue;}

#products{position: absolute; left: 35%; top: 40%; text-decoration: none; font-size: 22px; color: black; transition: color 0.2s;}

#products:hover{color: blue;}

#news{position: absolute; left: 75%; top: 40%; text-decoration: none; font-size: 22px; color: black; transition: color 0.2s; padding-left: 35px;}

#news:hover{color: blue;}

#adopt{position: absolute; left: 2%; top: 25%; height: 73%; width: 21%; box-sizing: border-box;}

#chocola{position: absolute; left: -12%; top: -7%; height: 110%; width: auto;}

#cgirl{position: absolute; left: 30%; top: 32%; height: 75%; width: auto;}

#homey{position: sticky; left: 25%; top: 25%; height: 73%; width: 50%; box-sizing: border-box;}

#koni{position: absolute; left: 25%; top: 0%; font-size: 2.1vw; font-family: "yrsa"; font-weight: 400;}

#nya{position: absolute; left: 13%; top: 20%; height: 55%; width: auto; object-fit: contain; padding-right: 100px;}

#pnya{position: absolute; left: 5.5%; top: 74%; font-size: 2.3vh; font-family: "yrsa";}

#scroll{position: absolute; left: 32%; top: 88%; font-size: 2.3vh; font-family: "yrsa";}

#vinnews{position: absolute; left: 76%; top: 25%; height: 73%; width: 21%; box-sizing: border-box;}

#vanilla{position: absolute; left: -22%; top: -2%; height: 75%; width: auto;}

#news2{position: absolute; left: -10%; top: 59.2%; height: 46%; width: auto;}

footer{position: absolute; left: 0%; bottom: -17%; height: 17vh; width: 100%; background-color: rgb(87, 87, 87); border-top: 1px solid black; z-index: 1;}

#balls{position: absolute; left: 0%; top: 0%; height: 100%; width: auto;}

#free{position: absolute; left: 37%; top: 0.5%; font-size: 2vh; font-family: "yrsa"; color: beige;}

#anus{position: absolute; left: 49.2%; top: 25%; height: 75%; width: auto;}

#idk{position: absolute; left: 30%; top: 75%; font-size: 1.6vh; font-family: "yrsa"; color: burlywood; transition: color 0.2s;}

#idk:hover{color: beige;}

#nekogif{position: absolute; left: 57.7%; top: -47%; height: 95%; width: auto;}

#chocolagif{position: absolute; left: 57.7%; top: 0%; height: 100%; width: auto;}

#codingchocola{position: absolute; left: 73%; top: 0%; height: 100%; width: auto;}


@media (max-width: 900px){
body{background-image: url(background.png); background-size: cover; background-position: center; background-repeat: no-repeat; height: 100vh; margin: 0;}

html, body{overflow: hidden; height: 100%;}
/*
Note, this breaks the ability to swipe reload, how sad, so make sure to delete it when not in use!
*/

@font-face {font-family: 'tangerine'; src: url('./tangerine.woff2') format('woff2');}

@font-face {font-family: 'yrsa'; src: url('./yrsa.woff2') format('woff2');}

header{position: absolute; top: 0%; left: 0%; width: 100%; height: 13%; background-color: #20B1AA; border-bottom: 2px solid black;}

#name{position: absolute; left: 49.5%; top: -13%; font-size: 9.6vw; font-family: "tangerine"; white-space: nowrap;}

#thebar{position: absolute; left: 50%; top: 49%; width: 90%; height: 45%; transform: translateX(-50%);
display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; box-sizing: border-box;}

#home{position: absolute; left: 1%; top: 38%; text-decoration: none; font-size: 2.2vh; color: beige;}

#home:hover{color: none;}

#products{position: absolute; left: 22%; top: 38%; text-decoration: none; font-size: 2.2vh; color: black;}

#products:hover{color: none;}

#news{position: absolute; left: 57%; top: 41%; text-decoration: none; font-size: 2vh; color: black;}

#news:hover{color: none;}

#phone{display: block; position: absolute; left: 3%; top: 14%; font-size: 3.3vh; font-family: "yrsa"; font-weight: 500;}

#thanks{display: block; position: absolute; left: 35%; top: 62%; font-size: 2.5vh; font-family: "yrsa"; font-weight: 500;}

#chocolanya{display: block; position: absolute; left: 0%; top: 71.8%; width: 100%; height: auto;}

#computercat{display: block; position: absolute; left: 35%; top: 43.5%; width: 48%; height: auto;}



#adopt{display: none;}

#chocola{display: none;}

#cgirl{display: none;}

#homey{display: none;}

#koni{display: none;}

#nya{display: none;}

#pnya{display: none;}

#scroll{display: none;}

#vinnews{display: none;}

#vanilla{display: none;}

#news2{display: none;}

footer{display: none;}

#balls{display: none;}

#free{display: none;}

#anus{display: none;}

#idk{display: none;}

#idk:hover{color: beige;}

#nekogif{display: none;}

#chocolagif{display: none;}

#codingchocola{display: none;}
}