test.css

*{padding:0px;margin:0px}* .page{width:100%;height:100vh;overflow:hidden}* .page .page__video{display:none}* .page .welcome-section{display:none}* .page .game{width:100%;height:100vh;background-image:url("assests/media/Game-background.webp");margin-top:0;padding-top:0;display:flex;flex-direction:column;justify-content:space-evenly}* .page .game__logo{font-family:"Yeseva One",cursive;font-size:18px;padding:10px 10px}* .page .form{height:180px;width:180px;margin:auto;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;border:2px solid #030083;border-radius:20px;font-size:14px;margin-top:30px;font-family:"Brawler",serif;color:#030083;background-color:rgba(50,0,50,.393);padding-left:20px;padding-right:20px}* .page .form__inputs{padding:1px}* .page .form__submit{padding:5px;font-size:12px;background-color:#030083;border-radius:20%;color:#f5f5f5}* .page .game-screen{height:220px;width:220px;margin:auto;margin-top:30px;border:#fff 2px solid;display:grid;grid-template-areas:"box0 box1 box2" "box3 box4 box5" "box6 box7 box8";background-color:#030083;gap:5px;grid-template-rows:1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr;text-align:center}* .page .cell{border:#fff 2px solid;font-size:30px;padding-top:20%;color:#fff}* .page #zero{grid-area:box0}* .page #firstbox{grid-area:box1}* .page #secondbox{grid-area:box2}* .page #thirdbox{grid-area:box3}* .page #fourthbox{grid-area:box4}* .page #fifthbox{grid-area:box5}* .page #sixthbox{grid-area:box6}* .page #sevenbox{grid-area:box7}* .page #eightbox{grid-area:box8}* .page .game__reset-button{height:23px;width:50px;margin:auto;font-size:12px;background-color:#030083;border-radius:30px;color:#f5f5f5;text-align:center}@media screen and (min-width: 375px){.page .form{height:220px;width:220px}.page .form__inputs{padding:8px}.page .form__submit{padding:6px;font-size:13px}.page .game-screen{height:260px;width:250px}.page .game__reset-button{height:33px;width:60px}}@media screen and (min-width: 768px){.page .game__logo{font-size:28px;padding:20px 20px}.page .form{height:300px;width:340px}.page .form__inputs{padding:14px;width:200px}.page .form__submit{padding:15px;font-size:16px;margin-top:7px}.page .game-screen{height:420px;width:420px}.page .cell{border:#fff 2px solid;font-size:80px;padding-top:15%;color:#fff}.page .game__reset-button{height:60px;width:100px;font-size:18px}}@media screen and (min-width: 1024px){.page{width:100%;height:100vh}.page .game{background-size:180vh}.page .form{height:400px;width:440px;font-size:30px}.page .form__inputs{padding:24px;width:300px;font-size:22px;border-radius:20px}.page .game-screen{height:530px;width:550px}.page .cell{font-size:100px}}@media screen and (min-width: 1025px){.page{width:100%}.page .page__video{display:inline;position:relative;margin:0px;min-width:100%;min-height:90vh}.page .welcome-section{display:inline;display:flex;flex-direction:column;justify-content:space-evenly;height:400px;width:400px;font-family:"Brawler",serif;position:absolute;top:0;left:0;z-index:1;margin-left:500px;margin-top:400px}.page .welcome__header{font-size:50px;height:200px;width:800px;margin:auto;text-align:center;color:#fff;margin:auto;padding:0px}.page .welcome__button{background-color:#030083;border:#ffd1ea 2px solid;border-radius:40px;height:60px;line-height:60px;width:200px;margin:auto;text-align:center;margin-left:500px;margin-top:1px;cursor:pointer}.page .welcone-header__CTA{text-decoration:none;font-size:25px;color:#fff}.page .form{height:300px;width:350px;margin-top:1px;font-size:20px}.page .form__inputs{padding:10px;font-size:14px;width:200px}.page .form__submit{padding:10px;font-size:14px}.page .game-screen{height:470px;width:444px}.page .cell{border:#fff 2px solid;font-size:80px;padding-top:5%;color:#fff}.page .game__reset-button{height:60px;width:100px;font-size:18px;margin-top:40px;margin-bottom:20px}}