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

.font-starstruck {
  font-family: "Starstruck", sans-serif;
}

.monserrat-light {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.title-gradient {
  background: -webkit-linear-gradient(#fa677a, #000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vertical-text-left {
  writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
}

.grid-template-home {
  grid-template-columns: auto 1fr auto 1fr auto;
  grid-template-rows: auto auto auto auto;
}

.vertical-text-right {
  writing-mode: sideways-rl;
  -ms-writing-mode: sideways-rl;
}

.word-spacing-300 {
  word-spacing: 300%;
}

@keyframes animacionMano {
  0% {
    transform: translateY(0); 
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes particulasXnegativa {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-40px); 
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes particulasXpositiva {
  0% {
    transform: translateX(0); 
  }
  50% {
    transform: translateX(40px); 
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes floatHeart {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(
      -20px
    ); 
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn3 {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.mano-animada {
  animation: fadeIn 4s;
  animation: animacionMano 4s infinite;
}

.particulas-x-negativa {
  animation: fadeIn 4s;
  animation: particulasXnegativa 16s infinite;
}

.particulas-x-positiva {
  animation: fadeIn 4s;
  animation: particulasXpositiva 16s infinite;
}

.animacion-corazon {
  animation: fadeIn 4s;
  animation: floatHeart 3s infinite alternate;
}

.fade-in-1s {
  animation: fadeIn 4s;
}
.fade-in-2s {
  animation: fadeIn2 8s;
}
.fade-in-3s {
  animation: fadeIn3 12s;
}

.muted {
  background-image: url("../img/resources/mute-icon.svg"); 
}

.unmuted {
  background-image: url("../img/resources/unmute-icon.svg"); 
}