/* 2xL - LARGE SCREANS: 1536px < MORE */
@media (max-width: 101rem) {
  /* 1616px */
  html {
    font-size: 56.25%;
    /* 9px / 16px = 56.25% */
  }

  .easy-mode {
    row-gap: 1rem;
    column-gap: 1rem;
  }

  .answer-container {
    margin-top: 2rem;
  }
}

/* XL - LARGE LAPTOPS: 1280px - 1536px */
@media (max-width: 89rem) {
  /* 1420px / 16px = 89rem */
  /* 89rem * 16px = 1424px */

  html {
    font-size: 50%;
    /* 8px / 16px = 50% */
  }
}

/* LG - SMALL LAPTOPS: 1024px - 1280px */
@media (max-width: 79rem) {
  /* 1264px */
  .easy-mode {
    display: flex;
    flex-direction: column;
  }

  .easy-mode.hidden {
    display: none;
  }
}

/* MD - TABLETS: 768px - 1024px */
@media (max-width: 61rem) {
  /* 976px */
  html {
    font-size: 43.75%;
    /* 7px / 16px = 43.75% */
  }

  .main-header {
    top: 42%;
  }

  .label-answer {
    margin-bottom: 2rem;
  }

  .unit {
    display: none;
  }

  .again {
    top: 1rem;
    left: 1rem;
  }

  .mods-container {
    top: 2%;
    margin-left: 0;
    padding-left: 1rem;
  }
}