@font-face{font-family:Graffiti Youth;src:url(/fonts/GraffitiYouth-Regular.otf) format("opentype");font-weight:400;font-style:normal}@font-face{font-family:Super Woobly;src:url(/fonts/SuperWoobly.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Montserrat;src:url(/fonts/Montserrat-Medium.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:BebasNeue;src:url(/fonts/BebasNeue-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:"Redoura Serif";src:url(/fonts/Redoura%20Serif.otf) format("opentype");font-weight:400;font-style:normal}.font-montserrat{--font: "Montserrat"}.font-super-woobly{--font: "Super Woobly"}.font-graffiti-youth{--font: "Graffiti Youth"}.font-bebas-neue{--font: "BebasNeue"}.font-redoura-serif{--font: "Redoura Serif"}.colour-red{--text-colour: #FF0000}.colour-blue{--text-colour: #0000FF}.colour-green{--text-colour: #059A3C}.colour-purple{--text-colour: #9A0568}.colour-orange{--text-colour: #FF9E00}.colour-yellow{--text-colour: #FFEE06}#start{padding-top:100px;width:100%;display:flex;flex-direction:column;align-items:center;gap:5px;max-width:450px;margin:auto}#start h1{font-family:var(--font);font-size:70px;margin:0}#start p{font-family:var(--font);font-size:18px;text-align:center}#start #connect-code{font-size:40px;text-align:center;width:50%;background:none;box-sizing:border-box;border:1px solid black;border-radius:5px}#start #connect-button{width:50%;font-size:40px;background:none;box-sizing:border-box;border:1px solid black;border-radius:5px}#start #connect-button:active{background:#dcdcdc}body{margin:0}main{max-width:450px;margin:auto}main#editor{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none;display:none;height:100vh;width:100%;max-width:500px;margin:auto;grid-template-rows:min-content 1fr min-content 40vh;grid-template-columns:100%}.text-viewer{align-self:center;justify-self:center;display:grid;align-items:baseline;justify-content:stretch;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(16,6%);width:90%}@keyframes cursor-blink{0%,50%{border-color:#000}51%,to{border-color:#f000}}.text-viewer .char{box-sizing:border-box;display:block;font-size:30px;height:100%;padding:1px;text-align:center;font-family:var(--font);color:var(--text-colour)}.text-viewer .cursor{animation:cursor-blink 1s infinite ease;padding:0;border-width:1px;border-style:solid;border-color:#000}#toolbar{margin:5px 0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:1fr 1fr;gap:5px;justify-items:center;align-items:baseline}.colour-option{box-sizing:border-box;background-color:var(--text-colour);border-radius:5px;aspect-ratio:1;width:70%}.colour-selected{border:2px solid black;padding:2px;background-clip:content-box}.font-option{aspect-ratio:1;font-size:150%;font-family:var(--font)}#keyboard{display:flex;flex-direction:column;gap:5px;width:100%;padding-bottom:60px}#keyboard .row{width:100%;flex-grow:1;gap:5px;display:flex;flex-direction:row;justify-content:center}#keyboard .row>*{background:none;box-sizing:border-box;border:1px solid black;border-radius:5px}#keyboard .row>*:active{background:#dcdcdc}#keyboard .key{width:calc(10% - 5px);height:100%;font-size:200%;font-family:var(--font)}#keyboard .special{width:calc(15% - 5px);height:100%;font-size:100%}#keyboard .space{width:calc(50% - 5px);font-size:100%}#top-bar{display:grid;padding:5px;gap:5px;grid-template-columns:1fr 1fr}#top-bar>*{padding:5px;font-size:20px;background:none;box-sizing:border-box;border:1px solid black;border-radius:5px}#top-bar>*:active{background:#dcdcdc}