@import url('https://fonts.googleapis.com/css2?family=Sevillana&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;


.fire-text {
  color: #f5f5f5;
  text-shadow: 0px -2px 4px #fff, 0px -2px 10px #FF3, 0px -10px 20px #F90, 0px -20px 40px #C33;
  animation: burning 6s infinite;
}

@keyframes burning {
  0%, 100% {
    text-shadow: 0px 0px 2px #fff; /* Início e fim com sombra muito sutil */
  }
  25% {
    text-shadow: 0px -1px 2px #fff, 0px -1px 5px #FF6, 0px -5px 10px #F93, 0px -10px 20px #C44;
  }
  50% {
    text-shadow: 0px -2px 4px #fff, 0px -2px 10px #FF3, 0px -10px 20px #F90, 0px -20px 40px #C33; /* Pico da animação com a sombra de fogo completa */
  }
  75% {
    text-shadow: 0px -1px 2px #fff, 0px -1px 5px #FF6, 0px -5px 10px #F93, 0px -10px 20px #C44;
  }
}

.purple-fire-text {
  color: #f5f5f5;
  text-shadow: 0px -2px 4px #fff, 0px -2px 10px #B23AEE, 0px -10px 20px #8A2BE2, 0px -20px 40px #7D26CD;
  animation: purple-burning 6s infinite;
}

@keyframes purple-burning {
  0%, 100% {
    text-shadow: 0px 0px 2px #fff; /* Início e fim com sombra muito sutil */
  }
  25% {
    text-shadow: 0px -1px 2px #fff, 0px -1px 5px #B23AEE, 0px -5px 10px #8A2BE2, 0px -10px 20px #7D26CD;
  }
  50% {
    text-shadow: 0px -2px 4px #fff, 0px -2px 10px #B23AEE, 0px -10px 20px #8A2BE2, 0px -20px 40px #7D26CD; /* Pico da animação com a sombra de fogo completa */
  }
  75% {
    text-shadow: 0px -1px 2px #fff, 0px -1px 5px #B23AEE, 0px -5px 10px #8A2BE2, 0px -10px 20px #7D26CD;
  }
}

@keyframes borderAnimation {
  0% {
    border-color: red;
  }
  25% {
    border-color: green;
  }
  50% {
    border-color: blue;
  }
  75% {
    border-color: yellow;
  }
  100% {
    border-color: red;
  }
}

.border-animate {
  animation: borderAnimation 4s linear infinite;
}


.video-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px; /* Ajuste a altura do efeito de opacidade */
  background: linear-gradient(to bottom, transparent, black);
}

.cursive {
  font-family: 'Sevillana', cursive;
}
.welcome-text {
  background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 0.4)
    ),
    linear-gradient(90.01deg, #e59cff 0.01%, #ba9cff 50.01%, #7d97f7 100%);
  background-blend-mode: normal, screen;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.welcome-box {
  isolation: isolate;
  overflow: hidden;
  align-items: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 32px;
  box-shadow: inset 0 -7px 11px #a48fff1f;
  display: flex;

  position: relative;
  width: -moz-max-content;
  width: max-content;
  transition: 0.45s cubic-bezier(0.6, 0.6, 0, 1) box-shadow;
}

.button-primary {
  background: linear-gradient(
      180deg,
      rgba(60, 8, 126, 0) 0%,
      rgba(60, 8, 126, 0.32) 100%
    ),
    rgba(113, 47, 255, 0.12);
  box-shadow: inset 0 0 12px #bf97ff3d;
}
.button-primary:hover {
  background: linear-gradient(
      180deg,
      rgba(60, 8, 126, 0) 0%,
      rgba(60, 8, 126, 0.42) 100%
    ),
    rgba(113, 47, 255, 0.24);
  box-shadow: inset 0 0 12px #bf97ff70;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hidden {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

/* Estilizando a scrollbar para todos os elementos */
* {
  /* Parte da scrollbar onde você não está segurando */
  scrollbar-width: thin;
  scrollbar-color: rgba(136, 84, 208, 0.7) rgba(74, 36, 109, 0.5);
}

/* Estilizando a scrollbar para Chrome, Edge e Safari */
*::-webkit-scrollbar {
  width: 12px; /* Largura da scrollbar */
}

*::-webkit-scrollbar-track {
  background: rgba(74, 36, 109, 0.5); /* Cor de fundo da track */
}

*::-webkit-scrollbar-thumb {
  background-image: linear-gradient(
    to bottom,
    rgba(136, 84, 208, 0.7), /* Cor no topo */
    rgba(74, 36, 109, 0.5) /* Cor na base */
  );
  border-radius: 6px; /* Arredondamento das bordas da scrollbar */
}

*::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(
    to bottom,
    rgba(136, 84, 208, 1), /* Cor no topo quando hover */
    rgba(74, 36, 109, 0.7) /* Cor na base quando hover */
  );
}


*, html {
  scroll-behavior: smooth !important;
}