@import "tailwindcss";

@layer base {
  html {
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  }
}

@layer utilities {
  .font-display {
    font-family: "Playfair Display", Georgia, serif;
  }

  .organic-blob {
    border-radius: 46% 54% 39% 61% / 42% 37% 63% 58%;
  }

  .hero-peach-blob {
    border-radius: 47% 53% 39% 61% / 34% 34% 66% 66%;
  }

  .hero-peach-blob::before,
  .hero-peach-blob::after {
    content: "";
    position: absolute;
    background: #ffd2bb;
    z-index: -1;
  }

  .hero-peach-blob::before {
    width: 185px;
    height: 165px;
    right: -66px;
    top: 120px;
    border-radius: 58% 42% 42% 58% / 47% 38% 62% 53%;
  }

  .hero-peach-blob::after {
    width: 190px;
    height: 160px;
    right: 10px;
    bottom: -42px;
    border-radius: 44% 56% 61% 39% / 54% 38% 62% 46%;
  }

  .hero-photo-blob {
    border-radius: 45% 55% 39% 61% / 35% 34% 66% 65%;
  }
}