#root{max-width:1280px;margin:auto;padding:2rem;text-align:center}.laskuri{position:absolute;background:#00f;top:0;left:100%}#sfcc5x3ysb9q1m3u53ek24nakfkqhq3jwl3{position:fixed;left:2px;top:2px}.appContainer{display:flexbox;align-items:center;margin:auto}#gameFrame{display:flex;flex-direction:column;align-items:center;margin-top:0;background-color:brown;color:#000;padding:5px;border-radius:10px;width:340px;height:460px;position:relative;box-shadow:-3px 4px 5px #070707}.mainTitle{display:flex;justify-content:center;margin:0}.h2titlerow{display:grid;grid-template-columns:165px 50px 50px;height:40px;margin-bottom:10px}.h2Title{grid-column-start:1;grid-column-end:2;margin-top:25px;font-size:125%}#languageSelector{grid-column-start:2;grid-column-end:3;align-items:right;margin-top:30px}#colorSelector{grid-column-start:3;grid-column-end:4;align-items:right;margin-top:30px;margin-left:25px}#keysPressedDisplay{display:grid;position:relative;grid-template-columns:100px 100px 1fr 2fr;align-items:center;color:#000;font-size:16px;font-weight:700}#keysPressedDisplay p{margin:0;font-size:18px}.attempt{display:flex;align-items:center;justify-content:space-between;width:100%;padding:5px 0;gap:10px;position:relative}.attempt p{margin:0;font-size:16px;color:#000;font-weight:700}.feedback{display:flex;justify-content:flex-end;gap:5px}.feedback span{margin-left:5px;border-radius:50%;background-color:gray}span.correct{background-color:#020202;box-shadow:-1px 1px 1px #0f0e0e}span.almost{background-color:#f2efef;box-shadow:-1px 1px 1px #070707}#guessArea{display:flex;position:relative;margin-top:4px;margin-left:3px;margin-bottom:2px}#guessText{display:flex;position:relative;padding:5px;margin-left:3px;margin-bottom:15px}#deleteButton{grid-column-start:3;grid-column-end:4;position:relative;margin-left:10px;margin-top:2px;padding:5px 10px;font-size:14px;background-color:gray;border-radius:8px;align-self:center;box-shadow:-1px 2px 3px #070707}#resetButton{grid-column-start:4;grid-column-end:5;margin-left:5px;margin-top:2px;padding:5px 10px;font-size:14px;background-color:gray;border-radius:8px;box-shadow:-1px 2px 3px #070707}.colorButtons{display:grid;grid-template-columns:repeat(5,1fr);width:340px;padding:10px;margin-top:20px;gap:10px}#button-1{background-color:#9e0142;color:#000}#button-2{background-color:#d53e4f;color:#000}#button-3{background-color:f46d43;color:#000}#button-4,#button-5{background-color:#fdae61;color:#000}#button-6{background-color:#e6f598;color:#000}#button-7{background-color:#abdda4;color:#000}#button-8,#button-9{background-color:#66c2a5;color:#000}#button-0{background-color:#5e4fa2;color:#000}#finalMessage{font-size:16px;font-weight:700;margin-top:2px;margin-bottom:2px}.codeButton{width:50px;height:50px;border:none;border-radius:50%;cursor:pointer}.colorDot{width:20px;height:20px;border-radius:50%;display:inline-block;margin:0 2px;box-shadow:-1px 2px 2px #070707}.correct{width:10px;height:10px;background-color:#000;border-radius:50%}.almost{width:10px;height:10px;background-color:#fff;border-radius:50%}#messageAreaEX{background-color:#eee;color:#000;width:350px;height:50px;border-radius:15px;align-content:center;margin-top:10px}.colorfulSecret{margin-bottom:10px}.codeButton{width:50px;height:50px;border:none;border-radius:50%;cursor:pointer;box-shadow:-2px 3px 4px #070707;transition:all .3s ease}.codeButton:active{box-shadow:inset 6px 6px 12px #aaa,inset -6px -6px 12px #fff}.colorButtons .codeButton{transition:transform .3s ease}.colorButtons .codeButton:hover{transform:translateY(-5px)}#upperMessages{display:flex;align-items:center}#messageArea{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);max-width:100px;width:100%;height:30px;background:#efd7d7;padding:5px;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:5px}.pop-up-box{border:solid black 5px}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:1.5em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}