:root {
    --main-bg-color: #ffffff;
    --main-fg-color: #e3e3e3;
    --correct-color: #58a351;
    --present-color: #c9b458;
    --incorrect-color: #787c7e;
    --evaluated-text-color: var(--main-bg-color);
    --key-text-color: #2e2e2e;
}

html {
    background-color: var(--main-bg-color);
    color: var(--key-text-color);
}

body {
    font-family: sans-serif;
    text-align: center;
    justify-content: center;
    align-items: center;
}

#app {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    overflow: hidden;
}
#board {
    max-width: 300px;
    width: 100%;
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-gap: 6px;
    padding: 10px;
    box-sizing: border-box;
    margin: auto;
}

.row {
    display: grid;
    grid-gap: 7px;
}

.row div {
    aspect-ratio: 1/1;
    outline: 2px solid var(--main-fg-color);
    height: 100%;
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    line-height: 1;
    font-weight: bold;
    vertical-align: middle;
    box-sizing: border-box;
    text-transform: uppercase;
}

div[data-state="present"], button[data-state="present"] {
    color: var(--evaluated-text-color);
    background-color: var(--present-color);
    outline-color: var(--evaluated-text-color);
}

div[data-state="correct"], button[data-state="correct"] {
    color: var(--evaluated-text-color);
    background-color: var(--correct-color);
    outline-color: var(--evaluated-text-color);
}

div[data-state="incorrect"], button[data-state="incorrect"] {
    color: var(--evaluated-text-color);
    background-color: var(--incorrect-color);
    outline-color: var(--evaluated-text-color);
}

.keyboard {
    height: 200px;
    margin: auto;
    max-width: 500px;
    width: 100%;
}

.key-row {
    display: flex;
    width: 100%;
    height: 33%;
}

.key {
    margin: 1%;
    flex: 1;
    display: flex;
    border: none;
    background-color: var(--main-fg-color);
    border-radius: 4px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: bold;
    vertical-align: middle;
    box-sizing: border-box;
    text-transform: capitalize;
    font-family: inherit;
    color: var(--key-text-color);
}

.flipping {
    animation: flip 1s forwards ease-in-out;
}

.popping {
    animation: pop 100ms forwards linear;
}

@keyframes flip {
    0%   {transform: rotateX(0); }
    50%  {transform: rotateX(90deg); }
    100%  {transform: rotateX(0); }
}

@keyframes pop {
    0%   {transform: scale(1, 1); }
    50%  {transform: scale(1.1, 1.1); }
    100%  {transform: scale(1, 1);; }
}

dialog form {
    display: flex;
}

#close-button {
    color: #aaa;
    float: right;
    font-size: 24px;
    font-weight: bold;
}

#close-buttone:hover,
#close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

dialog::backdrop {
    backdrop-filter: blur(3px);
    background: transparent;
}