@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kiwi+Maru&family=Momo+Trust+Display&display=swap";:root{--bg-color:#1b1a60;--text-color:white;--header-color:#242222}*{font-family:Momo Trust Display,sans-serif}body{margin:0;padding:0}#root{background-color:var(--bg-color)}*{margin:0;padding:0}.main-container{background-color:var(--bg-color);flex-direction:column;justify-content:center;align-items:center;gap:50px;height:100vh;display:flex}.main-container>h1{color:var(--text-color);margin:0;padding:0;font-size:118px;font-weight:700}button{cursor:pointer}.btn.start{color:var(--bg-color);cursor:pointer;border:none;border-radius:25px;padding:25px 50px;font-size:26px;font-weight:700}.btn.start:hover{box-shadow:0 0 5px 5px #ffffff94}.quiz-container{width:auto;height:100vh;color:var(--text-color);flex-direction:column;gap:40px;display:flex}.quiz-content{flex-direction:column;align-items:center;width:100%;height:100%;display:flex;overflow-y:auto}.header{background-color:var(--header-color);box-sizing:border-box;border-bottom-right-radius:25px;align-items:center;padding:10px 20px 10px 10px;transition:all .5s ease-in;display:flex;position:relative}.header>h1,.header>p{flex:1;margin:0;padding:0}.timer-text{font-size:30px;position:absolute;left:45%}.timer-bar{background-color:#3f3d9f;width:100%;height:10px}.bar{background-color:#fff;width:0%;max-width:100%;height:100%;transition:all 1s linear}.setup-container{text-align:center;flex-direction:column;align-items:center;gap:20px;display:flex}.setup-container>p{font-size:24px;font-weight:700}.btn-row{justify-content:center;width:100%;display:flex}.btn-row>button{background-color:var(--bg-color);color:#fff;border:1px solid #fff;flex:1;padding:10px;font-size:18px}.btn-row>button:active{transform:scale(.9)}.time-container{flex-direction:column;width:200px;height:200px;display:flex}.display-time{height:100%;color:var(--bg-color);background-color:#fff;border-top-left-radius:100px;border-top-right-radius:100px;justify-content:center;align-items:center;font-size:25px;display:flex}.setup-container>div:nth-child(3){gap:5px;display:flex}.setup-container>div:nth-child(3)>button{color:var(--bg-color);background-color:#fff;border:none;border-radius:14px;margin-top:20px;padding:10px 30px;font-size:16px;font-weight:700}.quiz-items{flex-direction:column;align-items:center;gap:30px;width:100%;height:100%;display:flex}.quiz-card{flex-direction:column;justify-content:center;align-items:center;gap:20px;width:500px;display:flex}.question{box-sizing:border-box;width:100%;height:200px;color:var(--bg-color);text-align:center;background-color:#fff;border-radius:20px;flex-shrink:1;justify-content:center;align-items:center;padding:20px;font-size:20px;display:flex}.choices{grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:10px;width:100%;display:grid}.choice{text-align:start;color:#fff;border:none;border-radius:5px;padding:25px;font-size:18px;font-weight:700}.choice:first-child{background-color:#2b94f6}.choice:first-child:hover{box-shadow:0 0 5px 5px #2b94f6a4}.choice:nth-child(2){background-color:#16944b}.choice:nth-child(2):hover{box-shadow:0 0 5px 5px #16944a9a}.choice:nth-child(3){background-color:#ed5353}.choice:nth-child(3):hover{box-shadow:0 0 5px 5px #ed535391}.choice:nth-child(4){background-color:#92a310}.choice:nth-child(4):hover{box-shadow:0 0 5px 5px #92a31083}.progress-bar-container{background-color:#fff;border-radius:25px;width:500px;height:10px}.progress-bar{background-color:#16944b;width:10%;max-width:100%;height:100%}.quiz-items>div:first-child{flex-direction:column;gap:10px;display:flex}.quiz-items>div:first-child>p{text-align:end;margin:0;padding:0}.btn-next{color:var(--bg-color);background-color:#fff;border:none;border-radius:10px;align-self:flex-end;align-items:center;gap:10px;padding:10px 20px;font-size:16px;font-weight:700;display:flex}.result-container{flex-direction:column;align-items:center;gap:50px;width:40%;padding:40px;display:flex}.result{flex-direction:column;align-items:center;display:flex}.result>h1{margin:0;padding:0}.result-btn-container{border:1px solid #fff;border-radius:10px;justify-content:space-evenly;gap:20px;width:fit-content;display:flex;overflow:hidden}.result-btn-container>button{color:#fff;box-sizing:border-box;background-color:#0000;border:none;width:100%;height:100%;padding:20px 30px;font-size:16px}.result-btn-container>button:hover{color:var(--bg-color);background-color:#fff}.modal-overlay{background-color:#000000a9;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0}.modal-content{flex-direction:column;width:60%;height:500px;padding:30px;display:flex}.modal-content>div:first-child{color:#fff;background-color:#2e2c50;justify-content:space-between;padding:20px 30px;display:flex}.result-grid{background-color:#fff;grid-template-columns:3fr 2fr 2fr 1fr;grid-auto-rows:auto;gap:10px;padding:10px;display:grid;overflow-x:hidden}.result-grid>div{color:var(--bg-color);box-sizing:border-box;background-color:#dcdcdc;flex-direction:column;justify-content:start;padding:20px;font-size:16px;display:flex;overflow:hidden}.result-grid .label-grid{text-align:center;background-color:#0000;align-items:center;height:fit-content;font-size:14px}.results-data{height:100%;padding:20px;overflow:hidden}.questionResult:hover{height:130px}.questionResult.results-data{text-align:start!important}.show-letter{text-align:center;display:none}@media (width<=550px){.show-full{display:none}.show-letter{justify-content:center;display:flex}.modal-content{width:100%;font-size:10px!important}.quiz-card,.progress-bar-container{width:400px}}@media (width<=450px){.show-full{display:none}.show-letter{justify-content:center;display:flex}.modal-content{width:100%;font-size:10px!important}.header>h1,.timer-text{font-size:20px}.choices{grid-template-columns:1fr}.quiz-card,.progress-bar-container{width:300px}}@media (width<=340px){.modal-content *{font-size:10px}.show-full{display:none}.show-letter{justify-content:center;display:flex}.header>h1,.timer-text{font-size:20px}.quiz-card,.progress-bar-container{width:250px}}