/* rem and em do NOT depend on html font size in media queries! 
Instead, 1 rem = 1 em = 16px */

/* ********************************** */
/* 944/16 = 59 */
/* BELOW 992px (Tablets) */
/* ********************************** */

@media (max-width: 62em) {
  h1 {
    font-size: 2.5rem;
  }
  .guess {
    width: 20rem;
    font-size: 3rem;
  }
  .check {
    font-size: 1.4rem;
  }
  .right {
    font-size: 1.8rem;
  }
}

/* ********************************** */
/* 704/16 = 44 */
/* BELOW 704px (Phones) */
/* ********************************** */

@media (max-width: 44em) {
  h1 {
    font-size: 1.6rem;
  }
  .between {
    font-size: 0.7rem;
  }
  .guess {
    width: 10rem;
    font-size: 2rem;
  }
  .check {
    font-size: 1rem;
  }
  .right {
    font-size: 0.9rem;
  }
  .again {
    font-size: 1rem;
  }
}