@tailwind base;
@tailwind components;
@tailwind utilities;
@keyframes slide {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@font-face {
  font-family: 'ethnocentric';
  src: url('/fonts/ethnocentric.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


.animate-slide {
  display: flex;
  width: max-content;
  animation: slide 15s linear infinite;
}


.font-gradient {
  background-color: #443b62;
  background-image: linear-gradient(43deg, #302b4b 0%, #8780bc 35%, #302b4b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}



.btn-gradient {
  background-color: #443b62;
  background-image: linear-gradient(43deg, #302b4b 0%, #4b466e 47%, #766fa6 83%, #8780bc 100%);
  color: white;
  padding: 8px 15px;
  border: none;
  cursor: pointer;
  transition: background-image 0.3s ease;
}


.btn-gradient:hover {
  background-image: linear-gradient(43deg, #2a2341 0%, #403c61 47%, #655b90 83%, #7269a6 100%);
}

.social-gradient {
  background-color: #443b62;
  background-image: linear-gradient(43deg, #302b4b 0%, #4b466e 47%, #766fa6 83%, #8780bc 100%);
  color: white;
  padding: 15px 15px;
  border: none;
  cursor: pointer;
  transition: background-image 0.3s ease;
}

.btn-gradient-light {
  background-color: #8780bc;
  background-image: linear-gradient(43deg, #8780bc 0%, #938dc3 15%, #b5b1d7 100%);
  color: purple-50;
  border: none;
  border-radius: 50px;
  font-weight: semibold;
  cursor: pointer;
  transition: background-image 0.3s ease;
}

.social-gradient-light {
  background-color: #8780bc;
  background-image: linear-gradient(43deg, #8780bc 0%, #938dc3 15%, #b5b1d7 100%);
  color: purple-50;
  border: none;
  border-radius: 50px;
  font-weight: semibold;
  cursor: pointer;
  transition: background-image 0.3s ease;
}

.btn-gradient-light:hover {
  background-image: linear-gradient(43deg, #766fa6 0%, #8684b7 15%, #a7a4ca 100%);
}

.social-gradient-light:hover {
  background-image: linear-gradient(43deg, #766fa6 0%, #8684b7 15%, #a7a4ca 100%);
}

/* Darker button  purple green version */
.btn-gradient-dark {
  background-color: #2e2542;
  background-image: linear-gradient(45deg, #5e4589 0%, #5fa69b 100%);
  color: white;
  padding: 8px 15px;
  border: none;
  cursor: pointer;
  transition: background-image 0.3s ease;
}

.btn-gradient-dark:hover {
  background-image: linear-gradient(45deg, #3e2e5d 0%, #487d76 100%);
}

.font-gradient-dark {
  background-color: #5e4589;
  background-image: linear-gradient(45deg, #5e4589 0%, #5fa69b 25%,  #5e4589 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.btn-gradient-lt {
  background-color: #7c65a9;
  background-image: linear-gradient(45deg, #7c65a9 0%, #96d4ca 100%);
  color: white;
  padding: 8px 15px;
  border: none;
  cursor: pointer;
  transition: background-image 0.3s ease;
}

.btn-gradient-lt2 {
  background-color: #7c65a9;
  background-image: linear-gradient(45deg, #9277c6 0%, #a5e9de 100%);
  color: white;
  padding: 8px 15px;
  border: none;
  cursor: pointer;
  transition: background-image 0.3s ease;
}

.btn-gradient-lt:hover {
  background-color: #443b62;
  background-image: linear-gradient(45deg, #705b98 0%, #8bc5bb 100%);
  color: white;
  padding: 8px 15px;
  border: none;
  cursor: pointer;
  transition: background-image 0.3s ease;
}

.social-gradient-lt {
  background-color: #8780bc;
  background-image: linear-gradient(45deg, #7c65a9 0%, #96d4ca 100%);
  color: purple-50;
  border: none;
  border-radius: 50px;
  font-weight: semibold;
  cursor: pointer;
  transition: background-image 0.3s ease;
}

.social-gradient-lt:hover {
  background-image: linear-gradient(45deg, #705b98 0%, #8bc5bb 100%);
}

.bg-cyan-gradient {
  background-color: #3b6162;
  background-image: linear-gradient(43deg, #20434a 0%, #507e7f 47%, #74afae 83%, #5fa69b 100%);
}


.emphasis {
  @apply font-semibold font-gradient-dark bg-clip-text text-transparent;
  }