*{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
}

body{
      background-color: #000;
      font-family: 'Oswald', sans-serif;
      min-height: 100vh;
      overflow: hidden;
}

.wrapper{
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 65%;
      left: 50%;
      transform: translate(-50%,-50%);
}

.input-group{
      margin: 1rem;
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
}

input,button{
      max-width: 20rem;
      padding: 1rem 2rem;
      font-size: 1.4rem;
      border: none;
      border-radius: .4rem;
}

input:focus{
      outline: 4px solid #FEA47F;
      outline-offset:4px;
}

button{
      cursor: pointer;
      background-color: #FEA47F;
}

select{
      padding: 0 1rem;
}

.letter-wrapper{
      font-size: 12vw;
      letter-spacing: 2vw;
      position: relative;
      pointer-events: none;
}

.animation-stop span{
      animation-play-state: paused;
}


.letter{
      line-height: 1;
      position: absolute;
      left: 0;
      top: 0;
}

.letter:last-child{
      position: relative;
      visibility: hidden;
}

/*
       Animation 
*/ 

.animation-top-to-bottom{
      animation: ans-top-to-bottom 4s var(--delay) infinite cubic-bezier(0.165, 0.84, 0.44, 1);    
}

.animation-top-to-bottom-rotateY{
      animation: ans-top-to-bottom-rotateY 4s var(--delay) infinite cubic-bezier(0.165, 0.84, 0.44, 1);    
}

.animation-top-to-bottom-rotateX{
      animation: ans-top-to-bottom-rotateX 4s var(--delay) infinite cubic-bezier(0.165, 0.84, 0.44, 1);    
}

.animation-top-to-bottom-rotate{
      animation: ans-top-to-bottom-rotate 4s var(--delay) infinite cubic-bezier(0.165, 0.84, 0.44, 1);    
}

.animation-5{
      transform-style: preserve-3d;
      animation: ans-5 4.5s var(--delay) infinite cubic-bezier(0.165, 0.84, 0.44, 1);    
}

.animation-6{
      transform-style: preserve-3d;
      animation: ans-6 4.5s var(--delay) infinite cubic-bezier(0.165, 0.84, 0.44, 1);    
}


@keyframes ans-top-to-bottom{
      0%,20%{
            transform: translateY(0);
      }
      40%,60%{
            transform: translateY(-12vw);

      }
}

@keyframes ans-top-to-bottom-rotateY{
      0%,20%{
            transform: translateY(0);
      }
      40%,60%{
            transform: translateY(-12vw) rotateY(360deg);

      }
}

@keyframes ans-top-to-bottom-rotateX{
      0%,20%{
            transform: translateY(0);
      }
      40%,60%{
            transform: translateY(-12vw) rotateX(360deg);
      }
}

@keyframes ans-top-to-bottom-rotate{
      0%,20%{
            transform: translateY(0);
      }
      40%,60%{
            transform: translateY(-12vw) rotate(360deg);
      }
}

@keyframes ans-5{
      0%,20%{
            transform: translateY(0);
      }

      35%{
            transform:skewX(100deg)
      }

      50%,70%{
            transform: translateY(-12vw) rotate(360deg);
      }

      80%{
            transform:skewX(100deg)
      }
}

@keyframes ans-6{
      0%,20%{
            transform: translateY(0);
      }

      35%{
            transform: translateY(-12vw) scale(1.4);
      }

      50%,70%{
            transform: translateY(-12vw); 
      }

      85%{
            transform: scale(1.4);
      }

}