/*
 * The media queries in this file are sorted, regardless of its changes, by
 * - ascending min-width
 * - ascending max-width
 */

/**
 *
 * Size increase
 *
 */

@media screen and (min-width: 300px) {
  .game-new {
    font-size: 0.85em;
  }
  .deck .card.flipped {
    font-size: 10vmin;
  }

  .footer-credits {
    font-size: 0.75em;
  }
}

/**
 *
 * Size increase
 *
 */

@media screen and (min-width: 500px) {
  .game-restart {
    font-size: 6.5vmin;
  }

  .deck {
    padding: 1em;
  }

  .deck .card {
    box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
    border: 4px solid #ead5ff;
  }

  .game-new {
    font-size: 1.15em;
  }

  .footer-credits {
    font-size: 0.9em;
  }

  .modal-close {
    font-size: 1em;
  }
}

/**
 *
 * Size increase
 *
 */

@media screen and (min-width: 600px) {
  .score-panel {
    font-size: 4.5vmin;
  }

  .game-restart {
    font-size: 7vmin;
  }

  .deck .card.flipped {
    font-size: 11vmin;
  }

  .modal-content {
    width: 80vw;
    font-size: 30px;
  }

  footer {
    width: 70vw;
  }
}

/**
 *
 * Size increase
 *
 */

@media screen and (min-width: 800px) {
  h1 {
    font-size: 4.75em;
  }

  .score-panel {
    font-size: 6vmin;
  }

  .game-restart {
    font-size: 8vmin;
  }

  .deck .card.flipped {
    font-size: 13vmin;
  }

  .game-new {
    font-size: 1.6em;
  }

  .footer-credits {
    font-size: 1em;
  }

  .modal-content {
    width: 75vw;
  }

  .modal-text {
    margin: 5% 3% 5% 3%;
  }
}

/**
 *
 * Size increase
 *
 */

@media screen and (min-width: 1000px) {
  h1 {
    font-size: 6em;
  }

  .game-new {
    font-size: 1.8em;
  }

  .footer-credits {
    font-size: 1.2em;
  }
}