@import 'tailwindcss';

:root {
  --background: #000000;
  --foreground: #ffffff;

  
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@layer utilities {
  .flex-center {
    @apply flex items-center justify-center;
  }
  .flex-col-center {
    @apply flex flex-col items-center justify-center;
  }
  .flex-between {
    @apply flex items-center justify-between;
  }
  .boundary {
    @apply max-w-7xl mx-auto px-4 md:px-8 lg:px-12 xl:px-20;
  }
  .text-brand {
    @apply text-[#00BB77]
  }
  .hover-text {
    @apply hover:text-[#00BB77]
  }
  .hover-border {
    @apply hover:border-2  hover:border-[#00BB77]
  }
  .bg-brand {
    @apply bg-[#166E4E];
  }
  .bg-brand-secondary {
    @apply bg-[#00BB77];
  }
  .bg-primary {
   @apply bg-[#1C1C1C];
  }
  .bg-secondary {
    @apply bg-[#0A0A0A];
  }

  .h1{
    @apply text-5xl lg:text-6xl xl:text-7xl
  }
}



body {
  background: var(--background);
  color: var(--foreground);
  span {
    color: #00BB77;
    padding-left: 8px;;
  }

  .scroll-container::-webkit-scrollbar {
  display: none;
}

}
