* {
  scroll-behavior: smooth;
}

.bg-cream {
  background-color: #fffdf0;
}

.bg-orange {
  background-color: #ff3737;
}

.bg-orange-50 {
  background-color: #ff8383;
}

.bg-blue {
  background-color: #89d4ff;
}

.bg-gold {
  background-color: #ffc300;
}

.bg-grey {
  background-color: #f9f8f6;
}

.text-gold {
  color: #ffd400;
}

.big-font {
  font-size: 4rem;
}

.hero-section {
  height: 100vh;
}

.features-section {
  height: auto;
}

.card {
  width: 400px;
  height: 460px;
}

.btn-active {
  background-color: #ffffff;
  border: 2px solid #ffc300;
  padding: 5px 15px 5px 15px;
  border-radius: 10px;
}

.btn-active:hover {
  background-color: #ebebeb;
}

.btn-unactive {
  background-color: #ffc300;
  padding: 5px 15px 5px 15px;
  border-radius: 10px;
  border: none;
}

.btn-unactive:hover {
  background-color: #ecb500;
}

.alert-main {
  width: 25%;
}

.fredoka-font-bold {
  font-family: "Fredoka", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.fredoka-font-medium {
  font-family: "Fredoka", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.fredoka-font {
  font-family: "Fredoka", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

@media (width <= 48rem) {
  .big-font {
    font-size: 2.8rem;
  }

  .hero-section {
    height: auto;
  }

  .features-section {
    height: auto;
  }

  .card {
    width: 280px;
    height: 350px;
  }

  .alert-main {
    width: 100%;
  }
}

@media (width <= 64rem) {
  .big-font {
    font-size: 2.8rem;
  }

  .hero-section {
    height: auto;
  }

  .features-section {
    height: auto;
  }

  .card {
    width: 280px;
    height: 400px;
  }

  .alert-main {
    width: 100%;
  }
}