:root{font-family: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:3.2em;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}}body{background-color:#111010;color:#ebf5fc;font-family:Arial,Helvetica,sans-serif}h1,h2{text-align:center;width:100%;margin:3% 0 0}h1{font-size:46px}header{height:10%}a{color:#d2c3fe}a:hover{font-weight:600;color:#9fc5fd}.flex-center{display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.container{width:100vw;height:100vh}.stageContainer{width:100%;height:70%;display:flex;justify-content:center;flex-wrap:wrap;align-content:space-evenly}.inputSystemContainer{width:60%;height:100%}.inputContainer{width:100%;margin-bottom:5%}.navContainer{display:flex;align-items:center;height:20%;width:100%}.keyboardContainer{height:50%}.keyboard{width:660px;height:100%;display:flex;justify-content:space-evenly;align-items:center;border:solid 2px #111010;flex-wrap:wrap;gap:1%;row-gap:5%;background:linear-gradient(90deg,#8ec5fc,#a1d8ff 35%,#e0c3ff);padding:1%;border-radius:15px}.letterKey,.numberKey,.backspace,.tick{background:transparent;height:30%;border:solid 3px #111010;color:#111010;font-weight:600;padding:5px 10px;display:flex;justify-content:start;font-size:30px}.letterKey,.numberKey{width:9%}.backspace,.tick{width:19%}.letterKey:hover,.numberKey:hover,.backspace:hover,.tick:hover{background-color:#111010;color:#b8c4fe}.backspace:hover .backspaceIcon,.tick:hover .tickIcon{fill:#b8c4fe}.textDisplay{width:660px;background-color:#272626;border-radius:30px;display:flex;justify-content:start;align-items:center;flex-wrap:wrap;padding:10px 20px}.textDisplayActive{border:solid 2px #B8C4FE}.textDisplayTextPresent{padding-bottom:10px}.textDisplay p{width:100%;margin:0}.inputText{color:#656565;font-size:30px;margin-bottom:1%}.inputLabelNormal{color:#656565;font-size:20px}.inputLabelSmall{color:#9fc5fd;font-weight:500;font-size:16px;margin-top:1%}.navContainerSingleButton{justify-content:center}.navContainerDoubleButtons{justify-content:space-evenly}.textContainer{background-color:#3f3f3f;padding:2%;width:600px;border-radius:10px}.dateContainer{width:50%;gap:5%}.dateContainer div{width:15%;height:24px;border-radius:5px;padding:5px}.activeDateContainer{border:solid 2px #B8C4FE}.inactiveDateContainer{border:solid 2px #3f3f3f}.dateContainer p{margin:0;text-align:center}.dateBlank{color:#3f3f3f}.datePopulated{color:#b8c4fe}.padlock{position:fixed;z-index:3}.cardsActions,.cardsHand{width:100%;display:flex;justify-content:space-between;align-items:center;gap:5%}.cardsActions{height:20%}.cardsHand{height:80%}.drawButton,.tickButton{width:100%;padding:1%;background-color:#111010;border-radius:10px;height:60px}.drawButton{border:solid 3px #9FC5FD;color:#9fc5fd;font-size:30px}.drawButton:hover{background-color:#9fc5fd;color:#111010}.tickButton{border:solid 3px #D2C3FE;color:#d2c3fe}.tickButton:hover{background-color:#d2c3fe}.tickButton:hover svg{fill:#111010}.btnTransparent{width:10%;padding:0;border:none;background:transparent}.nextIcon circle{fill:none;stroke:#d2c3fe}.nextIcon:hover circle{fill:#d2c3fe}.nextIcon path{stroke:#d2c3fe}.nextIcon:hover path,.previousIcon:hover path{stroke:#111010}.previousIcon circle{fill:none;stroke:#9fc5fd}.previousIcon:hover circle{fill:#9fc5fd}.previousIcon path{stroke:#9fc5fd}.tickIcon{width:36px}.cardContainer{width:15%}@media only screen and (max-width: 1300px){.cardContainer{width:20%}}@media only screen and (max-width: 1000px){.textContainer{width:60%}.btnTransparent{width:150px}.cardContainer{width:25%}.drawButton,.tickButton{width:50%}.drawButton{font-size:26px}.tickIcon,.backspaceIcon{width:30px}.inputSystemContainer{width:70%}}@media only screen and (max-width: 900px){.keyboard{width:90%;height:60%;padding:2%}.letterKey,.backspace,.tick{font-size:24px;height:24%;display:flex;justify-content:center;align-items:center}.backspaceIcon,.tickIcon{width:30px}.textDisplay{width:90%;padding:8px 16px}.inputLabelNormal{font-size:18px}}@media only screen and (max-width: 750px){.textContainer{width:70%}.inputSystemContainer{width:80%}.drawButton{font-size:20px}.backspaceIcon,.tickIcon{width:26px}.keyboard{width:390px;height:55%}.textDisplay{width:390px;padding:6px 14px}.inputLabelNormal{font-size:16px}.letterKey{width:6%;font-size:20px}.backspace,.tick{width:49%}}@media only screen and (max-width: 500px){.inputSystemContainer{width:90%}.keyboardContainer{height:auto}.keyboard{width:270px;height:100%}.textDisplay{width:270px}.letterKey{width:10%;font-size:16px;height:20%}.backspace,.tick{height:20%}}@media only screen and (max-width: 500px){.navButton{width:100px}.dateContainer{width:90%}.drawButton{font-size:20px}.tickButton{display:flex;justify-content:center;align-items:center}.cardContainer{width:35%}.tickIcon{width:25px}}@media only screen and (max-width: 440px){h1{font-size:36px}.textContainer{width:65%}}@media only screen and (max-width: 370px){h1{font-size:32px}}@media only screen and (max-width: 320px){h1{font-size:26px}body{overflow:hidden}}