/* ////////////// */
/* MEDIA QUERIES */
/* ////////////// */

/* BELOW 800px */
@media screen and (max-width: 50em) {
  .game-container {
    column-gap: 1.4rem;
    row-gap: 1.4rem;
    padding: 1.2rem;
  }

  .icon-container {
    width: 6.4rem;
  }

  .score-timer-container h2 {
    padding: 1.6rem 2.4rem;
    font-size: 1.4rem;
    letter-spacing: 1px;
  }
}

/* BELOW 600px */
@media screen and (max-width: 38em) {
  .container {
    width: 95%;
  }

  .game-container {
    column-gap: 1rem;
    row-gap: 1rem;
    padding: 1rem;
  }

  .icon-container {
    width: 4.8rem;
  }

  .icon {
    font-size: 2.8rem;
  }

  .win-message {
    font-size: 3.6rem;
  }
}

/* BELOW 400px */
@media screen and (max-width: 25em) {
  .container {
    width: 95%;
  }

  .game-container {
    column-gap: 0.6rem;
    row-gap: 0.6rem;
    padding: 1rem;
  }

  .icon-container {
    width: 4rem;
  }

  .icon {
    font-size: 2.4rem;
  }

  .score-timer-container h2 {
    padding: 1.4rem;
    font-size: 1.2rem;
  }
}

/* BELOW 300px */
@media screen and (max-width: 19em) {
  .container {
    width: 95%;
  }

  .game-container {
    column-gap: 0.4rem;
    row-gap: 0.4rem;
    padding: 0.8rem;
  }

  .icon-container {
    width: 3rem;
    height: 3rem;
  }
  .icon {
    font-size: 1.8rem;
  }

  .score-timer-container h2 {
    padding: 1rem;
    font-size: 1rem;
    text-align: center;
  }

  .win-message {
    font-size: 2.8rem;
  }

  .restart-btn {
    font-size: 1rem;
  }
}