@media (max-width: 37.5em) {
  .container {
    max-width: 85%;
    min-height: 100vh; /* or try a specific value like 120vh or 80rem */
  }
  .calc {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 3rem;
    transform: translateY(-1.5rem);
  }

  .keys-grid {
    padding-bottom: 2rem;
    row-gap: 1.5rem;
  }

  #calc-box {
    height: 7rem; /* make input box taller if needed */
    width: 100%;
    font-size: 3rem;
    margin-bottom: 1.4rem;
  }
  .theme {
    font-size: 1rem;
    font-weight: 800;
  }

  .theme-numbers {
    font-size: 1rem;
    font-weight: 800;
    gap: 0.9rem;
  }

  .toggle {
    height: 21px;
    width: 60px;
  }
  .slider {
    height: 15px;
    width: 15px;
  }

  /* Move the circle when checked */
  #theme-2:checked ~ .slider {
    transform: translateX(16px);
  }
  #theme-3:checked ~ .slider {
    transform: translateX(36px);
  }

  .keys {
    height: 6rem; /* make buttons taller */
    font-size: 2.6rem;
  }

  .key-del {
    height: 6rem;
    font-size: 1.5rem;
    font-weight: 700;
  }

  .key-reset,
  .key-equal {
    height: 6rem;
    font-size: 1.6rem;
    font-weight: 600;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
  }
}