body{font-family:roboto regular,ubuntu,Arial,Helvetica,sans-serif;background-color:#2b2b2b;height:100%;display:flex;flex-direction:column;min-height:100vh}#logo{width:100%}h2{font-size:15px;text-align:center;color:#fff}#modal-share-button{display:none;vertical-align:text-bottom}#sound:hover{cursor:pointer}#sound{width:10%;margin:auto}.result{display:none}#target{width:0;height:0;position:absolute;bottom:0}.container__grid{display:flex;align-items:center;justify-content:center}#grid{table-layout:fixed;border-collapse:collapse;width:100%}#grid td{background-color:#037aca;border:1px solid #000;width:8vh;height:8vh;display:inline-block;padding-top:20px}.content,h1{color:#fff;font-size:1.5rem;text-transform:uppercase;text-align:center}#not-valid{opacity:0}.topgrid,.btn-style{font-size:15px}.content{display:flex;flex-direction:column;margin-left:15%;margin-right:15%;justify-content:space-between;height:100%}.links a{background-color:#fff;border-radius:5px;width:50%;margin:auto;text-decoration:none;color:#2b2b2b;padding:.51rem;box-shadow:10px 5px 5px black;margin-top:1.5rem}.links a:hover{box-shadow:none}h1{max-width:500px;margin-left:auto;margin-right:auto}h1 a{text-decoration:none;color:#fff;font-size:50px;max-width:85%;display:inline-block}h1 div{display:inline-block}ul.nav{margin:0}.letter{font-size:18px;display:flex;border:1px solid #fff;border-radius:5px;user-select:none;flex-grow:1;flex-shrink:0;height:45px;align-items:center;justify-content:center;font-family:robotomono regular,monospace;margin-right:10px;margin-bottom:10px;margin-left:5px}.keyboard__letter:hover{cursor:pointer;background-color:rgba(75,75,75,.65)}.letter-red{background-color:#e7002a!important}.letter-yellow{background-color:#ffbd00!important}.letter-black{background-color:#3c6c8c!important}div.letter-none{color:#707070;border:1px solid #707070}#grid tr.current td{background-color:#0098ff}footer{text-align:center;position:absolute;bottom:10px;color:#fff;position:static;margin-top:auto;padding:20px}.modal-content{background-color:#2b2b2b;color:#fff;height:600px}.modal-body{padding-top:1.5em;color:#fff;font-size:24px}.modal-title{font-size:32px}.modal-header button{background:0 0;border:none;color:#fff}.modal-header span{font-size:32px}#twitter-share-button{text-decoration:none;color:#fff;padding:.4rem 1rem;background-color:#000;border-radius:5px}#twitter-share-button img{width:20px;vertical-align:baseline}#twitter-share-button:hover{border:1px solid #000}#share{margin-top:1em}#copy-score{background-color:#757575;color:#fff;padding:.25rem 1rem;background-color:#000;border-radius:5px;display:block;width:fit-content;margin-top:10px}#copy-score img{color:#fff;width:20px;margin-right:7px;vertical-align:baseline}#copy-score:hover{cursor:pointer;border:1px solid #000}#resume{margin-bottom:1em}.modal-footer{margin-top:1rem;position:absolute;bottom:1em}#modal-info-button:hover,#modal-share-button:hover{cursor:pointer}#modal-info-button{text-decoration:underline}#modal-info-button:hover{color:#037aca!important}.nav-item{color:#fff}.container__keyboard{display:flex;align-items:center;justify-content:center;container:keyboard/inline-size}.keyboard{width:max-content;display:flex;justify-content:center;gap:20px}.keyboard__content{display:flex;flex-direction:column;gap:8px}.keyboard__row{display:flex;align-items:center;justify-content:center;gap:10px}.keyboard__letter{display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid #fff;border-radius:5px;font-family:robotomono regular,monospace;color:#fff;width:30px;height:40px}.keyboard__letter[data-letter=⌫],.keyboard__letter[data-letter=↲]{width:55px;font-size:30px}.container__preference{display:flex;align-items:center;justify-content:center}.keyboard-preference{background-color:#3a3a3c;border-radius:100px;padding:0 8px}.keyboard-preference button{background-color:#3a3a3c;border-radius:100px;border-color:transparent;font-size:14px;color:#fff;font-weight:700;vertical-align:text-top}.keyboard-preference button.selected{background-color:#0098ff}.maintenance{color:#fff;font-weight:700;margin:auto;font-size:25px}@media screen and (max-width:1200px){.breadcrumb,.content{margin-left:0;margin-right:0}.modal-body{font-size:18px}.letter{height:35px;margin-left:0;margin-right:0}#not-valid{font-size:15px;text-transform:initial!important}}@media screen and (max-width:820px){#grid tr:has(>:nth-child(7)) td{width:6vh;height:7vh;padding-top:10px}}@media screen and (max-width:560px){.container__keyboard .keyboard{flex-direction:column;gap:14px}.keyboard__letter{font-size:16px;width:25px;height:34px}#grid td{padding-top:10px}#grid tr:has(>:nth-child(7)) td{width:5vh;height:7vh;padding-top:10px}}@media screen and (max-width:420px){.keyboard__row{gap:6px}#grid td{padding-top:10px}#modal-info-button{display:block}#grid tr:has(>:nth-child(6)) td{width:6.5vh;height:7vh;padding-top:10px}#grid tr:has(>:nth-child(7)) td{width:5vh;height:6vh;padding-top:10px}#grid tr:has(>:nth-child(8)) td{width:4vh;height:6vh;padding-top:10px}#grid tr:has(>:nth-child(9)) td{width:4vh;height:6vh;padding-top:10px}#grid tr:has(>:nth-child(10)) td{width:3.5vh;height:6vh;padding-top:10px}}@media screen and (max-width:350px){.keyboard__row{gap:3px}.keyboard__letter{font-size:14px;width:22px;height:30px}#grid tr:has(>:nth-child(6)) td{width:6.3vh;height:7vh;padding-top:10px}#grid tr:has(>:nth-child(7)) td{width:4vh;height:6vh;padding:0}#grid tr:has(>:nth-child(10)) td{width:3.5vh;height:6vh;padding-top:10px}}