@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap);*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}body{padding:0 10px;align-items:center;justify-content:center;min-height:100vh;background:#e0e0e0}.wrapper{margin-top:80px;width:90%;margin:68px auto;padding:22px;background:#fff;border-radius:10px;box-shadow:0 10px 15px rgb(0 0 0 / .05)}.wrapper .input-field{opacity:0;z-index:-999;position:absolute}.wrapper .content-box{padding:13px 20px 0;border-radius:10px;border:1px solid #bfbfbf}.content-box .typing-text{overflow:hidden;height:380px}.typing-text::-webkit-scrollbar{width:0}.typing-text p{font-size:30px;text-align:justify;letter-spacing:6px;word-break:break-all}.typing-text p span{position:relative}.typing-text p span.correct{color:#21b410}.typing-text p span.incorrect{color:#e42127;outline:1px solid #fff;background:pink;border-radius:4px}.typing-text p span.active{color:#ffb522}.typing-text p span.active::before{position:absolute;content:"";height:3px;width:100%;bottom:0;left:0;opacity:0;border-radius:5px;background:#17A2B8;animation:blink .5s ease-in-out infinite}@keyframes blink{50%{opacity:1}}.content-box .content{margin-top:17px;display:flex;padding:12px 0;flex-wrap:wrap;align-items:center;justify-content:space-between;border-top:2px solid #bfbfbf}.content button{outline:none;border:none;width:105px;color:#fff;padding:8px 0;font-size:16px;cursor:pointer;border-radius:5px;background:#17A2B8;transition:transform 0.3s ease}.content button:active{transform:scale(.97)}.content .result-details{display:flex;flex-wrap:wrap;align-items:center;width:calc(100% - 220px);justify-content:space-between}.result-details li{display:flex;height:20px;list-style:none;position:relative;align-items:center}.result-details li:not(:first-child){padding-left:22px;border-left:1px solid #e71111}.result-details li p{font-size:19px}.result-details li span{display:block;font-size:20px;font-weight:700;margin-left:10px}@media (max-width:745px){.wrapper{padding:20px}.content-box .content{padding:20px 0}.content-box .typing-text{max-height:100%}.typing-text p{font-size:19px;text-align:left}.content button{width:100%;font-size:15px;padding:10px 0;margin-top:20px}.content .result-details{width:100%}.result-details li:not(:first-child){border-left:0;padding:0}.result-details li p,.result-details li span{font-size:17px}}@media (max-width:518px){.wrapper .content-box{padding:10px 15px 0}.typing-text p{font-size:18px}.result-details li{margin-bottom:10px}.content button{margin-top:10px}}