@import url(https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap);:root{--letter-height:30px}body{font-family:'Courier Prime',monospace;background:#f8f8f8}#board,.char-row,.letter,.letter-wrapper,body,html{margin:0;padding:0}#board{width:60%;margin-left:20%;margin-top:calc(50vh - var(--letter-height));display:inline-flex;justify-content:space-evenly}.letter-wrapper{display:inline-block;text-align:center;overflow:hidden;height:var(--letter-height);min-width:calc(5/8 * var(--letter-height));padding:calc((var(--letter-height))/ 2) calc((var(--letter-height))/ 5)}.letter-wrapper:not(.space){border:1px solid #aaa;border-radius:4px;margin:0 calc(1.5/10 * var(--letter-height));box-shadow:rgb(50 50 93 / 30%) 0 15px 15px -20px inset,rgb(0 0 0 / 20%) 0 15px 15px -15px inset,rgb(0 0 0 / 20%) 0 -30px 15px -25px inset;background:#fff}.letter-wrapper.space{clear:right}.letter{position:relative;top:0;transition:top 4s ease-in-out 1s}.char-row{font-size:var(--letter-height);height:var(--letter-height);line-height:var(--letter-height)}.hidden{visibility:hidden}