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

#happydiv{position: fixed; left: 20vh; top: 18vh; width: 55vh; height: 12vh; background-color: rgb(65, 65, 65); border-radius: 1.5vh;}

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

#okbox{position: fixed; left: 20vh; top: 40vh; width: 55vh; height: 53vh; background-color: rgb(65, 65, 65); border-radius: 1.5vh;}

#ok{position: absolute; left: 5%; top: 1%; margin-right: 2vh; color: white; font-size: 4vh;}

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

#happydiv{position: fixed; left: 3vh; top: 14vh; width: 45vh; height: 12vh; background-color: rgb(65, 65, 65); border-radius: 1.5vh;}

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

#okbox{position: fixed; left: 3vh; top: 33vh; width: 45vh; height: 53vh; background-color: rgb(65, 65, 65); border-radius: 1.5vh;}

#ok{position: absolute; left: 5%; top: 1%; margin-right: 2vh; color: white; font-size: 3.3vh;}
}