@import url('https://fonts.googleapis.com/css2?family=Odibee+Sans&family=Raleway:wght@100;600&display=swap');
*{
    margin:0;
    padding: 0;
    font-family: 'Odibee Sans', cursive;
}
/* From uiverse.io by @adamgiebl */
button {
    font-family: inherit;
    font-size: 20px;
    background: burlywood;
    color: white;
    padding: 0.7em 1em;
    padding-left: 0.9em;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s;
   }
   
   button span {
    display: block;
    margin-left: 0.3em;
    transition: all 0.3s ease-in-out;
   }
   
   button svg {
    display: block;
    transform-origin: center center;
    transition: transform 0.3s ease-in-out;
   }
   
   button:hover .svg-wrapper {
    animation: fly-1 0.6s ease-in-out infinite alternate;
   }
   
   button:hover svg {
    transform: translateX(1.2em) rotate(45deg) scale(1.1);
   }
   
   button:hover span {
    transform: translateX(5em);
   }
   
   button:active {
    transform: scale(0.95);
   }
   
   @keyframes fly-1 {
    from {
     transform: translateY(0.1em);
    }
   
    to {
     transform: translateY(-0.1em);
    }
   }
   
   
h1{
    font-size: 60px;
}
.another-name{
    /* Centramos el contenido de la sección y determinamos el color de fondo */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: rgb(182, 170, 170);

    
}

.another-name h2 {
  /* Establecemos las características del texto */
 color: hsla(0, 0%, 0%, .9);
 font-weight: normal;
 font-size: 10vmax;
 
 letter-spacing: 5px;
 
 text-align: center;
 text-transform: uppercase;
 top: 50%;
 width: 100%;
 animation: move linear 2000ms infinite;  
}

@keyframes move {
 0% {
   text-shadow:
     4px -4px 0 hsla(0, 100%, 50%, 1), 
     3px -3px 0 hsla(0, 100%, 50%, 1), 
     2px -2px 0 hsla(0, 100%, 50%, 1), 
     1px -1px 0 hsla(0, 100%, 50%, 1),
     -4px 4px 0 hsla(180, 100%, 50%, 1), 
     -3px 3px 0 hsla(180, 100%, 50%, 1), 
     -2px 2px 0 hsla(180, 100%, 50%, 1), 
     -1px 1px 0 hsla(180, 100%, 50%, 1)
   ;
 }
 25% {    
   text-shadow:      
     -4px -4px 0 hsla(180, 100%, 50%, 1), 
     -3px -3px 0 hsla(180, 100%, 50%, 1), 
     -2px -2px 0 hsla(180, 100%, 50%, 1), 
     -1px -1px 0 hsla(180, 100%, 50%, 1),
     4px 4px 0 hsla(0, 100%, 50%, 1), 
     3px 3px 0 hsla(0, 100%, 50%, 1), 
     2px 2px 0 hsla(0, 100%, 50%, 1), 
     1px 1px 0 hsla(0, 100%, 50%, 1)      
   ;
 }
 50% {
   text-shadow:
     -4px 4px 0 hsla(0, 100%, 50%, 1), 
     -3px 3px 0 hsla(0, 100%, 50%, 1), 
     -2px 2px 0 hsla(0, 100%, 50%, 1), 
     -1px 1px 0 hsla(0, 100%, 50%, 1),
     4px -4px 0 hsla(180, 100%, 50%, 1), 
     3px -3px 0 hsla(180, 100%, 50%, 1), 
     2px -2px 0 hsla(180, 100%, 50%, 1), 
     1px -1px 0 hsla(180, 100%, 50%, 1)
   ;
 }
 75% {
   text-shadow:
     4px 4px 0 hsla(180, 100%, 50%, 1), 
     3px 3px 0 hsla(180, 100%, 50%, 1), 
     2px 2px 0 hsla(180, 100%, 50%, 1), 
     1px 1px 0 hsla(180, 100%, 50%, 1),
     -4px -4px 0 hsla(0, 100%, 50%, 1), 
     -3px -3px 0 hsla(0, 100%, 50%, 1), 
     -2px -2px 0 hsla(0, 100%, 50%, 1), 
     -1px -1px 0 hsla(0, 100%, 50%, 1)      
   ;
 }
 100% {
   text-shadow:
     4px -4px 0 hsla(0, 100%, 50%, 1), 
     3px -3px 0 hsla(0, 100%, 50%, 1), 
     2px -2px 0 hsla(0, 100%, 50%, 1), 
     1px -1px 0 hsla(0, 100%, 50%, 1),
     -4px 4px 0 hsla(180, 100%, 50%, 1), 
     -3px 3px 0 hsla(180, 100%, 50%, 1), 
     -2px 2px 0 hsla(180, 100%, 50%, 1), 
     -1px 1px 0 hsla(180, 100%, 50%, 1)
   ;
 }  
}

.last-name{
    /* Centramos el contenido de la sección y determinamos el color de fondo */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: rgb(36, 35, 35);
    background-size: .2em 100%;
    font: 10.5em/1 Open Sans, Impact;  
    margin: 0 25vw;
 
}

.text {
 /* Establecemos las características del texto */
 fill: none;
 stroke-width: 6;
 stroke-linejoin: round;
 stroke-dasharray: 70 330;
 stroke-dashoffset: 0;
  /* Establecemos la animación */
 -webkit-animation: stroke 6s infinite linear;
 animation: stroke 6s infinite linear;
}

.text:nth-child(5n + 1) {
 stroke: #F2385A;
 -webkit-animation-delay: -1.2s;
 animation-delay: -1.2s;
}
.text:nth-child(5n + 2) {
 stroke: #F5A503;
 -webkit-animation-delay: -2.4s;
 animation-delay: -2.4s;
}

.text:nth-child(5n + 3) {
 stroke: #1b1bde;
 -webkit-animation-delay: -3.6s;
 animation-delay: -3.6s;
}

.text:nth-child(5n + 4) {
 stroke: #56D9CD;
 -webkit-animation-delay: -4.8s;
 animation-delay: -4.8s;
}

.text:nth-child(5n + 5) {
 stroke: #3AA1BF;
 -webkit-animation-delay: -6s;
 animation-delay: -6s;
}

@-webkit-keyframes stroke {
 100% {
   stroke-dashoffset: -400;
 }
}

@keyframes stroke {
 100% {
   stroke-dashoffset: -400;
 }
}



.text:nth-child(5n + 1) {
 stroke: #F2385A;
 -webkit-animation-delay: -1.2s;
 animation-delay: -1.2s;
}
.text:nth-child(5n + 2) {
 stroke: #F5A503;
 -webkit-animation-delay: -2.4s;
 animation-delay: -2.4s;
}

.text:nth-child(5n + 3) {
 stroke: #E9F1DF;
 -webkit-animation-delay: -3.6s;
 animation-delay: -3.6s;
}

.text:nth-child(5n + 4) {
 stroke: #56D9CD;
 -webkit-animation-delay: -4.8s;
 animation-delay: -4.8s;
}

.text:nth-child(5n + 5) {
 stroke: #3AA1BF;
 -webkit-animation-delay: -6s;
 animation-delay: -6s;
}

@-webkit-keyframes stroke {
 100% {
   stroke-dashoffset: -400;
 }
}

@keyframes stroke {
 100% {
   stroke-dashoffset: -400;
 }
}




svg {
 position: relative;
 width: 80%;

}


.section{
    /* Defino el tamaño de las secciones */
    width: auto;
    height: auto;
  
}
article{
    width:500px;
    border: 4px solid rgba(153, 55, 55, 0.993);
    background:burlywood;
}
main{
    display: flex;
    flex-direction: row;
    justify-content:center;
    flex-wrap: wrap;
    align-items: center;
    font-size: 40px;
}
img{
    width: 25%;
}
nav{
    display: flex;
    justify-content: space-between;
}
nav a{
    text-decoration: none;
}
nav a:link, nav a:visited{
    color: rgba(153, 55, 55, 0.993);
    font-size: 24px;
    background: burlywood;
}