@import url('https://fonts.googleapis.com/css2?family=Gilda+Display&display=swap');

.reveal,
.reveal::after {
         animation-delay: 0;
         animation-delay: var(--animation-delay, 2s);
         animation-iteration-count: 1;
         animation-iteration-count: var(--iterations, 1);
         animation-duration: 800ms;
         animation-duration: var(--duration, 800ms);
         animation-fill-mode: both;
         animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}
 
.reveal {
 position: relative;
 /*font-size: 6vw;*/
 animation-name: text;
/* color: #FFF;*/
 white-space: nowrap;
 cursor: default;
 text-transform: uppercase;
 
}
 
.reveal::after {
 content: "";
 position: absolute;
 z-index: 999;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #f2f98b;
         transform: scaleX(0);
         transform-origin: 0 50%;
 pointer-events: none;
         animation-name: revealer;
 }
 


.font-move h1{
    text-align: center;
    margin: 0 auto;
}


.font-move{
    position: relative;
    transition: .5s;
}

.font-move div{
    display: flex;
}

.font-move .letter-span {
    margin-right: 15px;
    font-family: "Gilda Display", serif;
}

.font-move .letter-inner {
  font-weight: 400;
  transition: .5s;
 margin-right: 15px;
  cursor: pointer;
  transition: font-weight 0.3s ease;


}


.font-move h1{
    display: flex;
    width: 100%;
    justify-content: center;
}


.font-move .letter-inner.hovered{
    font-weight: 600;
    transition: font-weight 0.3s ease;
}

footer {
 display: none !important;
}

.home footer {
 display: block !important;
}



@media only screen and (max-width: 767px) {
  
.font-move div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

}





 
 
@keyframes text {
 from {
         clip-path: inset(0 100% 0 0);
 }
 to {
         clip-path: inset(0 0 0 0);
 }
}
 
 
 
 
@keyframes revealer {
 
 0%, 50% {
         transform-origin: 0 50%;
 }
 
 60%, 100% {
         transform-origin: 100% 50%; 
 }
 
 
 60% {
         transform: scaleX(1);
 }
 
 100% {
         transform: scaleX(0);
 }
}