@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap');

.hero-bg {
  background: #181818;
  position: relative;
}
.hero-blob {
  position: absolute;
  border-radius: 9999px;
  background: #C6FF00;
  opacity: 0.18;
  z-index: 1;
}
.hero-blob-1 { width: 320px; height: 320px; top: 10%; left: -7%; }
.hero-blob-2 { width: 140px; height: 140px; top: 70%; left: 8%; }
.hero-blob-3 { width: 90px; height: 90px; top: 25%; left: 38%; }

.hero-handwritten {
  font-family: 'Caveat', cursive;
  font-size: 2.5rem;
  color: #C6FF00;
  font-weight: 700;
  display: inline-block;
  line-height: 1;
  margin-left: 0.3em;
}

.hero-arrow {
  font-family: 'Caveat', cursive;
  color: #C6FF00;
  font-size: 2.2rem;
  margin-top: 0.3em;
  margin-left: 1.5em;
  display: block;
}

@media (max-width: 768px) {
  .hero-blob-1 { width: 180px; height: 180px; top: 2%; left: -15%; }
  .hero-blob-2 { width: 80px; height: 80px; top: 65%; left: 5%; }
  .hero-blob-3 { width: 50px; height: 50px; top: 18%; left: 55%; }
  .hero-handwritten { font-size: 1.5rem; }
  .hero-arrow { font-size: 1.2rem; }
}