:root{font-family:system-ui,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424}#root{max-width:1280px}body{margin:0;display:flex;align-items:center;justify-content:center;position:relative}.parent{text-align:center;margin-top:80px}p{margin:0 0 20px;padding:0}.btn{padding:.5rem 1rem;cursor:pointer;background-color:#50971d;border:none;font:inherit}.abs{position:absolute;top:30px;right:30px}.container{display:flex;align-items:center;justify-content:center;gap:2rem;margin-bottom:1.5rem}h3 span{color:#50971d}.instruction{position:absolute;width:30vw;left:10px;top:40%}.parent-box{display:flex;gap:1rem;margin-bottom:1rem}.box{align-items:center;border:2px black solid;background-color:#47474798;display:flex;font-size:2rem;font-weight:700;height:65px;width:65px;justify-content:center;text-transform:uppercase;transition:1s ease-out}.right{background-color:#50971d;animation:rotate 1s ease-out}.may{background-color:#baba49;animation:rotate 1s ease-out}.wrong{background-color:#29262698;border:2px #5a2424 solid;animation:rotate 1s ease-out}@keyframes rotate{50%{transform:rotateY(90deg)}}@media (max-width: 500px){.parent-box{gap:10px}.box{height:45px;width:45px;font-size:1.5rem}}nav{display:flex;justify-content:space-around;align-items:center;height:60px;background:#323232;border-bottom:2px whitesmoke solid;position:absolute;top:0;left:0;right:0}nav div{text-transform:uppercase;font-size:larger;font-weight:600}