@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Baloo+2:wght@500;600;700;800&display=swap";

/* src/styles.scss */
:root {
  --watermelon-pink: #ff5d7a;
  --watermelon-red: #ee2f4d;
  --watermelon-red-dark: #b8172f;
  --rind-green: #3fb559;
  --rind-green-light: #6fd97f;
  --dark-green: #14532d;
  --gold: #ffc93c;
  --gold-dark: #e6a014;
  --cream: #fff8ec;
  --font-display:
    "Fredoka",
    "Baloo 2",
    system-ui,
    sans-serif;
  --font-body:
    "Baloo 2",
    "Fredoka",
    system-ui,
    sans-serif;
  --shadow-pop: 0 8px 0 rgba(0, 0, 0, 0.15);
  color-scheme: light;
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  height: 100%;
  margin: 0;
}
body {
  font-family: var(--font-body);
  color: var(--dark-green);
  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(255, 255, 255, 0.55) 0,
      transparent 3%),
    radial-gradient(
      circle at 68% 42%,
      rgba(255, 255, 255, 0.5) 0,
      transparent 3%),
    radial-gradient(
      circle at 34% 76%,
      rgba(255, 255, 255, 0.5) 0,
      transparent 3%),
    radial-gradient(
      circle at 88% 84%,
      rgba(255, 255, 255, 0.55) 0,
      transparent 3%),
    linear-gradient(
      160deg,
      var(--rind-green-light) 0%,
      var(--rind-green) 45%,
      var(--dark-green) 100%);
  background-attachment: fixed;
  background-size:
    140px 140px,
    140px 140px,
    140px 140px,
    140px 140px,
    cover;
  min-height: 100dvh;
  overflow-x: hidden;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  margin: 0;
}
button {
  font-family: var(--font-display);
  -webkit-user-select: none;
  user-select: none;
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-18px);
  }
}
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}
@keyframes wobble {
  0%, 100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg);
  }
}
@keyframes float {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  50% {
    transform: translateY(-26px) translateX(12px) rotate(8deg);
  }
  100% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
}
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
@keyframes pop-in {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  70% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */