@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&family=Nunito:wght@400;500;600;700;800;900&display=swap');
@import 'tailwindcss';

:root {
  --font-nunito: 'Nunito', sans-serif;
  --radius: 0.75rem;

  --background: 0 0% 100%;
  --foreground: 220 15% 15%;
  --card: 0 0% 100%;
  --card-foreground: 220 15% 15%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 15% 15%;

  --primary: 195 100% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 340 82% 59%;
  --secondary-foreground: 0 0% 100%;
  --muted: 210 20% 96%;
  --muted-foreground: 220 10% 45%;
  --accent: 45 100% 50%;
  --accent-foreground: 220 15% 15%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;

  --border: 210 20% 90%;
  --input: 210 20% 90%;
  --ring: 195 100% 50%;

  --chart-1: 195 100% 50%;
  --chart-2: 340 82% 59%;
  --chart-3: 45 100% 60%;
  --chart-4: 145 65% 45%;
  --chart-5: 270 65% 55%;

  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 195 100% 50%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 210 20% 96%;
  --sidebar-accent-foreground: 220 15% 15%;
  --sidebar-border: 210 20% 90%;
  --sidebar-ring: 195 100% 50%;

  font-family: 'Nunito', sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dark {
  --background: 220 20% 8%;
  --foreground: 0 0% 95%;
  --card: 220 20% 12%;
  --card-foreground: 0 0% 95%;
  --popover: 220 20% 12%;
  --popover-foreground: 0 0% 95%;

  --primary: 195 100% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 340 82% 59%;
  --secondary-foreground: 0 0% 100%;
  --muted: 220 15% 18%;
  --muted-foreground: 220 10% 60%;
  --accent: 45 100% 60%;
  --accent-foreground: 220 15% 15%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;

  --border: 220 15% 20%;
  --input: 220 15% 20%;
  --ring: 195 100% 50%;

  --chart-1: 195 100% 50%;
  --chart-2: 340 82% 59%;
  --chart-3: 45 100% 60%;
  --chart-4: 145 65% 45%;
  --chart-5: 270 65% 55%;

  --sidebar-background: 220 20% 8%;
  --sidebar-foreground: 0 0% 95%;
  --sidebar-primary: 195 100% 50%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 220 15% 18%;
  --sidebar-accent-foreground: 0 0% 95%;
  --sidebar-border: 220 15% 20%;
  --sidebar-ring: 195 100% 50%;
}

* {
  border-color: hsl(var(--border));
  outline-color: hsl(var(--ring) / 0.5);
}

html,
:host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  line-height: inherit;
  background-color: hsl(var(--background));
  font-family: var(--font-nunito);
  color: hsl(var(--foreground));
}

@layer base {

  h1,
  h2,
  h3,
  h4 {
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    line-height: 1.1;
    color: hsl(var(--foreground));
    margin-top: 0.5rem;
    margin-bottom: 0.5em;
  }

  h1 {
    font-size: 2.5rem;
    letter-spacing: -0.02em;
  }

  @media (min-width: 768px) {
    h1 {
      font-size: 4rem;
    }
  }

  h2 {
    font-size: 1.75rem;
    letter-spacing: -0.01em;
  }

  @media (min-width: 768px) {
    h2 {
      font-size: 2.5rem;
    }
  }

  h3 {
    font-size: 1.5rem;
  }

  @media (min-width: 768px) {
    h3 {
      font-size: 2rem;
    }
  }

  h4 {
    font-size: 1.25rem;
  }

  @media (min-width: 768px) {
    h4 {
      font-size: 1.75rem;
    }
  }
}
@keyframes color-splash {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.color-splash-border {
  position: relative;
  border: 2px solid transparent;
}

.color-splash-border::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  margin: -2px;
  border-radius: inherit;
  background: linear-gradient(45deg, #ff0080, #7928ca, #0070f3, #00dfd8, #ff0080);
  background-size: 400% 400%;
  animation: color-splash 3s ease infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.group:hover .color-splash-border::before {
  opacity: 1;
}