@import"https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@500&family=Noto+Sans:wght@400;500;600;700&family=Roboto:wght@700&display=swap";*,:before,:after{box-sizing:border-box}body{height:100vh;margin:0;padding-top:15vh;font-family:Noto Sans,sans-serif;background-image:url(/Background.svg);background-repeat:no-repeat;background-size:cover;background-position:center;overflow:hidden}h1,h2,h3,h4,h5,h6{margin:0}a{text-decoration:none}p{margin:0}ul{list-style-type:none;padding:0;margin:0}button{border:none;cursor:pointer;background-color:transparent;margin:0;padding:0;font-family:Noto Sans,sans-serif}header{display:flex;align-items:center;justify-content:space-between;height:15vh;width:100%;padding:0 2.5rem;background-color:#fef8ee;position:fixed;top:0;z-index:3;gap:5rem}header img{width:15vw}header .navigation-link{font-family:Noto Sans;font-size:1.3rem;color:#000;font-weight:500}header .navigation-link:hover,header :active{color:#f09745}.background-set{background-color:#1c1a1a;position:relative;height:85vh;box-sizing:border-box;margin:0;border:0;width:100vw}.whole-page-layout{display:flex;flex-direction:row;width:100%;height:100%;padding:0 5rem}.contentContainer{position:relative;flex-basis:50%}.contentContainer p{font-family:Noto Sans;font-size:20px;font-weight:400;line-height:28px;letter-spacing:0em;text-align:left;color:#fff;white-space:nowrap}.contentContainer_center{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}#light-background{position:absolute;top:0;left:0;width:100%;opacity:.2}.bubble1{position:absolute;top:-5%;left:10%;width:1rem;height:1rem;background-color:#ffffff4d;border-radius:50%;animation:infinite fall 6s;animation-timing-function:ease-in-out}.bubble2{position:absolute;top:-5%;left:15%;width:1rem;height:1rem;background-color:#ffffff4d;border-radius:50%;animation:infinite fall 8s;animation-timing-function:ease-in-out;animation-delay:2s}.bubble3{position:absolute;top:-5%;left:20%;width:1rem;height:1rem;background-color:#ffffff4d;border-radius:50%;animation:infinite fall 7s;animation-timing-function:ease-in-out;animation-delay:.5s}.bubble4{position:absolute;top:-5%;left:25%;width:1rem;height:1rem;background-color:#ffffff4d;border-radius:50%;animation:infinite fall 6s;animation-timing-function:ease-in-out;animation-delay:.8s}.bubble5{position:absolute;top:-5%;left:30%;width:1rem;height:1rem;background-color:#ffffff4d;border-radius:50%;animation:infinite fall 6s;animation-timing-function:ease-in-out;animation-delay:1s}.bubble6{position:absolute;top:-5%;left:35%;width:1rem;height:1rem;background-color:#ffffff4d;border-radius:50%;animation:infinite fall 8s;animation-timing-function:ease-in-out;animation-delay:.4s}.bubble7{position:absolute;top:-5%;left:35%;width:1rem;height:1rem;background-color:#ffffff4d;border-radius:50%;animation:infinite fall 7s;animation-timing-function:ease-in-out;animation-delay:2.6s}.bubble8{position:absolute;top:-5%;left:40%;width:1rem;height:1rem;background-color:#ffffff4d;border-radius:50%;animation:infinite fall 6s;animation-timing-function:ease-in-out;animation-delay:1.7s}.bubble9{position:absolute;top:-5%;left:50%;width:1rem;height:1rem;background-color:#ffffff4d;border-radius:50%;animation:infinite fall 7s;animation-timing-function:ease-in-out;animation-delay:1.9s}.bubble10{position:absolute;top:-5%;left:55%;width:1rem;height:1rem;background-color:#ffffff4d;border-radius:50%;animation:infinite fall 6s;animation-timing-function:ease-in-out;animation-delay:1.4s}.bubble11{position:absolute;top:-5%;left:65%;width:1rem;height:1rem;background-color:#ffffff4d;border-radius:50%;animation:infinite fall 8s;animation-timing-function:ease-in-out;animation-delay:1.9s}.bubble12{position:absolute;top:-5%;left:70%;width:1rem;height:1rem;background-color:#ffffff4d;border-radius:50%;animation:infinite fall 6s;animation-timing-function:ease-in-out;animation-delay:2.5s}.bubble13{position:absolute;top:-5%;left:75%;width:1rem;height:1rem;background-color:#ffffff4d;border-radius:50%;animation:infinite fall 7s;animation-timing-function:ease-in-out;animation-delay:1s}.bubble14{position:absolute;top:-5%;left:80%;width:1rem;height:1rem;background-color:#ffffff4d;border-radius:50%;animation:infinite fall 8s;animation-timing-function:ease-in-out;animation-delay:2s}@keyframes fall{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(100vh);opacity:1}}.text{font-family:Be Vietnam Pro,sans-serif;font-size:3rem;white-space:nowrap}#white-tips{color:#fff;font-size:50px;font-family:Be Vietnam Pro,sans-serif}#orange-tips{color:#f6ad69;font-family:Be Vietnam Pro,sans-serif}#orange{color:#f6ad69;font-size:50px;font-family:Be Vietnam Pro,sans-serif;margin-top:-20px;font-weight:700}.text-small{margin-top:50px;font-family:Noto Sans;font-size:xx-small}#yellowGuy{width:250px;height:186px;margin-bottom:50px;margin-left:30px;margin-right:30px}p{font-family:Noto Sans;font-size:20px;font-weight:400;line-height:28px;letter-spacing:0em;text-align:left;color:#000;white-space:nowrap}#home-page-tips{margin-top:1.2rem;font-weight:700;white-space:wrap;text-align:center}.buttonContainer{flex-basis:50%;height:90%;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;margin:2rem 0;padding:0 8rem}.Button-Layout{display:flex;overflow:hidden;align-items:center;padding-bottom:0;cursor:pointer;font-family:Noto Sans,sans-serif}#button-icon{display:grid;justify-content:center;align-content:center;width:60px;height:60px;margin-right:10px}.Text-Layout{grid-column:2;display:grid;grid-template-rows:auto auto;text-align:left;place-items:left;gap:.5em}#title{font-weight:bolder}#tips{font-size:11px}.HomeButton{width:21rem;height:6rem;margin-bottom:1rem;display:inline-block;padding:0 25px;font-family:Noto Sans,sans-serif;font-size:15px;cursor:pointer;text-align:center;text-decoration:none;outline:none;color:#1c1a1a;border-radius:12px;border:3px solid #dddada;background-color:#fff;-webkit-box-shadow:2px 4px 1px #dddada;-moz-box-shadow:2px 4px 1px #dddada;box-shadow:2px 4px 1px #dddada}.HomeButton:hover{background-color:#dddada}.HomeButton:active{background-color:#dddada;box-shadow:0 5px #666;transform:translateY(4px)}@media only screen and (min-width: 1920px){.bubble1{animation:infinite fall 17s;animation-delay:3s;animation-timing-function:ease-out}.bubble2{animation:infinite fall 25s;animation-delay:1.5s;animation-timing-function:ease-out}.bubble3{animation:infinite fall 17s;animation-delay:3.5s;animation-timing-function:ease-out}.bubble4{animation:infinite fall 17s;animation-delay:0s;animation-timing-function:ease-out}.bubble5{animation:infinite fall 18s;animation-delay:2.9s;animation-timing-function:ease-out}.bubble6{animation:infinite fall 20s;animation-delay:0s;animation-timing-function:ease-out}.bubble7{animation:infinite fall 25s;animation-delay:3s;animation-timing-function:ease-out}.bubble8{animation:infinite fall 23s;animation-delay:.5s;animation-timing-function:ease-out}.bubble9{animation:infinite fall 17s;animation-delay:4s;animation-timing-function:ease-out}.bubble10{animation:infinite fall 20s;animation-delay:1s;animation-timing-function:ease-out}.bubble11{animation:infinite fall 19s;animation-timing-function:ease-out;animation-delay:6s}.bubble12{animation:infinite fall 20s;animation-timing-function:ease-out;animation-delay:.3s}.bubble13{animation:infinite fall 20s;animation-timing-function:ease-out;animation-delay:4s}.bubble14{animation:infinite fall 20s;animation-timing-function:ease-out;animation-delay:5s}}@media only screen and (max-width: 1920px){.bubble1,.bubble2,.bubble3,.bubble4,.bubble5,.bubble6,.bubble7,.bubble8,.bubble9,.bubble10,.bubble11,.bubble12{width:1.2rem;height:1.2rem}@keyframes fall{0%{transform:translatey(-50px);opacity:0}to{transform:translateY(100vh);opacity:1}}}@media only screen and (max-width: 1366px){.buttonContainer{gap:1rem}.HomeButton{transform:scale(.9)}}@media only screen and (max-width: 1280px){#yellowGuy{width:220px;height:160px}.text #white-tips,.text #orange-tips,.text #orange{font-size:2.7rem}}@media only screen and (max-width: 1200px){.whole-page-layout{padding:0 2rem}}@keyframes character{0%{margin-top:10%}to{margin-top:4%}}@keyframes baseCharacter{0%{transform:scaleX(1)}to{transform:scaleX(.3)}0%{opacity:1}to{opacity:.7}}.loadingContainer{display:flex;justify-content:center;align-items:center;position:relative;height:85vh;z-index:1;overflow:hidden;width:100vw}.loading{margin:2rem auto;background-color:#fff;display:flex;align-items:center;flex-direction:column;border-radius:30px;gap:2rem;width:55vw;padding:2rem}.loading section{display:flex;flex-direction:column;align-items:center}.loading img{width:35%}.loading h1{font-size:35px;font-weight:500;color:#1c1a1a;letter-spacing:-.8px;margin-bottom:1rem}.loading p{color:#000;font-size:20px;font-weight:400;letter-spacing:-.22px}.loading span{font-size:18px;font-weight:400;color:#000}.loading .loader{margin-top:.8rem;width:30vw;padding:6px;border-radius:20px;background:#d8bcfd}.loading .loader .circle{height:25px;width:25px;border-radius:20px;background:#601d86;padding:6px;box-shadow:2px 2px #0000004d;animation:loaderAnimation 5s linear forwards .8s}.loading .loader .circle .shine{height:4px;width:4px;border-radius:50%;background:#fff}.characterContainer{width:25vw;height:15vh;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:30px 0}.characterContainer #character{width:190px;animation-name:character;animation-duration:1s;animation-delay:2s;animation-fill-mode:forwards;animation-direction:alternate-reverse;animation-iteration-count:infinite;animation-timing-function:linear}.characterContainer #baseCharacter{width:190px;height:31px;animation:baseCharacter 2s linear forwards infinite}@keyframes loaderAnimation{0%{width:24px}to{box-shadow:1px 1px #0000004d;width:100%}}@media screen and (min-width: 768px) and (max-width: 991px){.loading h1{font-size:27px;font-weight:500;color:#1c1a1a;letter-spacing:-.8px;margin-bottom:1rem}.loading p{color:#000;font-size:15px;font-weight:400;letter-spacing:-.22px}.loading span{font-size:12px;font-weight:400;color:#000}}@media screen and (min-width: 992px) and (max-width: 1199px){.loading h1{font-size:27px;font-weight:500;color:#1c1a1a;letter-spacing:-.8px;margin-bottom:1rem}.loading p{color:#000;font-size:15px;font-weight:400;letter-spacing:-.22px}.loading span{font-size:15px;font-weight:400;color:#000}}@media (min-width: 1113px){.container{position:fixed;width:100vw;height:100vh;display:flex;background:rgba(28,26,26,.3);top:0;left:0;z-index:4}.background-rectangle{position:fixed;bottom:0;width:100%;height:23%;z-index:-1;display:inline-flex;justify-content:center;font-size:1.538rem}.beater{position:fixed;bottom:0;width:17%;margin-left:14%;height:28%;display:inline-flex;justify-content:center;align-items:center}.ButtonResponse{width:17%;height:26%;background-color:#fff;font-family:Noto Sans,sans-serif;font-weight:600;font-size:.95rem;margin-top:auto;margin-bottom:auto;margin-left:8%;color:#1c1a1a;position:relative;overflow:hidden;border:1px solid #dddada;border-radius:12px;-webkit-box-shadow:0px 4px 1px #dddada;-moz-box-shadow:0px 4px 1px #dddada;box-shadow:0 4px 1px #dddada}.ButtonResponse:hover{background-color:#a262ea1a}.ButtonResponse:active{background-color:#dddada}.tip-try-again{background-color:#fff;font-family:Caveat,cursive;font-family:Noto Sans,sans-serif;font-size:1rem;text-align:left;width:28%;height:36%;margin-left:15%;margin-top:auto;margin-bottom:auto;border-radius:30px 30px 30px 0;display:inline-flex;justify-content:center;align-items:center;padding:2rem 3rem 2rem 2rem}.tip{background-color:#fff;font-family:Caveat,cursive;font-family:Noto Sans,sans-serif;font-size:1.125rem;width:28%;height:36%;margin-left:15%;margin-top:auto;margin-bottom:auto;border-radius:30px 30px 30px 0;display:inline-flex;justify-content:center;align-items:center;padding:1%}.tip span{margin-left:5px;font-weight:700}}@media (min-width: 1080px) and (max-width: 1113px){.container{position:relative;display:flex}.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#80808080;z-index:-2}.background-rectangle{position:fixed;bottom:0;width:100%;height:23%;z-index:-1;display:inline-flex;justify-content:center;font-size:1.538rem}.beater{position:fixed;bottom:0;width:17%;margin-left:14%;height:28%;display:inline-flex;justify-content:center;align-items:center}.tip{background-color:#fff;font-family:Caveat,cursive;font-family:Noto Sans,sans-serif;font-size:1rem;width:28%;height:36%;margin-left:15%;margin-top:auto;margin-bottom:auto;border-radius:30px 30px 30px 0;display:inline-flex;justify-content:center;align-items:center;padding:2%}.tip-try-again{background-color:#fff;font-family:Caveat,cursive;font-family:Noto Sans,sans-serif;font-size:.8rem;width:28%;height:36%;margin-left:15%;margin-top:auto;margin-bottom:auto;border-radius:30px 30px 30px 0;display:inline-flex;justify-content:center;align-items:center;padding:2rem 3rem 2rem 2rem}}@media (min-width: 870px) and (max-width: 1080px){.container{position:relative;display:flex;z-index:4}.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#80808080;z-index:-2}.background-rectangle{position:fixed;bottom:0;width:100%;height:23%;z-index:-1;display:inline-flex;justify-content:center;font-size:1.538rem}.beater{position:fixed;bottom:0;width:17%;margin-left:14%;height:28%;display:inline-flex;justify-content:center;align-items:center}.ButtonResponse{display:inline-flex;justify-content:center;align-items:center;background-color:#fff;font-family:Caveat,cursive;font-family:Noto Sans,sans-serif;font-weight:600;font-size:.95rem;width:17%;height:26%;margin-top:auto;margin-bottom:auto;margin-left:8%;color:#1c1a1a;border-radius:8px;position:relative;overflow:hidden}.ButtonResponse:after{content:"";background-color:#dfd0d0;position:absolute;bottom:0;left:0;height:.25rem;width:100%}.ButtonResponse:hover{background-color:#a262ea1a}.ButtonResponse:active{background-color:#a262ea33}.tip{background-color:#fff;font-family:Caveat,cursive;font-family:Noto Sans,sans-serif;font-size:1rem;width:28%;height:36%;margin-left:15%;margin-top:auto;margin-bottom:auto;border-radius:30px 30px 30px 0;display:inline-flex;justify-content:center;align-items:center;padding:2%}.tip-try-again{background-color:#fff;font-family:Caveat,cursive;font-family:Noto Sans,sans-serif;font-size:.9rem;width:28%;height:36%;margin-left:15%;margin-top:auto;margin-bottom:auto;border-radius:30px 30px 30px 0;display:inline-flex;justify-content:center;align-items:center;padding:2rem 1rem}}@media (max-width: 870px){.container{position:relative;display:flex;z-index:4}.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#80808080;z-index:-2}.background-rectangle{position:fixed;bottom:0;width:100%;height:23%;z-index:-1;display:inline-flex;justify-content:center;font-size:1.538rem}.beater{position:fixed;bottom:0;width:17%;margin-left:14%;height:28%;display:inline-flex;justify-content:center;align-items:center}.ButtonResponse{display:inline-flex;justify-content:center;align-items:center;background-color:#fff;font-family:Caveat,cursive;font-family:Noto Sans,sans-serif;font-weight:600;font-size:.95rem;width:17%;height:26%;margin-top:auto;margin-bottom:auto;margin-left:8%;color:#1c1a1a;border-radius:8px;position:relative;overflow:hidden}.ButtonResponse:after{content:"";background-color:#dfd0d0;position:absolute;bottom:0;left:0;height:.25rem;width:100%}.ButtonResponse:hover{background-color:#a262ea1a}.ButtonResponse:active{background-color:#a262ea33}.tip-try-again{background-color:#fff;font-family:Caveat,cursive;font-family:Noto Sans,sans-serif;font-size:.5rem;width:28%;height:36%;margin-left:15%;margin-top:auto;margin-bottom:auto;border-radius:30px 30px 30px 0;display:inline-flex;justify-content:center;align-items:center;padding:2rem 1rem}.tip{background-color:#fff;font-family:Caveat,cursive;font-family:Noto Sans,sans-serif;font-size:.8rem;width:28%;height:36%;margin-left:15%;margin-top:auto;margin-bottom:auto;border-radius:30px 30px 30px 0;display:inline-flex;justify-content:center;align-items:center;padding:2%}}.dialog{position:absolute;z-index:2;width:100%;height:85vh;background-color:#0000004d;display:flex;align-items:center;justify-content:center}.dialog .dialogContainer{display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:#fff;border-radius:20px;padding:2.3%;gap:2vw;width:45vw}.dialog .dialogContainer .cat{display:flex;justify-content:center}.dialog .dialogContainer .cat img{width:50vw;height:35vh}.dialog .dialogContainer .textDialog{display:flex;flex-direction:column;text-align:center;flex-wrap:wrap;gap:20px;height:30%;font-size:2.5vw;font-weight:400}.dialog .dialogContainer .textDialog #text{font-size:1.5vw}.dialog .dialogContainer .btnDialog{width:100%;display:flex;font-size:1.5vw;font-weight:500;line-height:24px;word-wrap:break-word;justify-content:space-between;gap:10px;margin:auto}.dialog .dialogContainer #btn-red{background-color:#c2370c;box-shadow:0 5px #9a2c12}.dialog .dialogContainer #btn-purple{background-color:#6f219e;box-shadow:0 5px #601d86}.dialog .dialogContainer #btn-orange{box-shadow:0 5px #da6a1c}.dialog .dialogContainer #btn-white{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;width:60%;padding:10px;font-family:Noto Sans,sans-serif;border-radius:10px;text-align:center;font-size:1.5vw;font-weight:500;word-wrap:break-word;cursor:pointer;background-color:#fff;border:1px solid #dddada;box-shadow:0 5px #dddada;color:#000}.overlay-btn{background-color:#e98427;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;width:60%;padding:10px;color:#fff;font-family:Noto Sans,sans-serif;border-radius:10px;text-align:center;font-size:1.5vw;font-weight:500;word-wrap:break-word;cursor:pointer}@media (min-width: 1360px) and (max-width: 1460px) and (min-height: 1024px){.dialogContainer{top:47%}}@media (min-width: 1180px) and (max-width: 1360px) and (min-height: 820px){.dialogContainer{top:48.5%}}@media (min-width: 1024px) and (max-width: 1180px) and (min-height: 768px){.dialogContainer{top:47%}}.toastContainer{z-index:2;display:flex;align-items:center;justify-content:center;flex-direction:row;position:absolute;background-color:#fff;border-radius:32px;padding:2.3%;gap:2vw;width:35vw;top:2.5%;left:35%}.toast{display:flex;width:100%;height:135vh;flex-direction:row;justify-content:space-around;position:absolute;background-color:#0000004d;z-index:2;overflow:hidden}.toast .pause{display:flex;justify-content:center;width:5vw;height:5vw;padding:2%;border-radius:50%;background-color:#e9bb18;border:1px solid #daa718}.toast .start{display:flex;justify-content:center;width:5vw;height:5vw;padding:2%;border-radius:50%;background-color:#75c973;border:1px solid #519750}.toast .textDialog{display:flex;flex-direction:column}.toast .textDialog>:nth-child(1){font-size:28px;font-weight:400;line-height:4vw;word-wrap:break-word}.toast .textDialog>:nth-child(2){font-size:13px;font-weight:400;line-height:2.5vw;word-wrap:break-word}@media (min-width: 1360px) and (max-width: 1460px) and (min-height: 1024px){.toast .toastContainer{top:44%}}@media (min-width: 1180px) and (max-width: 1360px) and (min-height: 820px){.toast .toastContainer{top:44%}}@media (min-width: 1024px) and (max-width: 1180px) and (min-height: 768px){.toast .toastContainer{top:2%}.toast .pause{width:14%;height:45px}.toast .textDialog>:nth-child(1){font-size:25px}.toast .textDialog>:nth-child(2){font-size:10px}}.rules-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#80808080;z-index:99}.rules-container{position:fixed;top:50%;left:50%;z-index:100;transform:translate(-50%,-50%);width:40rem;padding:2rem 3rem;background-color:#fff;border-radius:.5rem;display:flex;flex-direction:column;gap:5px}.rules-container .rules-title{font-size:32px}.rules-title{font-size:30px;margin-bottom:2rem}.rules-section{margin-bottom:1rem}.rules-header{font-size:20px;margin-bottom:.5rem}.rules-paragraph{font-size:16px;color:#1c1a1a;margin-bottom:1rem;white-space:normal}.btn-exit{position:absolute;top:30px;right:30px;background-color:#c2370c;color:#fff;font-family:Noto Sans,sans-serif;font-size:20px;width:2.5rem;height:2.5rem;border-radius:50%;box-shadow:0 5px #9a2c12;cursor:pointer;display:flex;align-items:center;justify-content:center}@keyframes fallen{0%{bottom:100%;transform:scale(1)}to{bottom:5rem;transform:scale(1)}}@keyframes zoomIn{0%{-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);bottom:5rem}to{-moz-transform:scale(3);-o-transform:scale(3);-ms-transform:scale(3);-webkit-transform:scale(3);transform:scale(5.5);bottom:-30rem}}@keyframes backgroundZoom{0%{background-size:100% 100%}to{background-size:225% 225%}}@keyframes cat{0%{opacity:0}to{opacity:1}}@keyframes catMove{0%{transform:rotate(-5deg) scale(1);bottom:-8%}25%{transform:rotate(-5deg) scale(1);bottom:-7%}50%{transform:rotate(10deg) scale(1);bottom:-12%}to{transform:rotate(10deg) scale(1);bottom:-8%}}@keyframes comedown{0%{margin-bottom:150%}to{margin-bottom:-1rem}}button:active{background-color:#e98427;box-shadow:0 1px #da6a1c;transform:translateY(4px)}.QuizScreenContainer{display:flex;font-family:Noto Sans,sans-serif;justify-content:center;align-items:end;position:relative;width:100%;height:85vh;z-index:1;overflow:hidden}.QuizScreenContainer .musicStand{display:flex;position:absolute;align-items:center;justify-content:center;animation-name:fallen,zoomIn;animation-duration:1s,1s;animation-delay:0s,1s;width:12rem;margin:auto;animation-timing-function:ease,ease;animation-fill-mode:forwards,forwards}.QuizScreenContainer .GameScreen{display:flex;padding:2rem;margin-bottom:150%;z-index:2;flex-direction:column;width:60rem;height:40rem;gap:2rem;position:relative;animation-name:comedown;animation-duration:1s;animation-delay:2.5s;animation-fill-mode:forwards;animation-direction:linear}.QuizScreenContainer .GameScreen .gameMain{display:flex;flex-direction:row;flex-basis:89.99%;width:100%;height:100%;margin:0 auto 5vh;padding:2rem;background-color:#fff}.QuizScreenContainer .GameScreen .gameMain .left{width:100%;height:100%;flex-basis:33.33%;display:flex;justify-content:center;position:relative}.QuizScreenContainer .GameScreen .gameMain .left .line{width:1%;height:80%;position:absolute;right:0;background-image:url(../../../assets/SVGs/VirticalLine.svg);background-size:100% 100%}.QuizScreenContainer .GameScreen .gameMain .right{width:100%;flex-basis:66.66%}.QuizScreenContainer .GameScreen .setting{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;gap:1rem;z-index:3}.QuizScreenContainer .GameScreen .setting .btnIcon,.QuizScreenContainer .GameScreen .setting .btnExit{width:3rem;height:3rem}.QuizScreenContainer .GameScreen .setting .btnIcon{background-color:#fff;border-radius:50%;box-shadow:0 3px #a4a4a4}.QuizScreenContainer .GameScreen .setting .icon-questionMark{width:1rem;height:1rem}.QuizScreenContainer .GameScreen .setting .btnSetting{background-color:#e98427;padding:.5rem 2rem;color:#fff;font-family:Noto Sans,sans-serif;width:173px;border-radius:10px;box-shadow:0 5px #da6a1c;font-size:20px;font-weight:500;word-wrap:break-word;cursor:pointer}.QuizScreenContainer .GameScreen .setting .btnPause,.QuizScreenContainer .GameScreen .setting .btnRestart{display:inline-flex;align-items:center;justify-content:center;gap:5%}.QuizScreenContainer .GameScreen .setting .btnPause img,.QuizScreenContainer .GameScreen .setting .btnRestart img{width:2vw;height:4vh;background-size:100%}.QuizScreenContainer .GameScreen .setting .btnExit{display:flex;align-items:center;justify-content:center;background-color:#c2370c;border-radius:50%;box-shadow:0 5px #9a2c12}.QuizScreenContainer .GameScreen .setting .btnExit .icon-x{width:1.5rem;height:1.5rem}.QuizScreenContainer .catConatiner{display:flex;align-items:center;justify-content:center}.QuizScreenContainer .catConatiner #chat_bubble{width:220px;height:40px;position:absolute;left:14%;bottom:21%;background-color:#ff6f00e1;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;display:flex;justify-content:center;align-items:center;opacity:1;transition:opacity 1s ease-in-out;color:#fff}.QuizScreenContainer .catConatiner #chat_bubble #chat_bubble_text{text-align:center}.QuizScreenContainer .catConatiner #chat_bubble .fade-in{opacity:1}.QuizScreenContainer .catConatiner #cat{opacity:0;width:22rem;height:22rem;position:absolute;left:-3%;z-index:0;animation-name:cat,catMove;animation-duration:1s,1.5s;animation-delay:2s,2s;animation-fill-mode:forwards,forwards;animation-direction:normal,alternate-reverse;animation-iteration-count:1,infinite;animation-timing-function:linear,ease-in-out}@media only screen and (min-width: 1537px){.QuizScreenContainer .catConatiner #cat{width:16rem;height:22rem;left:2.5%}}@media only screen and (min-width: 1700px){.GameScreen{position:fixed;bottom:6vh}#chat_bubble{top:50vh}}@media only screen and (min-width: 2000px){#chat_bubble{top:44vh}}@media only screen and (max-width: 1536px){@keyframes zoomIn{0%{-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);bottom:5rem}to{-moz-transform:scale(3);-o-transform:scale(3);-ms-transform:scale(3);-webkit-transform:scale(3);transform:scale(5.5);bottom:-35rem}}@keyframes comedown{0%{margin-bottom:150%}to{margin-bottom:2rem}}.QuizScreenContainer .musicStand{width:13rem}}@media only screen and (max-width: 1366px){@keyframes zoomIn{0%{-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);bottom:3rem}to{-moz-transform:scale(5);-o-transform:scale(5);-ms-transform:scale(5);-webkit-transform:scale(5);transform:scale(5);bottom:-35rem}}@keyframes comedown{0%{margin-bottom:130%}to{margin-bottom:4rem}}.QuizScreenContainer .musicStand{width:13.5rem}.QuizScreenContainer .GameScreen{width:58rem;height:40rem}}@media only screen and (max-width: 1280px){@keyframes zoomIn{0%{-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);bottom:5rem}to{-moz-transform:scale(5);-o-transform:scale(5);-ms-transform:scale(5);-webkit-transform:scale(5);transform:scale(5);bottom:-32rem}}@keyframes comedown{0%{margin-bottom:150%}to{margin-bottom:5rem}}.QuizScreenContainer .musicStand{width:13rem}.QuizScreenContainer .GameScreen{width:55rem;height:40rem}}@media only screen and (max-width: 1024px){.QuizScreenContainer .musicStand{width:12.5rem}.QuizScreenContainer .GameScreen{width:55rem;height:38rem}.QuizScreenContainer .GameScreen .catConatiner #cat{width:18rem;height:15rem}}.bubble1{position:absolute;top:-5%;left:10%;width:1rem;height:1rem;background-color:#ffffffb3;border-radius:50%;animation:infinite fall 15s;animation-delay:1s;animation-timing-function:cubic-bezier(.04,.27,.36,.2)}.bubble2{position:absolute;top:-5%;left:15%;width:1rem;height:1rem;background-color:#ffffffb3;border-radius:50%;animation:infinite fall 13s;animation-delay:10s;animation-timing-function:cubic-bezier(.04,.27,.36,.13)}.bubble3{position:absolute;top:-5%;left:20%;width:1rem;height:1rem;background-color:#ffffffb3;border-radius:50%;animation:infinite fall 16s;animation-delay:2s;animation-timing-function:cubic-bezier(.04,.27,.36,.13)}.bubble4{position:absolute;top:-5%;left:25%;width:1rem;height:1rem;background-color:#ffffffb3;border-radius:50%;animation:infinite fall 15s;animation-delay:1s;animation-timing-function:cubic-bezier(.04,.27,.36,.2)}.bubble5{position:absolute;top:-5%;left:30%;width:1rem;height:1rem;background-color:#ffffffb3;border-radius:50%;animation:infinite fall 17s;animation-delay:6s;animation-timing-function:cubic-bezier(.04,.27,.36,.2)}.bubble6{position:absolute;top:-5%;left:35%;width:1rem;height:1rem;background-color:#ffffffb3;border-radius:50%;animation:infinite fall 15s;animation-timing-function:cubic-bezier(.04,.27,.36,.25);animation-delay:2s}.bubble7{position:absolute;top:-5%;left:40%;width:1rem;height:1rem;background-color:#ffffffb3;border-radius:50%;animation:infinite fall 17s;animation-delay:5s;animation-timing-function:cubic-bezier(.04,.27,.36,.18)}.bubble8{position:absolute;top:-5%;left:45%;width:1rem;height:1rem;background-color:#ffffffb3;border-radius:50%;animation:infinite fall 16s;animation-timing-function:cubic-bezier(.04,.27,.36,.2);animation-delay:3s}.bubble9{position:absolute;top:-5%;left:50%;width:1rem;height:1rem;background-color:#ffffffb3;border-radius:50%;animation:infinite fall 14s;animation-delay:6s;animation-timing-function:cubic-bezier(.04,.27,.36,.14)}.bubble10{position:absolute;top:-5%;left:55%;width:1rem;height:1rem;background-color:#ffffffb3;border-radius:50%;animation:infinite fall 13s;animation-timing-function:cubic-bezier(.04,.27,.36,.22);animation-delay:2.5s}.bubble11{position:absolute;top:-5%;left:60%;width:1rem;height:1rem;background-color:#ffffffb3;border-radius:50%;animation:infinite fall 17s;animation-timing-function:cubic-bezier(.04,.27,.36,.13);animation-delay:7s}.bubble12{position:absolute;top:-5%;left:65%;width:1rem;height:1rem;background-color:#ffffffb3;border-radius:50%;animation:infinite fall 15s;animation-timing-function:cubic-bezier(.04,.27,.36,.19);animation-delay:3s}.bubble13{position:absolute;top:-5%;left:70%;width:1rem;height:1rem;background-color:#ffffffb3;border-radius:50%;animation:infinite fall 13s;animation-timing-function:cubic-bezier(.04,.27,.36,.13);animation-delay:6.5s}.bubble14{position:absolute;top:-5%;left:75%;width:1rem;height:1rem;background-color:#ffffffb3;border-radius:50%;animation:infinite fall 17s;animation-timing-function:cubic-bezier(.04,.27,.36,.18);animation-delay:5s}@keyframes fall{0%{transform:translateY(-50px);opacity:.2}to{transform:translateY(100vh);opacity:1}}@media only screen and (min-width: 1920px){.bubble1{animation:infinite fall 13s;animation-delay:0s;animation-timing-function:cubic-bezier(.04,.27,.4,.3)}.bubble2{animation:infinite fall 14s;animation-delay:7s;animation-timing-function:cubic-bezier(.04,.27,.4,.3)}.bubble3{animation:infinite fall 12s;animation-delay:1s;animation-timing-function:cubic-bezier(.04,.27,.4,.3)}.bubble4{animation:infinite fall 13s;animation-delay:5s;animation-timing-function:cubic-bezier(.04,.27,.4,.3)}.bubble5{animation:infinite fall 20s;animation-delay:6s;animation-timing-function:ease-in-out}.bubble6{animation:infinite fall 17s;animation-delay:2s;animation-timing-function:cubic-bezier(.04,.27,.4,.27)}.bubble7{animation:infinite fall 18s;animation-delay:5s;animation-timing-function:cubic-bezier(.04,.27,.4,.28)}.bubble8{animation:infinite fall 13s;animation-delay:12s;animation-timing-function:cubic-bezier(.04,.27,.43,.17)}.bubble9{animation:infinite fall 19s;animation-delay:6s;animation-timing-function:cubic-bezier(.04,.17,.43,.17)}.bubble10{animation:infinite fall 20s;animation-delay:2.5s;animation-timing-function:cubic-bezier(.04,.27,.43,.17)}.bubble11{animation:infinite fall 15s;animation-timing-function:cubic-bezier(.04,.27,.4,.17);animation-delay:7s}.bubble12{animation:infinite fall 16s;animation-timing-function:cubic-bezier(.04,.27,.4,.17);animation-delay:3s}.bubble13{animation:infinite fall 14s;animation-timing-function:cubic-bezier(.07,.27,.4,.2);animation-delay:6.5s}.bubble14{animation:infinite fall 16s;animation-timing-function:cubic-bezier(.04,.27,.4,.17);animation-delay:5s}}@media only screen and (max-width: 1920px){.bubble1,.bubble2,.bubble3,.bubble4,.bubble5,.bubble6,.bubble7,.bubble8,.bubble9,.bubble10,.bubble11,.bubble12,.bubble13,.bubble14{width:1.2rem;height:1.2rem}}.gameFeatureContainer{display:flex;flex-direction:column;font-size:22px}.gameFeatureContainer .gameLives{display:flex;flex-direction:column;gap:5px;padding-bottom:2rem;background-image:url(../../assets/SVGs/Line.svg);background-repeat:no-repeat;background-position:center bottom}.gameFeatureContainer .gameLives div{display:flex;flex-direction:row;align-items:center}.gameFeatureContainer .gameLives div .gameFeatureName{flex:0 0 6rem}.gameFeatureContainer .gameLives div .gameFeatureValue{display:flex;align-items:center;justify-content:center;flex:0 0 10rem}.gameFeatureContainer .gameLives div #timer,.gameFeatureContainer .gameLives div #score,.gameFeatureContainer .gameLives div #lives{font-size:32px;font-weight:700}.gameFeatureContainer .gameLives div #lives{display:flex}.gameFeatureContainer .gameLives div #lives img{width:2.5vw;height:5vh;margin-right:5px}.gameFeatureContainer .gameSetting{display:flex;flex-direction:column;gap:5px}.gameFeatureContainer .gameSetting div{display:flex;flex-direction:row;align-items:center}.gameFeatureContainer .gameSetting div .gameFeatureName{flex:0 0 6rem}.gameFeatureContainer .gameSetting div .gameFeatureValue{width:4.6rem}.gameFeatureContainer .gameSetting div>:nth-child(2){border:2px solid #817676;border-radius:5px;height:52px;display:flex;justify-content:center;flex-direction:row}.gameFeatureContainer .gameSetting div #music{display:flex;flex-direction:row;justify-content:center;flex:0 0 10rem;font-size:22px}.gameFeatureContainer .gameSetting div #music div{border:2px solid #817676;width:100%;height:35px;color:#817676}.gameFeatureContainer .gameSetting div #music button{text-decoration:none}.gameFeatureContainer .gameSetting div #music span{border:none!important;align-items:center;color:#817676;font-size:20px;line-height:30px;font-weight:600;margin-left:10px}.gameFeatureContainer .gameSetting div .on{background-color:#75c973;color:#fff;border-color:#519750;flex-direction:row-reverse!important}.gameFeatureContainer .gameSetting div #volume{flex:0 0 10rem}.gameFeatureContainer .gameSetting div .slider{-webkit-appearance:none;width:90%;height:8px;border-radius:5px;background:#bfbabb;outline:none;opacity:.7;-webkit-transition:2s;transition:opacity 2s}.gameFeatureContainer .gameSetting div .slider:hover{opacity:1}.gameFeatureContainer .gameSetting div .slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:25px;height:25px;border-radius:50%;background:#f0eeee;cursor:pointer}.gameFeatureContainer .gameSetting div .slider::-moz-range-thumb{width:25px;height:25px;border-radius:50%;background:#f0eeee;cursor:pointer}@media screen and (min-width: 1150px) and (max-width: 1650px){.gameFeatureContainer .gameSetting div #music,.gameFeatureContainer .gameSetting div #volume{width:10vw}}@media screen and (min-width: 850px) and (max-width: 1150px){.gameFeatureContainer .gameSetting div #music,.gameFeatureContainer .gameSetting div #volume{width:14vw}}@media screen and (max-width: 850px){.gameFeatureContainer .gameSetting div #music,.gameFeatureContainer .gameSetting div #volume{width:17vw}}.livesContainer{position:relative}#liveStage2{top:0;left:0;z-index:2;position:absolute;visibility:hidden;animation:2s show infinite;animation-delay:1.125s}#liveStage3{top:0;left:0;z-index:3;position:absolute;visibility:hidden;animation:2s show infinite;animation-delay:1.25s}#liveStage4{top:0;left:0;z-index:4;position:absolute;visibility:hidden;animation:2s show infinite;animation-delay:1.375s}#liveStage5{top:0;left:0;z-index:5;position:absolute;visibility:hidden;animation:2s show infinite;animation-delay:1.5s}@keyframes show{0%{visibility:visible}12.5%{visibility:visible}12.6%{visibility:hidden}to{visibility:hidden}}.quizSection{display:flex;flex-direction:column;justify-content:space-between;margin:auto;gap:5%;background-color:#fff;width:80%;height:90%}.quizSection .quizNumber{display:flex;flex-direction:row;justify-content:space-between;width:5rem;font-weight:400;border-bottom:1px solid black;font-size:22px;gap:.3rem}.quizSection .quizNumber img{width:20%;height:80%}.quizSection .noteQuestionnGraph{width:100%;height:30%}.quizSection .noteQuestionnGraph img{width:100%;height:100%}.quizSection .questionText{text-align:center;font-size:22px}.quizSection .questionText p{text-align:center}.quizSection .questionText #sentence{font-size:2rem}.option-btn{border:1px solid #dddada;box-shadow:0 5px #dddada;font-size:15px;font-weight:500}.option-btn:hover{background-color:#f8ef9b;box-shadow:0 5px #f0d454}.option-btn:active{background-color:#fff;box-shadow:0 1px #dddada;transform:translateY(2px)}.small-btn-wrapper{margin-top:15px;display:grid;grid-template-columns:repeat(7,1fr);grid-column-gap:5px;grid-row-gap:10px}.small-btn-wrapper .small-btn{display:flex;align-items:center;justify-content:center;border-radius:10px;height:45px}.small-btn-wrapper .small-btn img{margin-left:1px;width:5px}.small-btn-wrapper .option-blank{height:55px;background-color:#f8f7f7;border-radius:10px}.xsmall-font{font-size:13px}.small-btn-wrapper-6{grid-template-columns:repeat(6,1fr)}.large-btn-wrapper{display:grid;grid-template-columns:repeat(2,1fr);grid-column-gap:5px;grid-row-gap:10px}.large-btn-wrapper .large-btn{border-radius:12px;height:3rem}@media only screen and (max-width: 1366px){.small-btn-wrapper .small-btn{height:35px}}.selected-note{background-color:#f8ef9b;box-shadow:0 5px #f0d454}.game-finished{height:85vh;display:flex;align-items:center;justify-content:center}.wrapper{display:flex;justify-content:center;align-items:center;position:relative}.centralized{display:flex;flex-direction:column;align-items:center}.centralized .heading{font-family:Noto Sans;font-size:2rem;font-style:normal;font-weight:500;letter-spacing:-.8px;margin:1rem 0}.centralized .message{font-family:Noto Sans;font-size:1.5rem;font-style:normal;font-weight:400;letter-spacing:-.64px}.content{width:62rem;background-color:#fff;opacity:1;border-radius:48px;padding:2rem;z-index:1;gap:20px}.content .cat{width:10rem;height:10rem}.play-again{height:54em}.play-again .quote{text-align:center;font-size:28px;width:60%;gap:12px}.score-dialog p{font-size:40px;gap:12px}.score-dialog p span{font-size:32px}.score-dialog p strong{font-weight:500}.score-dialog .score-section{width:70%;gap:12px}.score-dialog .score-section .score{font-size:40px;font-weight:500}.score-dialog .score-section .score-message{text-align:center;font-size:1.5rem}.button-container{gap:16px}.primary,.secondary{width:30em;height:3.625em;border-radius:12px;font-size:20px}.primary{color:#fff;background-color:#6f219e;border:2px solid #601d86;border-bottom:8px solid #601d86}.secondary{border:2px solid #dddada;border-bottom:8px solid #dddada}@media only screen and (max-width: 1280px){.wrapper .content{width:50rem}.wrapper .content .cat{width:8rem;height:8rem}.wrapper .score-dialog .centralized .heading{font-size:1.5rem}.wrapper .score-dialog .centralized .message{font-size:1.3rem}.wrapper .score-dialog .score-section .score{font-size:1.4rem}.wrapper .score-dialog .score-section .score-message{font-size:1.2rem}}@keyframes falldown{0%{margin:-80rem auto}to{margin:3rem auto}}@keyframes appear{0%{opacity:0}to{opacity:1}}@keyframes comesFromRight{0%{margin-right:-60vw;margin-left:30vw;opacity:0}to{margin-right:0vw;margin-left:0vw;opacity:1}}.welcome-container{display:flex;align-items:center;justify-content:center;width:100%;height:85vh}.welcome-container .welcome{display:flex;flex-direction:column;align-items:center;padding:2rem;width:80%;border-radius:2rem;background-color:#fff;animation-name:falldown;animation-duration:1s;animation-fill-mode:forwards;animation-direction:linear}.welcome-container .welcome p{white-space:wrap}.welcome-container .welcome h1{font-family:Be Vietnam Pro,sans-serif;font-size:2.2rem;font-weight:500;letter-spacing:-1px;opacity:0;color:#1c1a1a;margin-bottom:2rem;animation-name:appear;animation-duration:1s;animation-delay:1s;animation-fill-mode:forwards;animation-direction:linear}.welcome-container .welcome h1 span{color:#e98427}.welcome-container .welcome main{display:flex;flex-direction:row;justify-items:center;justify-content:center;width:100%;gap:.5rem}.welcome-container .welcome main .intro{padding:1rem;padding-bottom:0}.welcome-container .welcome main .intro .bubble{display:flex;flex-direction:column;justify-content:center;width:35rem;margin-left:1rem}.welcome-container .welcome main .intro .bubble .chat{background-color:#f8dcb0;border-radius:2rem;padding:1.5rem 1.75rem;opacity:0;animation-name:appear;animation-duration:1s;animation-delay:3s;animation-fill-mode:forwards;animation-direction:linear;width:100%}.welcome-container .welcome main .intro .bubble .chat p{font-size:1rem;font-style:normal;font-weight:400;color:#1c1a1a;white-space:normal}.welcome-container .welcome main .intro .bubble .chat p+p{margin-top:1rem;font-weight:600}.welcome-container .welcome main .intro .bubble img{width:5vw;margin-top:-1px;margin-left:56%;opacity:0;animation-name:appear;animation-duration:1s;animation-delay:3s;animation-fill-mode:forwards;animation-direction:linear}.welcome-container .welcome main .intro .cat{margin-top:-2rem;margin-left:2rem;width:16rem;height:16rem;opacity:0;animation-name:appear;animation-duration:1s;animation-delay:2s;animation-fill-mode:forwards;animation-direction:linear}.welcome-container .welcome main .levels{display:flex;margin-right:-60vw;margin-left:30vw;flex-direction:column;align-items:center;justify-content:space-between;width:50%;opacity:0;animation-name:comesFromRight;animation-duration:1.5s;animation-delay:4s;animation-fill-mode:forwards;animation-direction:linear}.welcome-container .welcome main .levels button{display:flex;justify-content:space-between;align-items:center;width:90%;padding:0 2.25rem;height:30%;border-radius:1rem}.welcome-container .welcome main .levels button p{font-size:2rem;font-style:normal;font-weight:700;line-height:2rem;color:#564e4e}.welcome-container .welcome main .levels button img{width:15%}.welcome-container .welcome main .levels .easy{background-color:#e5f3e5;border:2px solid #a5d1a4;border-bottom:8px solid #a5d1a4}.welcome-container .welcome main .levels .easy:hover{background-color:#c3f8c3}.welcome-container .welcome main .levels .medium{background-color:#faf5c7;border:2px solid #f0d454;border-bottom:8px solid #f0d454}.welcome-container .welcome main .levels .medium:hover{background-color:#f8ef9b}.welcome-container .welcome main .levels .hard{background-color:#f0eeee;border:2px solid #bfbabb;border-bottom:8px solid #bfbabb}.welcome-container .welcome main .levels .hard:hover{background-color:#dfdede}@media only screen and (max-width: 1536px){.welcome-container .welcome{width:70%}.welcome-container .welcome h1{font-size:2rem}.welcome-container .welcome main .intro .bubble{margin-left:0;width:25rem}.welcome-container .welcome main .intro .cat{margin-top:-2rem;margin-left:1rem;width:12rem;height:12rem}.welcome-container .welcome main .levels button{padding:0 2rem;height:30%}.welcome-container .welcome main .levels button p{font-size:2rem}}@media only screen and (max-width: 1366px){.welcome-container .welcome h1{font-size:2rem}.welcome-container .welcome main .intro .bubble{margin-left:0;width:25rem}.welcome-container .welcome main .intro .cat{margin-top:-2rem;margin-left:1rem;width:10rem;height:10rem}}@media only screen and (max-width: 1024px){.welcome-container .welcome{width:80%;padding:2rem 1rem}.welcome-container .welcome main .intro .bubble{width:25rem}.welcome-container .welcome main .levels button{height:30%}}