

/* HTML predložak kako pisati text da bi se prikazivao kao ova animacija */
/* <h1 class="slogan-h1 logo logo-text" >
              <span>Nadgrobni </span>
              <span>ukrasi </span>
              <span>koji </span>
              <span>kamen </span>
              <span>čine </span>
              <span>spomenikom</span>
            </h1> */

.slogan-h1 {
  transform: scale(0.6);
  animation: text-animacija 3s forwards cubic-bezier(0.5, 1, 0.89, 1) ;
font-style: italic;
color: #55524f;
} 
@keyframes text-animacija {
  100% {
    transform: scale(1);
  }
}

.slogan-h1 span {
  display: inline-block;
  opacity: 0.5;
  /* filter: blur(4px); */
}

.slogan-h1 span:nth-child(1) {
  animation: fade-in 2.5s 0.1s alternate infinite ease-in-out;

}

.slogan-h1 span:nth-child(2) {
  animation: fade-in 2.5s 0.2s alternate infinite ease-in-out;
}

.slogan-h1 span:nth-child(3) {
  animation: fade-in 2.5s 0.3s alternate infinite ease-in-out;
}

.slogan-h1 span:nth-child(4) {
  animation: fade-in 2.5s 0.4s alternate infinite ease-in-out;
}

.slogan-h1 span:nth-child(5) {
  animation: fade-in 2.5s 0.5s alternate infinite ease-in-out;
}

.slogan-h1 span:nth-child(6) {
  animation: fade-in 2.5s 0.6s alternate infinite ease-in-out;
}

@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
