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

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

#happybox{position: fixed; left: 8vh; top: 15vh; width: 65vh; height: 13vh; background-color: rgb(65, 65, 65); border-radius: 1vh;}

#happy{position: absolute; left: 6%; top: -18%; font-size: 7.5vh; font-family: "Dad"; color: white;}

#boxone{position: fixed; left: 8vh; top: 34vh; width: 59vh; height: 50vh; background-color: rgb(65, 65, 65); border-radius: 1vh;}

#exp{position: absolute; left: 5%; top: -2%; font-size: 4vh; font-family: "Dad"; color: white; margin-right: 4%;}

#cocoabox{position: fixed; left: 84vh; top: 25vh; height: 7vh; width: 30vh; background-color: rgb(65, 65, 65); border-radius: 1vh;}

#here{position: absolute; left: 10%; top: -30%; font-size: 4.5vh; font-family: "Dad"; color: white;}

#cocoa{position: fixed; left: 74vh; top: 34vh; height: 50vh; width: auto;}

#boxtwo{position: fixed; right: -14vh; top: 11vh; width: 50vh; height: 45vh; background-color: rgb(65, 65, 65); border-radius: 1vh; margin-right: 10%;}

#public{position: absolute; left: 5%; top: -2%; font-size: 3.7vh; font-family: "Dad"; color: white; margin-right: 4%;}

#anybox{position: fixed; left: 120vh; top: 65vh; width: 50vh; height: 29vh; background-color: rgb(65, 65, 65); border-radius: 1vh;}

#anyway{position: absolute; left: 5%; top: -2%; font-size: 5vh; font-family: "Dad"; color: white; margin-right: 4%;}

@media (max-width: 600px){
body{background-image: url(matrix.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; height: 190vh; margin: 0;}

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

#happybox{position: absolute; left: 5.6vh; top: 5vh; width: 40vh; height: 13vh; background-color: rgb(65, 65, 65); border-radius: 1vh;}

#happy{position: absolute; left: 6%; top: 7%; font-size: 4.6vh; font-family: "Dad"; color: white;}

#boxone{position: absolute; left: 5.6vh; top: 24vh; width: 40vh; height: 32vh; background-color: rgb(65, 65, 65); border-radius: 1vh;}

#exp{position: absolute; left: 5%; top: 1%; font-size: 2.58vh; font-family: "Dad"; color: white; margin-right: 4%;}

#cocoabox{position: absolute; left: 16vh; top: 60vh; height: 7vh; width: 30vh; background-color: rgb(65, 65, 65); border-radius: 1vh;}

#here{position: absolute; left: 10%; top: -30%; font-size: 4.5vh; font-family: "Dad"; color: white;}

#cocoa{position: absolute; left: 9vh; top: 70vh; height: 45vh; width: auto;}

#boxtwo{position: absolute; right: 0.2vh; top: 121vh; width: 40vh; height: 32vh; background-color: rgb(65, 65, 65); border-radius: 1vh; margin-right: 10%;}

#public{position: absolute; left: 5%; top: -2%; font-size: 2.8vh; font-family: "Dad"; color: white; margin-right: 4%;}

#anybox{position: absolute; left: 5.6vh; top: 160vh; width: 40vh; height: 25vh; background-color: rgb(65, 65, 65); border-radius: 1vh;}

#anyway{position: absolute; left: 5%; top: 2%; font-size: 3.9vh; font-family: "Dad"; color: white; margin-right: 4%;}
}