:root{--dark-blue: #5465ff;--medium-blue: #788bff;--light-blue: #9bb1ff;--very-light-blue: #bfd7ff;--almost-white: #e2fdff;--white: #ffffff}body{background-color:var(--almost-white);color:var(--dark-blue);font-family:Arial,sans-serif;text-align:center}h1{color:var(--dark-blue);background-color:var(--white);padding:10px;border-radius:10px;display:inline-block}h2{color:var(--medium-blue)}.container{background:var(--white);padding:5px;border-radius:12px;box-shadow:0 4px 8px #0000001a;width:90%;max-width:600px;margin:20px auto}button{background:var(--dark-blue);color:var(--white);border:none;padding:10px 15px;font-size:16px;border-radius:8px;cursor:pointer;transition:.3s}button:hover{background:var(--medium-blue)}input{padding:10px;border:2px solid var(--light-blue);border-radius:8px;font-size:16px}label{display:block;font-size:16px;margin-bottom:8px;color:var(--dark-blue)}.feedback{font-weight:700;margin-top:10px}.correct{color:var(--medium-blue)}.wrong{color:red}.dropdown{padding:10px;font-size:16px;background-color:var(--very-light-blue);border:1px solid var(--medium-blue);border-radius:5px;margin-bottom:20px;cursor:pointer;color:var(--dark-blue);width:200px}.dropdown:focus{border-color:var(--dark-blue);outline:none;border-radius:5px}.dropdown option{background-color:var(--very-light-blue);color:var(--dark-blue);padding:10px;font-size:16px;border-radius:5px}.dropdown option:hover{background-color:var(--light-blue);color:var(--white);border-radius:5px}.navbar{padding:10px 20px;position:relative}.menu-icon{font-size:24px;cursor:pointer;color:#5465ff;position:absolute;top:50%;left:10px;transform:translateY(-50%);margin-left:2px;margin-top:2px}.nav-links{list-style:none;padding:0;margin:0;display:none;position:absolute;top:40px;left:0;background:#9bb1ff;width:100%;border-radius:12px;box-shadow:0 4px 8px #0000001a}.nav-links.open{display:block}.nav-links li{padding:10px;text-align:center}.nav-links a{text-decoration:none;color:#fff;display:block}.nav-links li:hover{background:#788bff;border-radius:12px}