:root { --color-no-letter-bg: #666; --color-no-letter-fg: #fff; --color-has-letter-bg: #dd4; --color-has-letter-fg: #000; --color-right-letter-bg: #4b4; --color-right-letter-fg: #fff; } body { height: 100vh; display: flex; flex-direction: column; } main { flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; } main > div:first-child { flex-grow: 1; } div.playfield { text-align: center; font-size: 1.5rem; } div.playfield div[data-playfield-target="topMessage"] { font-weight: bold; } div.playfield div[data-playfield-target="playfield"] { margin-block: 1rem; font-size: 3rem; } div.keyboard > div { display: flex; justify-content: space-around; } div.keyboard button { width: 9vw; border-radius: 2px; height: 4rem; text-transform: uppercase; background: #bbb; color: #000; border: solid 1px #444; } div.keyboard > div:nth-child(2) { margin-inline: 2vw; } div.keyboard > div:nth-child(3) { margin-inline: 4vw; } button[data-keyboard-target="key"].right-pos { background: var(--color-right-letter-bg); color: var(--color-right-letter-fg); } button[data-keyboard-target="key"].right-char { background: var(--color-has-letter-bg); color: var(--color-has-letter-fg); } button[data-keyboard-target="key"].miss { background: var(--color-no-letter-bg); color: var(--color-no-letter-fg); } div.playfield div.row { display: flex; justify-content: center; } div.playfield div.row span { display: inline-block; border: solid thin gray; height: 1.1em; width: 1.1em; line-height: 1.1em; margin: 5px; } div.playfield div.row span.right-pos { background: var(--color-right-letter-bg); color: var(--color-right-letter-fg); } div.playfield div.row span.right-char { background: var(--color-has-letter-bg); color: var(--color-has-letter-fg); } div.playfield div.row span.miss { background: var(--color-no-letter-bg); color: var(--color-no-letter-fg); } div.overlay { position: fixed; bottom: 25%; left: 10%; right: 10%; z-index: 10; display: none; justify-content: center; } div.overlay.show { display: flex; } div.overlay-message { font-size: 2rem; line-height: 2.2rem; text-align: center; color: white; background-color: rgba(0, 0, 0, 70%); border-radius: 5px; padding-block: 12px; padding-inline: 20px; } .hide { display: none; }