*{margin:0;padding:0;box-sizing:border-box;transition:.3s;}
body{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Arial,sans-serif;padding:20px;color:white;background:purple;}
.container{text-align:center;width:90%;max-width:800px;}
.welcome h1{font-size:3rem;margin-bottom:10px;padding:10px;border:2px solid white;background:dodgerblue;}
.welcome p{font-size:1.2rem;line-height:1.3;margin-bottom:20px;}
.quiz-btn{background:dodgerblue;padding:15px 30px;font-size:1.2rem;border-radius:10px;margin:5px;transition:.3s;}
.quiz-btn:hover{transform:translateY(-5px);box-shadow:0 8px 20px grey;}
.card{background:lightpink;backdrop-filter:blur(6px);padding:25px;border-radius:12px;width:100%;max-width:700px;box-shadow:0 8px 25px grey;}
.screen{display:flex;flex-direction:column;gap:14px;text-align:center;}
.top-info{display:flex;justify-content:space-between;font-size:14px;}
#options-container button{width:100%;padding:12px;background:lightskyblue;border:none;border-radius:8px;text-align:left;margin:6px 0;cursor:pointer;}
.correct{outline:3px solid green;}
.wrong{outline:3px solid red;}
.controls{display:flex;justify-content:space-between;margin-top:12px;}
.big{font-size:3rem;}
.hidden{display:none;}
.btn{padding:10px 16px;border-radius:8px;border:none;font-weight:600;cursor:pointer;}
.white{background:lawngreen;color:indigo;}
.outline{background:transparent;color:lawngreen;border:1px solid lawngreen;}
@media(max-width:1200px){body{background-color:navy;}}
@media(max-width:1000px){body{background-color:brown;}}
@media(max-width:800px){body{background-color:lightcoral;}}
@media(max-width:600px){body{background-color:yellow;}}