/* Seteamos las estilos generales  */
html, body {
    height: 100%;
    width: 100%;
  }
  
  *{
       box-sizing: border-box;
       font-family: sans-serif;
       margin: 0;
  }
  
  body{
       background-color: 	#faf0e6;
      
  }
  
  .section{
       /* Defino el tamaño de las secciones */
       width: 100%;
       height: 85vh;
     
  }
  
  /* ---------------- Aca seteamos las propiedades del nombre con imagen de fondo en movimiento ------------------- */
  
  .main-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(169, 206, 182);
  }
  
  
  .name{
       /* seteamos las propiedades del texto */
       font-size: 10vmax;
       text-align: center;
       color: rgba(255, 255, 255);
      
  }
  
  .span-main-name{
       /* Establecemos la iamgen de fondo del texto */
      display: block;
      background: url('../img/stars.jpg');
      background-clip: text;
      -webkit-background-clip: text;
      text-fill-color: transparent;
    
      -webkit-text-fill-color: transparent;
      
      /* Establecemos la animación */
       animation: fire 20s linear infinite;
    -webkit-animation: fire 20s linear infinite;
          -webkit-transform: translate3d(0,0,0);
      backface-visibility: hidden;
       -webkit-backface-visibility: hidden;
    
  }
  
  @keyframes fire {
       /* Definimos el paso a paso de la animación */
       0%{
            background-position: left 0 top 10px;
       }
       15%{
            background-position: left 500px top 5px;
       }
       30%{
            background-position: left 1000px top 0;
       }
       70%{
            background-position: left 2000px top -5px;
       }
       100%{
            background-position: left 3000px top 10px;
       }
  }
  
  /* ---------------- Aca seteamos las propiedades del nombre con efecto de luz parpadeante ------------------- */
  .other_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(77, 76, 76);
  }
  
  .light{
       /* Establecemos las características del texto */
       font-size: 10vmax;
       text-align: center;
       color: rgb(0, 238, 255);
       font-weight: bold;
       position: relative;
  }
  
  .light::before{
       /* Establecemos una sombra utilizando un pseudoelemento con un texto idéntico superpuesto */
       content: attr(data-text);
       position: absolute;
       font-size: 10vmax;
       text-shadow: 0 0 20px  rgb(0, 238, 255);
       filter: blur(10px) brightness(0);
       /* Determianmos la animación */
       animation: parpadeo 2s linear infinite;
       animation-delay: 1s;
  }
  
  @keyframes parpadeo {
       /* Establecemos el paso a paso de la animación que queremos realizar */
       0%{
            filter: blur(5px) brightness(1);
       }
       3%{
            filter: blur(5px) brightness(0);
       }
       6%{
            filter: blur(5px) brightness(0);
       }
       7%{
            filter: blur(5px) brightness(1);
       }
       8%{
            filter: blur(5px) brightness(0);
       }
       9%{
            filter: blur(5px) brightness(1);
       }
       10%{
            filter: blur(5px) brightness(0);
       }
       20%{
            filter: blur(5px) brightness(1);
       }
  }
  
  /* ---------------- Aca seteamos las propiedades del nombre con efecto gradiente ------------------- */
  .alternative-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(130, 128, 128);
  
       
  }
  
  .alternative-name h2{
     /* Establecemos las características del texto */
       color: #fff;
       font-size: 10vmax;
        text-align: center;
       letter-spacing: 5px;
  
     /* Establecemos el color del gradiente */
     /* Para generar un código de gradiente diferente 
   se pueden dirigir a: https://cssgradient.io/  */
       background: radial-gradient(circle farthest-corner at center center, #FF0000 0%, #FFFF00 25%, #05C1FF 50%, #FFFF00 75%, #FF0000 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
  }
  
  /* ---------------- Aca seteamos las propiedades del nombre con efecto de distorisión ------------------- */
  
  .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;   
  }
  
  .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: absolute;
    width: 80%;
  
  }