@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary: #ed2e53;
  --secondary: #000c22;
  --alt: #dee4ff;
  --accent: #15002e;
  --white: #fff;
  --black: #020d1c;
  --gray: #707070;
  --light_gray: #f9f9fa;
  --medium_gray: #ededed;
  --border_gray: #cdcdcd;
  --separator: #b1b1b1;
  --dark_gray: #141414;
  --pink: #DCA4CB;
  --light_pink: #FFE6F8;
  --yellow: #FAE0C7;
}



@layer components {
  .container {
    @apply mx-auto w-11/12;
    max-width: 75rem !important;
  }

  h1 {
    @apply text-4xl md:text-5xl lg:text-6xl xl:text-7xl;
  }
  h2 {
    @apply text-2xl font-semibold mb-6;
  }
  h3 {
    @apply text-lg font-semibold mb-4;
  }
  h4 {
    @apply text-base font-semibold mb-4;
  }
  p {
    @apply mb-6;
  }
  li {
    @apply mb-3;
  }

  .degradee{
    @apply bg-degradee bg-clip-text text-transparent;

  }
}