@import url(https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Gugi&display=swap);

/* Idealy we serve the fonts locally like this, but with correct path */
/* @font-face {
  font-family: Quicksand;
  src: url("..fonts/Quicksand/Quicksand-Regular.ttf");
}

@font-face {
  font-family: Gugi;
  src: url("/fonts/Gugi/Gugi-Regular.ttf");
} */

@theme {
  --font-quicksand: "Quicksand", sans-serif;
  --font-gugi: "Gugi", cursive;

  --color-customGreen: rgba(134, 194, 50, 1);
  --color-customGreen-dark: rgba(94, 140, 30, 1);
  --color-customComplimentary: rgba(121, 61, 205, 1);
  --color-darken: rgba(0, 0, 0, 0.3);
  --color-darken-2: rgba(0, 0, 0, 0.4);
  --color-darken-3: rgba(0, 0, 0, 0.5);
  --color-darken-4: rgba(0, 0, 0, 0.6);
  --color-darken-5: rgba(0, 0, 0, 0.7);
  --color-darken-6: rgba(0, 0, 0, 0.8);
  --color-transparent: rgba(0, 0, 0, 0);

  --animate-border-fade-in-out: borderFade 4s ease-in-out infinite;

  @keyframes borderFade {
    0%,
    100% {
      border-color: transparent;
    }
    50% {
      border-color: currentColor;
    }
  }
}

@theme inline {
  --gradient-green1: linear-gradient(
    90deg,
    rgba(134, 194, 50, 1) 0%,
    rgba(94, 140, 30, 1) 100%
  );
}

@import "tailwindcss";

/* @import "@fontsource/quicksand";
@import "@fontsource/gugi"; */

/*@layer base {*/
/*  h1 {*/
/*    @apply text-5xl font-bold;*/
/*  }*/

/*  h2 {*/
/*    @apply text-4xl font-semibold;*/
/*  }*/

/*  h3 {*/
/*    @apply text-3xl font-medium;*/
/*  }*/

/*  h4 {*/
/*    @apply text-2xl font-normal;*/
/*  }*/

/*  h5 {*/
/*    @apply text-xl font-light;*/
/*  }*/

/*  h6 {*/
/*    @apply text-lg font-thin;*/
/*  }*/
/*}*/

@layer base {
  h1 {
    font-size: var(--text-4xl);
  }
  h2 {
    font-size: var(--text-2xl);
  }
  h3 {
    font-size: var(--text-xl);
  }
  h4 {
    font-size: var(--text-xl);
  }
  input {
    @apply pl-4 mr-2 focus:ring-customGreen focus:outline-none focus:ring-2 rounded-md bg-neutral-900 border border-neutral-600 gap-3;
  }
  select {
    @apply pl-4 mr-2 focus:ring-customGreen focus:outline-none focus:ring-2 rounded-md bg-neutral-900 border border-neutral-600  gap-3;
  }
  button {
    @apply cursor-pointer;
  }
}

body {
  color: rgb(225, 225, 225); /* Apply the white text color */
  background: linear-gradient(rgb(12, 12, 12), rgb(20, 20, 20));
}

a {
  color: rgba(134, 194, 50, 1);
  /* color: theme(colors.cusotm green) */
  text-decoration: none;
}

a:hover {
  color: white;
  cursor: pointer;
}

.combobox-options {
  max-height: 20em !important;
  overflow-y: auto;
}

/* a:hover .video-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 1; 
  pointer-events: none; 
}

.video-overlay * {
  pointer-events: auto;
} */
/* 
nav {
  position: relative;
  z-index: 10; } */
/* 
nav .block {
  z-index: 20; 
} */

/* Hide video overlay when mobile navbar is active */
@media (max-width: 768px) {
  .navbar-active .video-overlay {
    display: none;
  }
}
@keyframes gradientShift {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 0%;
  }
}

/* Fancy Effects  */

@keyframes sine-wave {
  0% {
    border-color: rgba(134, 194, 50, 1);
  }
  25% {
    border-color: rgba(154, 210, 70, 1);
  }
  50% {
    border-color: rgba(174, 230, 90, 1);
  }
  75% {
    border-color: rgba(154, 210, 70, 1);
  }
  100% {
    border-color: rgba(134, 194, 50, 1);
  }
}

@keyframes sine-wave-text {
  0%,
  100% {
    color: rgba(134, 194, 50, 1);
  }
  25% {
    color: rgba(154, 210, 70, 1);
  }
  50% {
    color: rgba(174, 230, 90, 1);
  }
  75% {
    color: rgba(154, 210, 70, 1);
  }
}

.animate-sine-wave {
  animation: sine-wave 5s ease-in-out infinite;
}

.animate-sine-wave-text {
  animation: sine-wave-text 5s ease-in-out infinite;
}

.dividing-line {
  position: relative;
  width: 100%;
  height: 10px;
  background: linear-gradient(
    25deg,
    transparent 48%,
    rgba(134, 194, 50, 1) 48%,
    rgba(134, 194, 50, 1) 52%,
    transparent 52%
  );
}

.dividing-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(134, 194, 50, 1) 20%,
    rgba(134, 194, 50, 1) 80%,
    transparent 100%
  );
  clip-path: polygon(0% 100%, 20% 50%, 80% 50%, 100% 0%);
}

.dividing-line1 {
  position: relative;
  width: 100%;
  height: 10px;
  background: linear-gradient(
    25deg,
    transparent 48%,
    rgba(134, 194, 50, 1) 48%,
    rgba(134, 194, 50, 1) 52%,
    transparent 52%
  );
}

.dividing-line1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(134, 194, 50, 1) 20%,
    rgba(134, 194, 50, 1) 80%,
    transparent 100%
  );
  clip-path: polygon(0% 100%, 20% 50%, 80% 50%, 100% 0%);
}

.dividing-line2 {
  position: relative;
  width: 100%;
  height: 10px;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(134, 194, 50, 1) 40%,
    rgba(134, 194, 50, 1) 60%,
    transparent 60%
  );
}

.dividing-line2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(134, 194, 50, 1) 10%,
    rgba(134, 194, 50, 1) 90%,
    transparent 100%
  );
  clip-path: polygon(0% 100%, 10% 50%, 90% 50%, 100% 0%);
}
.dividing-line3 {
  position: relative;
  width: 100%;
  height: 50px;
  background: linear-gradient(
    120deg,
    rgba(134, 194, 50, 1) 25%,
    transparent 25%
  );
  clip-path: polygon(0% 0%, 100% 100%, 100% 100%, 0% 100%);
}

.dividing-line4 {
  position: relative;
  width: 100%;
  height: 10px;
  background: repeating-linear-gradient(
    135deg,
    rgba(134, 194, 50, 1),
    rgba(134, 194, 50, 1) 10px,
    transparent 10px,
    transparent 20px
  );
}

.dividing-line5 {
  position: relative;
  width: 100%;
  height: 60px;
  background: linear-gradient(
    240deg,
    rgba(134, 194, 50, 1) 75%,
    transparent 75%
  );
  clip-path: polygon(100% 0%, 0% 100%, 100% 100%, 100% 0%);
}

.dividing-line6 {
  position: relative;
  width: 100%;
  height: 70px;
  background: linear-gradient(
    135deg,
    rgba(134, 194, 50, 1) 50%,
    transparent 50%
  );
  clip-path: polygon(0% 0%, 50% 100%, 100% 0%, 100% 100%, 0% 100%);
}

.dividing-line7 {
  position: relative;
  width: 100%;
  height: 20px;
  background: repeating-linear-gradient(
    45deg,
    rgba(134, 194, 50, 1),
    rgba(134, 194, 50, 1) 5px,
    transparent 5px,
    transparent 10px
  );
}
.dividing-line8 {
  position: relative;
  width: 100%;
  height: 80px;
  background: linear-gradient(
    160deg,
    rgba(134, 194, 50, 1) 40%,
    transparent 40%
  );
  clip-path: polygon(0% 0%, 50% 80%, 100% 0%, 100% 100%, 0% 100%);
}

.dividing-line9 {
  position: relative;
  width: 100%;
  height: 50px;
  background: linear-gradient(
    30deg,
    rgba(134, 194, 50, 1) 50%,
    transparent 50%
  );
  clip-path: polygon(0% 100%, 100% 0%, 100% 100%, 0% 100%);
}
