@import "theme.css?v=60275472-4A5F-46A2-96E1-1B0A73D93C05";
@import "tables.css?v=60275472-4A5F-46A2-96E1-1B0A73D93C05";

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: Geneva, Verdana, sans-serif;
}

.body {
  max-width: 75vh;
}

button, .button {
  border: 1px solid black;
}

.button {
  background-color: #e9e9ed;
  &:hover {
    background-color: #d0d0d7;
  }
}

.active, *:checked ~ label {
  background-color: var(--active) !important;
}

select, button, label {
  cursor: pointer;
}

select, input {
  height: 2rem;
}

#rack {
  font-family: monospace;
}

#board {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-auto-rows: 1fr;
  gap: 2px 2px;

  & .cell {
    aspect-ratio: 1/1;
    background-color: var(--board-color);
    caret-color: transparent;
    &.cell-1 {
      background-color: var(--double-letter-color);
      /* &::after { content: "2L"; } */
    }
    &.cell-2 {
      background-color: var(--double-word-color);
      /* &::after { content: "2W"; } */
    }
    &.cell-3 {
      background-color: var(--triple-letter-color);
      /* &::after { content: "3L"; } */
    }
    &.cell-4 {
      background-color: var(--triple-word-color);
      /* &::after { content: "3W"; } */
    }
    &:focus {
      outline: 2px solid blue;
    }
  }
}

body:not(.direction-down) .cell:focus + .cell::before {
  content: "▸";
}

body.direction-down
  .cell:focus
  + .cell
  + .cell
  + .cell
  + .cell
  + .cell
  + .cell
  + .cell
  + .cell
  + .cell
  + .cell
  + .cell
  + .cell
  + .cell
  + .cell
  + .cell::before {
  content: "▾";
}

#about {
  border: 2px solid black;
  max-width: calc(100% - 1rem);
  margin-top: 25%;
}
@media (48rem <= width) {
  #about {
    max-width: calc(100% - 3rem);
  }
}

#help {
  max-width: 75vh;
}

#donate {
  max-height: calc(100vh - 4rem);
}

/* HTML: <div class="loader"></div> */
.loader {
  display: inline-flex;
}
.loader::after {
  content: "LOREMI PSUMDO LORSIT AMETCO NSECTE TURADI PISCIN GELITS EDDOEI USMODT EMPORI NCIDID UNTUTL ABOREE TDOLOR EMAGNA ALIQUA UTENIM ADMINI MVENIA MQUISN OSTRUD EXERCI TATION ULLAMC OLABOR ISNISI UTALIQ UIPEXE ACOMMO DOCONS EQUATD UISAUT EIRURE DOLORI NREPRE HENDER ITINVO LUPTAT EVELIT ESSECI LLUMDO LOREEU FUGIAT NULLAP ARIATU REXCEP TEURSI NTOCCA ECATCU PIDATA TNONPR OIDENT SUNTIN CULPAQ UIOFFI CIADES ERUNTM OLLITA NIMIDE STLABO";
  font-size: 1.25rem;
  font-family: monospace;
  line-height: 1em;
  height: 1em;
  width: 6ch;
  color: #0000;
  text-shadow: 0 0 0 #000;
  overflow: hidden;
  animation: loading 1s steps(20) infinite;
}
@keyframes loading {
  100% {
    text-shadow: 0 -20em 0 #000;
  }
}