@import"https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Metal Mania,serif;width:100%;height:100vh;position:relative;background-color:#000;display:flex;justify-content:center;align-items:center}.instruction{position:absolute;top:1rem;font-size:4rem;color:#5c7d33;left:19%}.count-down{position:absolute;margin-left:3rem;font-weight:900;top:2rem;right:4rem;font-size:4rem}.colors{width:100%;height:90px;border-radius:10px;box-shadow:inset #74480f 3px 3px 6px 1px,inset #6e749b4d -2px -2px 6px;border:none}.colors:hover{filter:contrast(150%)}.colors:active{border:none;outline:none}.color-palette{position:absolute;left:0;top:0;background-color:#89580a;border-top-right-radius:3rem;border-bottom-right-radius:3rem;width:200px;height:100vh;display:flex;flex-direction:column;gap:10px;justify-content:center;align-items:center;padding-inline:1rem;box-shadow:inset #74480f 3px 3px 12px 1px,inset #d1d1d1 -2px -2px 12px}.select-board{width:80px;height:80px;border:10px solid #89580a;position:absolute;left:20%;border-radius:5px 15px}.correct-display{width:20%;height:50%;position:absolute;border:10px solid #89580a;border-radius:50%;top:4rem;left:40%;filter:blur(3px);box-shadow:inset #74480f 3px 3px 12px 1px,inset #d1d1d1 -2px -2px 12px}.message{font-size:3rem;position:absolute;left:60%}.profile{margin:0 auto;padding:10px;height:4rem;width:fit-content;display:flex;gap:10px;align-items:center;justify-content:center;background-color:#89580a;margin-bottom:2rem;border-radius:1rem}.prof-img{border-radius:50%;height:3rem;width:3rem}.prof-name{color:#fff}.start{width:500px;height:20vh;display:flex;align-items:center;justify-content:center;box-shadow:inset #74480f 3px 3px 12px 1px,inset #d1d1d1 -2px -2px 12px;background-color:#74480f;border-radius:2rem}.start-btn{background-color:#442604;width:10rem;height:3rem;border:none;font-size:1.5rem;font-weight:700;cursor:pointer}.start-btn:active{border:none;transform:translate(1rem,1rem)}.number-display{background-color:#74480f;height:4rem;width:8rem;position:absolute;bottom:2rem;right:4rem;box-shadow:inset #74480f 3px 3px 12px 1px,inset #d1d1d1 -2px -2px 12px;border-radius:1rem;display:grid;place-content:center}.number{font-size:2.5rem;color:#000}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;display:flex;justify-content:center;align-items:center;z-index:999}.restart{position:absolute;top:15px;right:24px;background-color:#74480f;color:#fff;padding:10px;font-size:15px;border:none;border-radius:8px;cursor:pointer;z-index:1000}.restart:hover{filter:brightness(120%)}.game-instructions-btn{width:12rem;height:3rem;font-size:1rem;position:absolute;background-color:#74480f;color:#fff;top:1rem;right:1rem;outline:none;border:none;border-radius:8px;cursor:pointer;color:#000;font-weight:600}.game-instructions-btn:hover{filter:brightness(120%)}div.score{height:5rem;padding-inline:1rem;font-size:2rem;background-color:green;color:#000;display:flex;align-items:center;justify-content:center;position:fixed;top:5rem}ul{box-shadow:inset #74480f 3px 3px 12px 1px,inset #d1d1d1 -2px -2px 12px;width:30%;height:fit-content;padding-inline:3rem;padding-block:2.5rem;border-radius:1.2rem;background-color:#74480f;margin-left:18%;margin-top:2rem}ul li{font-size:1.5rem;color:#fff;list-style-type:circle}.close-instr-btn{position:fixed;top:1rem;right:1rem;cursor:pointer;font-family:sans-serif;background:transparent}.close-instr-btn:hover{border:none;outline:none}@media (max-width: 480px){body{padding-block:1rem}.instruction{margin-left:-1.5rem;font-size:3.5rem;top:2rem;color:#5c7d33}.color-palette{top:69%;border-radius:25px 25px 0 0;height:200px;gap:10px;padding-block:1rem;width:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}.colors{width:100%;height:100%}.select-board{width:50px;height:60px;left:2rem;bottom:35%;border-radius:50%}.correct-display{width:60%;height:35%;transform:translate(-70px,70px)}.message{left:8rem;bottom:35%}.count-down{font-size:3.5rem;top:8rem;right:88%}.number-display{bottom:35%;right:1rem;width:5rem;height:3rem}.number{font-size:1.7rem}.start{width:90vw;height:30vh}.game-instructions-btn{width:10rem;font-size:1rem}ul{width:90%;margin-right:10rem}div.score{width:90%;font-size:3rem;font-weight:600}}@media (min-width: 480px) and (max-width: 900px){body{padding-block:1rem}.instruction{margin-left:-2.2rem;font-size:7rem;top:3rem;color:#5c7d33}.color-palette{top:71%;border-radius:25px 25px 0 0;height:320px;gap:20px;padding-block:1rem;padding-inline:1rem;width:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}.colors{width:100%;height:100%}.select-board{width:80px;height:80px;left:3rem;bottom:45%;border-radius:50%}.correct-display{width:40%;height:35%;transform:translate(-70px,180px)}.message{left:23rem;bottom:35%;font-size:60px}.count-down{font-size:6rem;top:13rem;right:7rem}.number-display{bottom:32%;right:1rem;width:10rem;height:5rem}.number{font-size:3rem}.restart{padding:30px 60px;font-size:40px}.start{width:70vw;height:30vh}.start-btn{width:18rem;height:6rem;font-size:2.2rem}.start-btn:hover{width:20rem;height:7rem;color:#2f45ff}.game-instructions-btn{width:12rem;height:4rem;font-size:1rem}ul{width:90%}ul li{font-size:2rem}div.score{width:90%;font-size:5rem;font-weight:600}}.add,.share{padding:10px;border:none;outline:none;background-color:#201c1c;color:#fff;border-radius:10px;cursor:pointer}.share{background-color:#fff;color:#000;margin-left:10px}.textarea{resize:none;border:none;outline:none;border-radius:12px;background-color:#89580a;color:#fff;padding:10px;margin-top:3rem;height:8rem;width:100%}.prof-image{border-radius:50%;height:3rem;width:3rem;position:fixed;bottom:10px;left:10px}