html {
  cursor:
    url("https://duijvlhczqtcbtnwvrvm.supabase.co/storage/v1/object/public/Beastify/images/cursor.png")
      0 0,
    default;
}

body {
  overflow: hidden;
}

@font-face {
  font-family: "BebasNeue";
  src: url("../assets/fonts/BebasNeue.otf") format("opentype");
  font-weight: 600;
}

.blob {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transform: translate(-140px, -55px) scale(1.3);
  width: 300px;
  height: 300px;
  background: #d8952b;
  /* Blob */
  aspect-ratio: 1;
  clip-path: shape(
    from 20.17% 53.54%,
    curve to 16.73% 35.16% with 17.08% 45.84%,
    smooth to 24.33% 16.16%,
    smooth to 42.83% 15.5%,
    smooth to 62.14% 22.83%,
    smooth to 79.69% 28.15%,
    smooth to 93.39% 44.96%,
    smooth to 84.78% 61.13%,
    smooth to 70.16% 80.72%,
    smooth to 57.12% 91.66%,
    smooth to 40.35% 78.55%,
    smooth to 29.39% 65.16%,
    smooth to 20.17% 53.54%
  );
}

.wavy {
  z-index: -1;
  position: absolute;
  top: 0;
  right: -470px;
  rotate: 300deg;
  scale: 3;
  width: 100%;
  height: 400px;
  background: #d8952b;
  /* Blob */
  clip-path: shape(
    from 0 100%,
    vline to 100px,
    curve to 15% 144px with 10% 191px,
    smooth to 25% 127px,
    smooth to 35% 155.5px,
    smooth to 45% 175.5px,
    smooth to 55% 157px,
    smooth to 65% 61.5px,
    smooth to 75% 74.5px,
    smooth to 85% 107px,
    smooth to 100% 100px,
    vline to 100%,
    hline to 0
  );
}

.heading {
  font-family: "BebasNeue";
  line-height: 1.1;
}

.subhead {
  font-family: "Poppins", sans-serif;
}

/* Explore Now Button */
button {
  --color: #d8952b;
  font-family: inherit;
  display: inline-block;
  width: 8em;
  height: 2.6em;
  position: relative;
  cursor:
    url("https://duijvlhczqtcbtnwvrvm.supabase.co/storage/v1/object/public/Beastify/images/pointer.png")
      0 0,
    default;
  overflow: hidden;
  border: 2px solid var(--color);
  transition: color 0.5s;
  z-index: 1;
  font-size: 18px;
  border-radius: 6px;
  font-weight: 500;
  color: var(--color);
}

button:before {
  content: "";
  position: absolute;
  z-index: -1;
  background: var(--color);
  height: 150px;
  width: 200px;
  border-radius: 50%;
}

button:hover {
  color: #fff;
}

button:before {
  top: 100%;
  left: 100%;
  transition: all 0.7s;
}

button:hover:before {
  top: -30px;
  left: -30px;
}