@media (max-width: 32.5em) {
  body {
    font-size: 1.6rem;
  }

  .heading {
    font-size: 1.6rem;
    margin-bottom: 1.6rem;
  }

  .password-container {
    padding: 1.6rem;
    margin-bottom: 1.6rem;
  }

  .password {
    font-size: 2.4rem;
  }

  .icon-copy svg {
    width: 1.8rem;
    height: 2rem;
  }

  .generate-container {
    padding: 1rem 1.6rem;
  }

  .length-wrapper label {
    margin-bottom: 0.5rem;
  }

  #length-text {
    font-size: 2.4rem;
  }

  .row {
    gap: 2rem;
  }

  .strength-wrapper {
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.6rem;
  }

  .strength-level {
    font-size: 1.8rem;
  }

  .btn {
    padding: 1.6rem 3.2rem;
    margin-bottom: 0.8rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .icon-copy svg:hover {
    stroke: #fff;
    transform: translateY(-0.2rem);
  }

  input[type="range"]:hover::-webkit-slider-thumb {
    border: 2px solid var(--color-green);
    background-color: currentColor;
  }

  input[type="range"]:hover::-moz-range-thumb {
    border: 2px solid var(--color-green);
    background-color: currentColor;
  }

  input[type="checkbox"]:hover {
    border: 0.15em solid var(--color-green);
  }

  .btn:hover {
    background-color: var(--color-grey-800);
    color: var(--color-green);
    border: 2px solid var(--color-green);
    transform: translateY(-0.2rem);
  }

  .btn:hover .icon-arrow-right svg {
    fill: var(--color-green);
  }
}