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

#computercatya{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: black; transition: color 0.2s;}

#home:hover{color: blue;}

#products{position: absolute; left: 35%; top: 40%; text-decoration: none; font-size: 22px; color: beige; 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;}

#construction{position: absolute; left: 21.5%; top: 17%; font-size: 5vh; font-family: "yrsa"; font-weight: 500;}

#exp{position: absolute; left: 21.5%; top: 30%; font-size: 2.5vh; font-family: "yrsa"; font-weight: 300;}

#live{position: absolute; left: 7%; top: 66.5%; font-size: 2.5vh; font-family: "yrsa"; font-weight: 300;}

#computercat{position: absolute; left: 7%; top: 71.9%; height: 28%; width: auto;}

#catcat{position: absolute; left: 61.6%; top: 15%; height: 85%; width: auto;}

#yes{position: absolute; left: 30.8%; top: 94%; font-size: 2.3vh; font-family: "yrsa"; font-weight: 400;}

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

@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: black;}

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

#products:hover{color: none;}
    
#news{position: absolute; left: 57%; top: 38%; 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;}

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

#construction{display: none;}

#exp{display: none;}

#live{display: none;}

#computercat{display: none;}

#catcat{display: none;}

#yes{display: none;}

footer{display: none;}

#balls{display: none;}

#free{display: none;}

#anus{display: none;}

#idk{display: none;}

#idk:hover{display: none;}

#nekogif{display: none;}

#chocolagif{display: none;}

#codingchocola{display: none;}
}