body {
  font-family: "Andika", "IBM Plex Sans KR", serif !important;
}

section {
  margin: 0 4px;
}

@media screen and (min-width: 640px) {
  section {
    margin: 0 auto;
    max-width: 632px;
  }
}

.alphabet-decorative {
  color: var(--pink-light);
  text-shadow: 0px 0px 0.25rem var(--pink-med), 0px 0px 0.125rem var(--pink-dark);
  font-weight: bold;
  font-size: 2rem;
  line-height: 2rem;
  padding: 1rem;
  text-align: center;
  letter-spacing: -5%;
}

table {
  margin: 4px;
  border: 2px solid var(--gray);
  background: var(--white);
  border-spacing: 2px;
  border-radius: 8px;
  padding: 6px;
}

th,
td {
  text-align: left;
  border: 1px dotted var(--gray);
  padding: 2px;
}

.stackHoriz {
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

button, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

button {
  background: var(--aqua-light);
  border: 2px outset var(--aqua-light);
  border-radius: 4px;
}

button:active {
  border-style: inset;
}

.textAreaWrapper {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  padding: 4px;
  min-height: 6rem;
}

textarea {
  flex: 1 0 auto;
  resize: none;
  border: 2px solid var(--gray);
  border-radius: 8px;
}

#keyboard {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  padding: 4px;
}

#keyboard > .keyRow {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: stretch;
  min-height: 2.5rem;
  gap: 0.25rem;
  flex-wrap: wrap;
}

#keyboard > .keyRow > button {
  flex: 1 1 auto;
}

#keyboard > .keyRow > button > b {
  font-weight: 400;
}

#keyboard > .keyRow > button > span {
  display: none;
}

#keyboard > .keyRow > button.specialKey {
  background-color: lch(from var(--aqua-light) l c calc(h - 110));
  border-color: lch(from var(--aqua-light) l c calc(h - 110));
}

#keyboard > .keyRow > button.specialKey > b {
  font-weight: 700;
}
/* don't do this at least not by default
#keyboard > .keyRow > button.specialKey > span {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  font-family: monospace;
  font-size: 0.75rem;
  padding: 0 0.125rem;
  margin-left: 0.125rem;
}
*/