@import url(https://fonts.googleapis.com/css2?family=Chicle&display=swap);*{box-sizing:border-box}body,html{margin:0;padding:0}.main-container{display:flex;flex-direction:column;justify-content:space-between;height:100vh;padding:1rem;background-image:url(../images/background_game_2.jpeg);background-position:center;background-size:cover;background-repeat:no-repeat}.game-container{width:65%;margin:auto;display:flex;flex-direction:column;justify-content:center}.game-area{height:100%;display:flex;flex-wrap:wrap;justify-content:space-evenly;align-content:center;padding:0 7%;cursor:url(../images/mallet.png) 25 25,auto}.title-section{height:10%;display:flex;justify-content:space-between}.game-progress{width:30%;text-align:right}.progress{height:1.5rem;margin:5px auto;display:flex;flex-wrap:wrap-reverse;justify-content:flex-end;border:1px solid grey;border-radius:5px}#progress-bar{height:100%;background-color:#4480da}#cheese-count{margin-bottom:10px}.level{font-size:1.8rem;font-weight:700;color:#fff;font-family:Chicle,cursive}.status{width:30%}.coin-status{height:50%;display:flex;align-items:center}.coin-status>span{color:#fff;font-size:1.2rem}.button-container{position:absolute;right:20px;bottom:20px;z-index:3}.hole{width:20%;background-color:#9b7653;border-radius:50%;margin:3% 5%;display:flex;align-items:flex-end}.mouse{display:none;overflow:hidden;border-radius:40%;position:relative}.mouse>div{width:95%;height:75%;background-image:url(../images/mouse.png);background-size:100% 100%;background-position:center;background-repeat:no-repeat;position:absolute;bottom:0;left:3%}.mouse>div>div{width:50%;height:80%;position:absolute;bottom:0;left:25%}.move{animation:moving 1s infinite linear;transform:translateY()}@keyframes moving{0%{transform:translateY(0)}25%{transform:translateY(30%)}50%{transform:translateY(60%)}75%{transform:translateY(30%)}100%{transform:translateY(0)}}.bomb{position:relative;background-image:url(../images/bomb.png);background-size:100% 100%;background-position:center;background-repeat:no-repeat;margin:auto;display:none}.bomb>div{width:100%;height:54%;border-radius:50%;position:absolute;bottom:0}.button{cursor:pointer}.cheese{width:30px}.coin,.life{width:30px}.icon-lost{opacity:.4}#muted-btn{width:3rem;opacity:.8}#unmuted-btn{width:3rem;display:none;opacity:.8}.menu-container{width:100%;height:100%;top:0;left:0;position:fixed;z-index:1;background-color:beige}.main-menu{width:100%;height:100%;background-color:beige;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}.main-buttons{width:20%;display:flex;flex-direction:column}.main-buttons>div{margin-bottom:1rem;padding:.5rem;border-radius:5px;color:#fff;background-color:#f1a053;font-family:'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif}.main-buttons{cursor:url(../images/cheese-cursor.png) 15 10,pointer}.main-buttons>div:hover{background-color:#eeb279}.main-menu>img{width:25%}h1{font-family:Chicle,cursive;font-size:4rem;color:#3f3e3e}.modal{background-color:rgba(0,0,0,.4);position:fixed;top:0;left:0;height:100%;width:100%;z-index:2;overflow:auto;display:none}.modal-textbox{background-color:beige;width:40%;border-radius:15px;box-shadow:0 0 0 .8rem #eeae71;border-radius:15px;position:absolute;top:50%;left:50%;transform:translate(-50%,-70%);margin:0 auto;padding:1rem 1.5rem;font-family:'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif;text-align:center}.modal-footer{display:flex;justify-content:space-between;margin-top:1.5rem}h3{margin-top:0;text-align:center}.modal-buttons{padding:.5rem 1rem;background-color:#f1a053;border:none;outline:0;border-radius:.6rem;color:#fff;font-family:Arial;cursor:pointer}.modal-buttons:hover{background-color:#eeae71}#play-modal{text-align:center}#lost-level-modal{text-align:center}#lost-level-modal img{width:3rem}#lost-level-modal .modal-textbox{width:30%}h4{margin-bottom:0}#joke{margin-top:5px}#gameover-modal{background-color:rgba(0,0,0,.6)}#gameover-modal h2{margin-top:10%;font-size:4rem;text-align:center;font-family:Chicle,cursive;color:orange}#mouse-runaway{width:12rem;position:absolute;right:0;top:50%;animation:runaway 3s 1 linear}#mouse-runaway img{width:100%}@keyframes runaway{0%{right:0}25%{right:25%}50%{right:50%}75%{right:75%}100%{right:100%;display:none}}#leaderboard-table{overflow:scroll;height:90%}table{text-align:center;margin:auto;width:100%;margin:10px 0}td,th{padding:.5rem 0}#leaderboard-modal .modal-footer{justify-content:center}#leaderboard-modal .modal-textbox{height:60%;display:flex;flex-direction:column;justify-content:space-between}.leaderboard-container{height:90%;display:flex;flex-direction:column}#no-game-modal .modal-footer{justify-content:center}#no-game-modal .modal-textbox{width:30%}#tutorial-modal .modal-textbox{width:70%;transform:translate(-50%,-50%)}#tutorial-container img{width:100%;border-radius:.8rem}#tutorial-container{position:relative}#tutorial-modal h3{margin-bottom:.6rem}.tooltip{position:absolute;cursor:pointer}.tooltip-text{visibility:hidden;font-size:.8rem;font-weight:lighter;position:absolute;width:10rem;bottom:120%;left:50%;bottom:115%;transform:translateX(-50%);background-color:rgba(0,0,0,.6);border-radius:5px;color:#fff;padding:5px}.tooltip:hover .tooltip-text{visibility:visible}#mouse-tooltip-1{width:6%;height:23%;bottom:8%;left:47%}#mouse-tooltip-2{width:7%;height:14%;top:23%;left:27.5%}#mouse-tooltip-2 .tooltip-text{transform:translateX(-100%)}#bomb-tooltip-1{width:9%;height:20%;bottom:10%;left:65%}#bomb-tooltip-2{width:9%;height:20%;bottom:10%;left:26.5%}#bomb-tooltip-3{width:9%;height:20%;top:15%;left:65%}#progress-tooltip{width:30%;height:4%;top:2%;right:1%}#progress-tooltip .tooltip-text{width:12rem}#cheese-tooltip{width:15%;height:4.5%;top:6%;right:1%}#life-tooltip{width:8%;height:4.5%;top:6%;left:1%}#coin-tooltip{width:5%;height:4%;top:1.5%;left:1%}#mallet{position:absolute;width:10%;height:18%;top:20%;left:32%;z-index:3}#mallet>img{width:100%}#mallet>div{position:absolute;width:60%;height:50%;top:10%}#tutorial-modal .modal-footer{justify-content:center}@media screen and (max-width:800px){.modal-textbox{width:70%}#lost-level-modal .modal-textbox,#no-game-modal .modal-textbox{width:50%}}@media screen and (max-width:550px){html{font-size:10px}.game-container{width:100%}.game-area{padding:5% 0}.hole{margin:4% 5%}.modal-textbox{width:80%}}@media screen and (max-width:400px){.modal-footer{flex-direction:column}.modal-buttons{margin:1rem}.main-buttons{width:40%}}@media screen and (max-height:500px){html{font-size:10px}.main-container{padding:.5rem 1rem}.game-container{width:60%;height:85%;margin-bottom:0}.modal-textbox{margin-top:20px;width:50%}.leaderboard-container{max-height:85%}.main-menu>img{width:20%}.hole{margin:2% 5%}}@media screen and (min-height:1020px){html{font-size:20px}.hole{margin:6% 5%}.main-container{padding:2rem}.progress{height:20%}#muted-btn,#unmuted-btn{width:50px}}