@media (max-width: 1200px) {
  .navItems {
    position: absolute;
    right: 20%;
  }
  .card {
    height: 80%;
  }
  .form {
    /* position: absolute; */
    top: 70em;
  }
  #coffeeCan {
    width: 14vw;
    /* height: 100%; */
  }
  #cocaCan {
    width: 25vw;
    height: 120%;
  }
  #fantaCan {
    width: 20vw;
    height: 120%;
  }
}
/* ---------- Tablets ---------- */
@media (max-width: 1024px) {
  .nav {
    gap: 1px;
    justify-content: center;
  }
  .navItems a {
    gap: 1rem;
  }
  .front h1 {
    font-size: 10rem;
  }
  #coffeeCan {
    width: 20vw;
  }
  #coffeeBean1,
  #coffeeBean2,
  #coffeeBean3,
  #coffeeBean4,
  #coffeeBean5 {
    width: 20vw;
  }
  .form {
    width: 60%;
    left: 2rem;
    top: 100rem;
  }
}

/* ---------- Mobiles ---------- */
@media (max-width: 600px) {
  nav h1 {
    font-size: 1.5rem;
  }
  .navItems a {
    font-size: 1rem;
  }
  .front h1 {
    font-size: 5rem;
    text-align: center;
  }
  #coffeeCan {
    width: 40vw;
  }
  #coffeeBean1,
  #coffeeBean2,
  #coffeeBean3,
  #coffeeBean4,
  #coffeeBean5 {
    width: 30vw;
  }
  .menu {
    flex-direction: column;
  }
  .card {
    width: 80%;
    height: 50vh;
  }
  .form {
    width: 80%;
    height: auto;
    top: 140rem;
    left: 10%;
  }
  .form h1 {
    font-size: 2rem;
  }
}