*{margin:0}body{height:100vh;background:#db3f3d;font-family:Poppins,serif;overflow:hidden}.container{width:640px;margin:25px auto auto;background:#fff;color:#262626;display:flex;flex-direction:column;gap:20px;border-radius:10px;padding:40px 50px;box-shadow:#00000059 0 5px 15px}.container hr{height:2px;border:none;background:#707070}.container h2{font-size:27px;font-weight:500}.container ul li{display:flex;align-items:center;height:70px;padding-left:15px;border:1px solid #686868;border-radius:8px;margin-bottom:20px;font-size:20px;cursor:pointer;box-shadow:#00000059 0 5px 15px}.container button{margin:auto;width:250px;height:65px;background:#db3f3d;color:#fff;font-size:25px;font-weight:500;border-radius:8px;cursor:pointer;box-shadow:#00000059 0 5px 15px}.container .index{margin:auto;font-size:18px}.container .correct{background:#dffff2;border-color:#00d397}.container .wrong{background:#ffebeb;border-color:#ff4a4a}@media all and (min-width: 768px) and (max-width: 1024px){.container{width:55vh;height:84vh}.container .index{margin:auto;font-size:24px}}@media all and (min-width: 480px) and (max-width: 768px){.container{width:45vh;height:84vh}}@media all and (min-width: 380px) and (max-width: 480px){.container{width:29vh;height:72vh}h1{font-size:22px}.container ul li{display:flex;align-items:center;height:70px;width:190px;font-size:14px}.container h2{font-size:12px;font-weight:500}.container button{width:150px;height:65px;font-size:18px;margin-top:5px}.container .index{font-size:18px;margin-top:-5px}}@media all and (max-width: 380px){.container{width:29vh;height:72vh;margin:45px auto auto}.container ul li{display:flex;align-items:center;height:50px;width:130px;font-size:20px}h1{font-size:17px}.container h2{font-size:12px}.container button{width:150px;height:65px;font-size:22px;font-weight:500}}
