/**
 * @name bg-wordle-lambda-project
 * @description This is a fork of stambolievv's BG Wordle repo, which is based on Wordle, a puzzle game about guessing the correct 5 letter word. Unlike the original Wordle, which has a one game limit per day, this version does not have such a limit. Also, I will be using it for my thesis project and paper to automate the deployment of cloud infrastructure.
 *
 * @version 1.0.0
 * @author Deyan 'stambolievv' Stamboliev
 * @license Apache-2.0
 */
:root{--clr-background: hsl(240, 3%, 7%);--clr-border: hsl(240, 2%, 23%);--clr-alert-bg: hsl(204, 7%, 85%);--clr-alert-text: hsl(0, 0%, 100%);--clr-keyboard: hsl(200, 1%, 51%);--clr-keyboard-keys: hsl(0, 0%, 100%);--clr-keyboard-hover: hsl(200, 1%, 71%);--clr-tile-text: hsl(0, 0%, 100%);--clr-active-spot: hsl(200, 1%, 34%);--clr-correct-spot: hsl(115, 29%, 43%);--clr-wrong-spot: hsl(49, 51%, 47%);--clr-missing-spot: hsl(240, 2%, 23%);--clr-score-text: hsl(0, 0%, 100%)}*,*:after,*:before{margin:0;padding:0;box-sizing:border-box;font-family:Arial;user-select:none}html{color-scheme:only dark}body{display:flex;flex-direction:column;min-height:100vh;margin:0;padding:1em;background-color:var(--clr-background);font-size:clamp(.5rem,2.5vmin,1.5rem)}#guess-grid{display:grid;justify-content:center;align-content:center;flex-grow:1;grid-template-columns:repeat(5,4em);grid-template-rows:repeat(6,4em);gap:.25em;margin-block:1em}.tile{display:flex;justify-content:center;align-items:center;font-size:2em;font-weight:700;text-transform:uppercase;color:var(--clr-tile-text);border:.05em solid var(--clr-border);transition:transform .25s linear}.tile[data-state=active-spot]{border-color:var(--clr-active-spot)}.tile[data-state=correct-spot]{border:none;background-color:var(--clr-correct-spot)}.tile[data-state=wrong-spot]{border:none;background-color:var(--clr-wrong-spot)}.tile[data-state=missing-spot]{border:none;background-color:var(--clr-missing-spot)}.tile.shake{animation:shake .25s ease-in-out}.tile.dance{animation:dance .5s ease-in-out}.tile.flip{transform:rotateX(90deg)}@keyframes shake{10%{transform:translate(-5%)}30%{transform:translate(5%)}50%{transform:translate(-7.5%)}70%{transform:translate(7.5%)}90%{transform:translate(-5%)}to{transform:translate(0)}}@keyframes dance{20%{transform:translateY(-50%)}40%{transform:translateY(5%)}60%{transform:translateY(-25%)}80%{transform:translateY(2.5%)}90%{transform:translateY(-5%)}to{transform:translateY(0)}}#keyboard{display:grid;grid-template-columns:repeat(22,minmax(auto,1.25em));grid-auto-rows:3em;gap:.25em;justify-content:center}.key{display:flex;justify-content:center;align-items:center;grid-column:span 2;padding:0;font-size:inherit;text-transform:uppercase;color:var(--clr-keyboard-keys);fill:var(--clr-keyboard-keys);background-color:var(--clr-keyboard);border:none;border-radius:.25em;cursor:pointer;user-select:none}.key[data-key=Enter],.key[data-key=Delete]{grid-column:span 3}.key>svg{width:1.75em;height:1.75em}.key:active,.key:hover,.key:focus-visible{background-color:var(--clr-keyboard-hover)}.key.missing-spot{background-color:var(--clr-missing-spot)}.key.wrong-spot{background-color:var(--clr-wrong-spot)}.key.correct-spot{background-color:var(--clr-correct-spot)}@media (hover: none){.key:hover{background-color:var(--clr-keyboard)}}#notification{display:flex;flex-direction:column;align-items:center;position:fixed;top:10vh;left:50vw;z-index:1;transform:translate(-50%)}.alert{padding:1.5em;margin-bottom:.5em;background-color:var(--clr-alert-bg);color:var(--clr-alert-text);opacity:1;font-size:1.2em;font-weight:700;text-transform:uppercase;text-align:center;border-radius:.25em;pointer-events:none;transition:opacity .5s ease-in-out}.alert:last-child{margin-bottom:0}.alert.hide{opacity:0}#score-text{display:flex;justify-content:space-around;align-items:center;color:var(--clr-score-text);font-weight:700;text-transform:uppercase}