section.animation {
    width: 100vw; 
    height: 100vh; 
    background-color: #4d4d4d;
    position: fixed;
    top: 0;
    z-index: 20;
 
    display: flex;
    justify-content: center;
    align-items: center; 
   
  
  }


@media(max-width:500px){
  section.animation{
    display:none;
  }
}

  /* .animation-font {
    margin: 2rem;
    stroke-linejoin: round;
    fill: #0f0;
    stroke: #0f0;
    stroke-width: 10;
  } */

.kerning {
  margin: 0.3rem;
    stroke-linejoin: round;
    /* border-radius:10%; */
    stroke-width: 50;
}

#first {
  stroke-dasharray: 433px;
  stroke-dashoffset: 433px;
  animation: fadeInside 0.4s forwards ease-in;
}

#second {
  stroke-dasharray: 203px;
  stroke-dashoffset: 203px;
  animation: fadeInside 0.4s forwards ease-in 0.2s;
}

#third {
  stroke-dasharray: 220px;
  stroke-dashoffset: 220px;
  animation: fadeInside 0.4s forwards ease-in 0.25s;
}

#forth {
  stroke-dasharray: 203px;
  stroke-dashoffset: 203px;
  animation: fadeInside 0.4s forwards ease-in 0.3s;
}

#five {
  stroke-dasharray: 398px;
  stroke-dashoffset: 398px;
  animation: fadeInside 0.4s forwards ease-in 0.35s;
}

#six{
  stroke-dasharray: 512px;
  stroke-dashoffset: 512px;
  animation: fadeInside 0.4s forwards ease-in 0.4s;
}

#seven {
  stroke-dasharray: 314px;
  stroke-dashoffset: 314px;
  animation: fadeInside 0.4s forwards ease-in 0.45s;
}

#eight {
  stroke-dasharray: 203px;
  stroke-dashoffset: 203px;
  animation: fadeInside 0.4s forwards ease-in 0.5s;
}

#nine {
  stroke-dasharray: 398px;
  stroke-dashoffset: 398px;
  animation: fadeInside 0.4s forwards ease-in 0.55s;
}

#ten {
  stroke-dasharray: 455px;
  stroke-dashoffset: 455px;
  animation: fadeInside 0.4s forwards ease-in 0.6s;
}

#eleven {
  stroke-dasharray: 401px;
  stroke-dashoffset: 401px;
  animation: fadeInside 0.4s forwards ease-in 0.65s;
}

#twelve {
  stroke-dasharray: 434px;
  stroke-dashoffset: 434px;
  animation: fadeInside 0.4s forwards ease-in 0.7s;
}

#thirteen {
  stroke-dasharray: 203px;
  stroke-dashoffset: 203px;
  animation: fadeInside 0.4s forwards ease-in 0.75s;
}

#fourteen {
  stroke-dasharray: 444px;
  stroke-dashoffset: 444px;
  animation: fadeInside 0.4s forwards ease-in 0.8s;
}

#fifteen {
  stroke-dasharray: 455px;
  stroke-dashoffset: 455px;
  animation: fadeInside 0.4s forwards ease-in 0.85s;
}


@keyframes fadeInside {
  to {
    stroke-dashoffset: 0px;
  }
  
}

@keyframes fill{
  from{
    fill:transparent;
  }
  to{
    fill: white;
  }
}

@media(min-width:400px)  {
  .animation{
      margin-top: 20px;
  }
}