@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@500&family=Roboto+Mono:wght@100;400;500;700&display=swap";
:root{--cell-background-color:hsl(var(--hue,248), var(--saturation,20%), calc(var(--lightness-offset,0%) + var(--lightness,43%)));--wrong-color:hsl(var(--hue,5), var(--saturation,80%), calc(var(--lightness-offset,0%) + var(--lightness,63%)));--wrong-location-color:hsl(var(--hue,35), var(--saturation,84%), calc(var(--lightness-offset,0%) + var(--lightness,73%)));--right-color:hsl(var(--hue,142), var(--saturation,76%), calc(var(--lightness-offset,0%) + var(--lightness,68%)));--background-color:#231a47}html,body{background-color:var(--background-color);color:#fff;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;margin:0;padding:1em;font-family:Fredoka,sans-serif;font-size:clamp(.5rem,2.5vmin,2.5rem);transition:all .5s;display:flex;overflow:hidden}@media only screen and (max-width:799px){html,body{height:90vh}}a{color:inherit;text-decoration:none}*{box-sizing:border-box}.hidden{opacity:0;visibility:hidden;transition:all .5s}.grid{padding:0!important}:before,:after{border-color:#fff!important}*,:before,:after{box-sizing:border-box;padding:0}.h1-center{text-align:center;-webkit-user-select:none;user-select:none}.lightTextField{background-color:#ffffff2f;border-radius:4px}.lightTextField input,.lightTextField label{color:#fff!important}.Tutorial-container{z-index:10;align-items:center;width:100vw;height:100vh;margin:auto;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--background-color)!important;color:#fff!important;border-radius:20px!important}.Tutorial-text{font-weight:light;text-align:center;margin:0 10%;font-size:2rem}.Tutorial-correct{color:var(--right-color)}.Tutorial-wrong-spot{color:var(--wrong-location-color)}.Tutorial-wrong{color:var(--wrong-color)}@media only screen and (min-width:800px){.keyboard{grid-template-columns:repeat(20,minmax(auto,1.5em));grid-auto-rows:3em;justify-content:center;gap:.25em;display:grid}.snackbar{font-family:Fredoka,sans-serif!important;font-size:1em!important}}.key{font-size:inherit;background-color:hsl(var(--hue,248), var(--saturation,20%), calc(var(--lightness-offset,0%) + var(--lightness,43%)));color:#fff;fill:#fff;-webkit-user-select:none;user-select:none;border:none;border-radius:.25em;grid-column:span 2;justify-content:center;align-items:center;padding:0;font-family:Fredoka,sans-serif;transition:all .25s;animation:.5s ease-in-out appear;display:flex}.key>svg{width:2em;height:2em}.big-key{grid-column:span 3}.key:hover{cursor:pointer;--lightness-offset:20%;transition:all .25s;transform:translateY(-2px)}.key:active{transition:all .15s;transform:translate(0)}.wrong{background-color:hsl(var(--hue,5), var(--saturation,80%), calc(var(--lightness-offset,0%) + var(--lightness,63%)));transition:all .5s;color:#000!important}.wrong-location{background-color:hsl(var(--hue,35), var(--saturation,84%), calc(var(--lightness-offset,0%) + var(--lightness,63%)));transition:all .5s;color:#000!important}.right{background-color:hsl(var(--hue,142), var(--saturation,76%), calc(var(--lightness-offset,0%) + var(--lightness,68%)));transition:all .5s;color:#000!important}@media only screen and (max-width:799px){.keyboard{grid-template-columns:repeat(20,minmax(auto,1.5em));grid-auto-rows:7em;justify-content:center;gap:.5em;display:grid}.key:focus{cursor:pointer;--lightness:60%;transition:all .25s;transform:translateY(-2px)}.snackbar{font-family:Fredoka,sans-serif!important;font-size:2.5em!important}.key{font-size:2em}.big-key{font-size:1.5em}}.Gameboard{flex-grow:1;grid-template-rows:repeat(6,4em);grid-template-columns:repeat(5,4em);place-content:center;gap:.25em;margin-bottom:1em;display:grid}.Gameboard-cell{border:2px solid var(--cell-background-color);text-transform:uppercase;color:#fff;fill:#fff;-webkit-user-select:none;user-select:none;border-radius:.25em;justify-content:center;align-items:center;font-size:2em;font-weight:700;animation:.5s ease-in-out appear;display:flex}@media only screen and (max-width:799px){.Gameboard{grid-template-rows:repeat(6,6em);grid-template-columns:repeat(5,6em)}.Gameboard-cell{font-size:4em}}@keyframes appear{0%{opacity:0;transform:scale(0)}}.Win{text-shadow:2px 2px #000,-2px 2px #000,2px -2px #000,-2px -2px #000;background-color:#231a47cc!important}.scoreLabel{font-size:xx-large!important}.columnLabel{font-family:Fredoka,sans-serif!important;font-size:large!important;font-weight:700!important}.scoreCell{white-space:nowrap;text-overflow:ellipsis;max-width:12em;overflow:hidden;font-family:Fredoka,sans-serif!important;font-size:medium!important}.btnNav,.btnNav-win,.btnNav-lose{color:#6feb9d!important;border:1px solid #6feb9d!important;width:80%!important;margin-top:1em!important;font-size:small!important}.btnNav:hover,.btnNav-win:hover,.btnNav-lose:hover{background-color:var(--cell-background-color)!important;border:1px solid #6feb9d!important}.btnNav{margin-left:50%!important;transform:translate(-50%)!important}@media only screen and (min-width:799px){.columnLabel{font-size:x-large!important}.scoreCell{font-size:medium!important}.btnNav,.btnNav-win,.btnNav-lose{width:20%!important}}.wotd{color:#6feb9d;font-size:3.5em}.Beg-overlay{z-index:20;background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.Beg-container{width:min(92vw,36em);max-height:90vh;overflow-y:auto;background-color:var(--background-color)!important;color:#fff!important;border:2px solid var(--cell-background-color)!important;border-radius:20px!important;padding:1.5em!important}.Beg-text{margin:.75em 5%;font-size:1.5rem}.Beg-small{opacity:.7;font-size:1.1rem}.Beg-highlight{color:var(--wrong-color);font-weight:700}.Beg-buttons{flex-wrap:wrap;justify-content:center;display:flex}@media only screen and (min-width:800px){.Beg-buttons{flex-direction:row-reverse}}.Beg-btn{color:#6feb9d!important;border:1px solid #6feb9d!important;margin:.5em!important;font-family:Fredoka,sans-serif!important;font-size:small!important}.Beg-btn:hover{background-color:var(--cell-background-color)!important}.Beg-btn-later{color:#ffffff80!important;border:1px solid #ffffff4d!important}.begIcon{background-color:var(--cell-background-color);cursor:pointer;z-index:5;border:none;border-radius:50%;justify-content:center;align-items:center;width:2em;height:2em;font-size:1.25em;transition:all .25s;display:flex;position:fixed;top:1em;right:1em}.begIcon:hover{--lightness-offset:20%;transform:translateY(-2px)}@media only screen and (max-width:799px){.begIcon{font-size:2.5em}}.leaderboardLayout{flex-direction:column;align-items:center;gap:1em;max-width:96vw;display:flex}.leaderboardMain{flex-direction:column;align-items:center;display:flex}.leaderboardMain .btnNav{margin-left:0!important;transform:none!important}@media only screen and (min-width:800px){.leaderboardMain .btnNav{width:max-content!important}}.Poll-container{text-align:center;width:min(92vw,24em);background-color:var(--background-color)!important;color:#fff!important;border:2px solid var(--cell-background-color)!important;border-radius:20px!important;padding:1em 1.25em!important}@media only screen and (max-width:799px){.leaderboardLayout .Poll-container{order:-1}}@media only screen and (min-width:800px){.leaderboardLayout{flex-direction:row;justify-content:center;align-items:flex-start;gap:2em}.Poll-container{width:20vw;margin-top:5.5em}}.Poll-question{margin:0 0 .75em;font-size:1.4em}.Poll-options{flex-direction:column;gap:.5em;display:flex}.Poll-btn{color:#fff!important;border:1px solid #6feb9d!important;font-family:Fredoka,sans-serif!important;font-size:small!important}.Poll-btn:hover{background-color:var(--cell-background-color)!important}.Poll-labels{justify-content:space-between;gap:1em;margin-bottom:.4em;display:flex}.Poll-labels span:first-child{text-align:left}.Poll-labels span:last-child{text-align:right}.Poll-picked{color:#6feb9d;font-weight:700}.Poll-bar{background-color:var(--wrong-location-color);border-radius:.7em;height:1.4em;overflow:hidden}.Poll-bar-a{background-color:var(--right-color);height:100%;transition:width .5s ease-in-out}.Poll-counts{opacity:.85;margin-top:.4em;margin-bottom:0;font-size:.9em}