.title {
   width: 100%;
   height: 100vh;
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   margin-top: -70px;
   flex-wrap: wrap;
}


.title h1 {
   color: var(--color-lightWhite);
   font-weight: 500;
   font-size: 3.7rem;
   text-align: center;
   margin-bottom: 50px;
   overflow: hidden;
   white-space: nowrap;
   animation: typing 3.5s steps(40, end);
}

@keyframes typing {
   from {
     width: 0;
   }
   to {
     width: 100%;
   }
 }

.title h1 span {
   color: var(--color-green);
   font-size: 2.5rem;

}



.btn-title {
   width: 200px;
   height: 50px;
   margin-top: 70px;
   background-color: var(--color-magenta);
   border: none;
   border-radius: 25px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   transition: 250ms ease-in-out;
}

.btn-title a {
   width: 100%;
   color: var(--color-lightWhite);
   font-size: 1.7rem;
   font-family: 'Press Start 2P', cursive;   
}

.btn-title:hover {
   background-color: var(--color-lightMagenta);
   box-shadow: 0 0 40px var(--color-lightMagenta);
   border: 3px solid var(--color-lightMagenta);
   transition: 250ms ease-in-out;
}