* {
    font-family: 'Comfortaa', cursive;
}

body {
    width: 100%;
    height: 100vh;
    margin: auto;
    background: linear-gradient(180deg, #462b7d,  #160e28);
    color: #f5f6f7;
  }
/*Centrar toda la pagina*/
div {
    top: 7%;
    width: 100%;
    text-align: center;
    font-size: 1em;
}
.div2 {
    top: 7%;
    width: 100%;
    text-align: center;
    font-size: 1em;
}
/*Titulo Pagina*/
h2 {
    display: inline-grid;
    text-align: center;
    top: 10%; 
    font-size: 2em;
    color: white;
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
}

  .version {
    display: inline;
    top: 7%;
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-size: 2em;
    border: none;
    animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ffffff, 0 0 20px #ffffff, 0 0 25px #7648d2, 0 0 30px #7648d2, 0 0 35px #7648d2;
  }
  to {
    text-shadow: 0 0 10px #fff, 0 0 15px #7648d2, 0 0 20px #7648d2, 0 0 25px #7648d2, 0 0 30px #7648d2, 0 0 35px #7648d2, 0 0 40px #7648d2;
  }
}

@keyframes lights {
    0% {
      color: hsl(230, 40%, 80%);
      text-shadow:
        0 0 1em hsla(320, 100%, 50%, 0.2),
        0 0 0.125em hsla(320, 100%, 60%, 0.3),
        -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
        1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
    }
    
    30% { 
      color: hsl(230, 80%, 90%);
      text-shadow:
        0 0 1em hsla(320, 100%, 50%, 0.5),
        0 0 0.125em hsla(320, 100%, 60%, 0.5),
        -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
        0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
    }
    
    40% { 
      color: hsl(230, 100%, 95%);
      text-shadow:
        0 0 1em hsla(320, 100%, 50%, 0.5),
        0 0 0.125em hsla(320, 100%, 90%, 0.5),
        -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
        0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
    }
    
    70% {
      color: hsl(230, 80%, 90%);
      text-shadow:
        0 0 1em hsla(320, 100%, 50%, 0.5),
        0 0 0.125em hsla(320, 100%, 60%, 0.5),
        0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
        -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
    }
    
    100% {
      color: hsl(230, 40%, 80%);
      text-shadow:
        0 0 1em hsla(320, 100%, 50%, 0.2),
        0 0 0.125em hsla(320, 100%, 60%, 0.3),
        1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
        -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
    }
    
  }
/*Divisor texto del pickRandom*/


h3 {
    text-align: center;
    top: auto;
    font-size: 2em;
    color: white;
    animation: lights 5s 750ms linear infinite;
}
/*Estilo Boton*/
.button {
    margin: auto;
    display: inline-block;
    padding: 15px 25px;
    font-size: 2em;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    transition: all .5s;
    color: #ffffff;
    background-color: #7648d2;
    border: none;
    border-radius: 15px;
    box-shadow: 0 0 9px 0 rgba(187, 153, 255, 0.282)
  }
  
  .button:hover {
    transition: all .5s;
    background-color: #f5f0ff48;
    transform: rotate(-1deg) scale(1.1);
  }
  .button:hover span{
    animation-play-state: paused;
}
  .button:active {
    transition: all .2s;
    background-color: #d9c6ff1f;
    box-shadow: 0 0 5px 0 rgb(69, 45, 83);
    transform: translateY(4px);
  }

/*Copyright style*/
  footer {
    position: relative;
    height: 618px;
    width: 100%;
    background-color: #33333300;
}

  .copyright {
    position: absolute;
    width: 100%;
    color: #fff;
    line-height: 40px;
    font-size: 0.7em;
    text-align: center;
    bottom:0;
}
.copyright_footer {
    display: block;
    position: bottom;
}

.copyright:before {
    content: "Todos los zurdos reservados - 1976-1983☭";
    font-size: 18px;
    text-align: left;
    display: inline-block;
}
.copyright:hover:before {
    content: "Aussen & Somethyn' - Todos los derechos reservados 2023 ©";
    font-size: 18px;
    text-align: left;
    display: inline-block;
}
.menu{
    margin-left: auto;
     height: auto;
     width: auto;
     position: relative;
     overflow: auto;
     z-index: 50;
}