/* Define vars */

:root {
  --incorrect-color: rgb(59 57 57);
  --semicorrect-color: rgb(173, 173, 47);
  --correct-color: rgb(2, 158, 2);
  --tile-background-color: rgb(33, 29, 29)
}

/* Tiles */

.tile{
  border: 5px solid black;
  background-color: rgb(33, 29, 29);
  border-radius: 2px;
  display: inline-block;
  position: relative;
}

.dark-theme-tile{
  background-color: white;
}

.tile::before {
  content: '';
  display: block;
  padding-bottom: 55px;
  padding-left: 55px;
}

/* Mobile */

@media (min-width:541px) {
  .tile-letter{
    font-size: 1.6em;
  }
}

@media (max-width:540px) {
  .tile::before{
    padding-bottom: 40px;
    padding-left: 40px;  
  }
  .tile-letter{
    font-size: 1.4em;
  }
}

@media (max-width:388px) {
  .tile::before{
    padding-bottom: 30px;
    padding-left: 30px;  
  }
  .tile-letter{
    font-size: 1.2em;
  }
}

@media (max-width:320px) {
  .tile::before{
    padding-bottom: 15px;
    padding-left: 15px;  
  }
  .tile-letter{
    font-size: 0.9em;
  }
}

/* Tile letters */

.tile-letter{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 500;
  text-transform: uppercase;
}

/* Answer colors */

.incorrect{
  background-color: var(--incorrect-color, gray);
}

.semicorrect{
  background-color: var(--semicorrect-color, yellow);
}

.correct{
  background-color: var(--correct-color, green);
}