html {
  overflow-x: hidden;
  scroll-behavior: smooth
}

header {
  background-image: url(https://cdn.discordapp.com/attachments/979522160303411242/979896993444950056/WhatsApp_Image_2022-05-27_at_9.00.36_PM.jpeg);
  background-size: cover;
  background-position: center center;
  height: 50vh;
  border-bottom: 1px solid white;
}

body {
  background-image: url(https://cdn.discordapp.com/attachments/979522160303411242/992606250867118170/fondo2_bis.png);
  margin: 0;
  padding: 0;
  background-position: center center;
  color: white;
}

a {
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
}

.nav {
  background-color: black;
  height: 100%;
  width: 200px;
  top: 0px;
  padding-top: 55px;
  margin-left: -300px;
  padding-left: 10px;
  visibility: hidden;
  transition: all 600ms ease;
  Font-size: 30px;
  box-shadow: 3px 5px 20px white;
  position: fixed;
}

#boton:checked~.nav {
  visibility: visible;
  margin-left: 0px;
}

#boton {
  display: none
}

.hamburger {
  Font-size: 30px;
  padding-left: 10px;
  cursor: pointer;
  color: #fff;
  text-shadow:
  0 0 10px rgba(255,255,255,1) ,
  0 0 20px rgba(255,255,255,1) ,
  0 0 30px rgba(255,255,255,1) ,
  0 0 40px #ff00de , 
  0 0 70px #ff00de , 
  0 0 80px #ff00de , 
  0 0 100px #ff00de ;
  transition: all 300ms;
  margin-left: 0px;
  position: fixed;
  animation-name: bounce;
  animation-duration: 2s;
  animation-delay: 6s;
  animation-iteration-count: 3;
  padding-top: 2.5vh
}

.hamburger:hover{
  text-shadow: none;

}
#boton:checked~.hamburger {
  visibility: hidden;
  margin-left: -40px
}

.cruz {
  visibility: hidden;
  Font-size: 30px;
  cursor: pointer;
  transition: all 300ms;
  margin-left: -300px;
  position: fixed;
  z-index: 1;
  padding-left: 10px;
  color: white;
  padding-top: 2.5vh
}

.cruz :hover {
  color: purple;
  transition: all 300ms;
}

#boton:checked~.cruz {
  visibility: visible;
  margin-left: 0px;
  color: white;
}

.menulateral {
  font-size: 20px;
  display: block;
  padding-top: 20px;
  color: white;
  border-bottom: 1px solid white;
  margin-left: -10px;
  padding-left: 10px;
  transition: all 300ms ease;
}

.menulateral:hover {
  background-color: rgba(37, 37, 37, 0.55);
  padding-left: 20px;
  color: purple;
  border-bottom: 1px solid purple
}

.menu {
  font-family: 'Poppins', sans-serif;
  font-size: 10px
}

.content {
  transition: ease-in 300ms;
  margin-left: 25vw;
  margin-right: 25vw;
  font-size: 16px;
}

p2 {
  display: block;
  text-align: justify;
  text-justify: inter-word;
  font-family: 'Poppins', sans-serif;
  font-weight: bolder;
  padding-bottom: 30px
}

p1 {
  display: block;
  text-align: justify;
  text-justify: inter-word;
  font-family: 'Poppins', sans-serif;
}

p3 {
  display: block;
  text-align: justify;
  text-justify: inter-word;
  font-family: 'Poppins', sans-serif;
  padding-bottom: 30px
}

h1 {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  margin-top: 15vh;
}

span {
  line-height: 0%;
}

.titulos {
  transition: all 300ms ease;
  color: #fff;
  text-shadow:
  0 0 10px rgba(255,255,255,1) ,
  0 0 20px rgba(255,255,255,1) ,
  0 0 30px rgba(255,255,255,1) ,
  0 0 40px #ff00de , 
  0 0 70px #ff00de , 
  0 0 80px #ff00de , 
  0 0 100px #ff00de ;
  
}

.titulos:hover {
  
  transform: translateY(-2px);
  text-shadow:none;
}

.imagencircular {
  width: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 3px solid white;
  border-radius: 100%;
  transition: ease-out 300ms;
  filter: grayscale(80%);
  margin-top: 7vh
}

.imagencircular:hover {
  filter: grayscale(0%);
  border: 3px solid purple;
  box-shadow:
  0 0 10px rgba(255,255,255,1) ,
  0 0 20px rgba(255,255,255,1) ,
  0 0 30px rgba(255,255,255,1) ,
  0 0 40px #ff00de , 
  0 0 70px #ff00de , 
  0 0 80px #ff00de , 
  0 0 100px #ff00de ;
}

#fotos {
  padding-left: 5vw;
  padding-right: 5vw;
  background-color: black;
  height: 460vh;
  border-top: 1px solid white
}

.imagenes {
  width: 29%;
  float: left;
  margin: 1.66%;
  filter: grayscale(80%);
  transition: all 300ms;
  z-index: 1;
  border: 1px solid white
}




.imagenes:hover {
  filter: grayscale(0%);
}

#instagram {
  color: white;
  animation-name: slide;
  animation-duration: 15s;
  animation-delay: 10s;
  display: inline;
  position: fixed;
  visibility: hidden;
  display: inline-block;
  visibility: hidden;
  bottom: 10vh;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 2.8vw;
  padding-right: 5vw;
  margin-left: -50px;
  background-image: linear-gradient(to bottom right, red, yellow);
  border-radius: 10px;
  border: 1.5px solid white;
  z-index: 2;
}

#steam {
  color: white;
  animation-name: slidy;
  animation-duration: 15s;
  animation-delay: 30s;
  visibility: hidden;
  display: inline-block;
  position: fixed;
  visibility: hidden;
  bottom: 10vh;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 2.8vw;
  padding-right: 5vw;
  margin-left: -50px;
  background-color: #1b2838;
  border-radius: 10px;
  border: 1.5px solid white;
  z-index: 2;
}

#pt {
  color: white;
  animation-name: slider;
  animation-duration: 15s;
  animation-delay: 50s;
  visibility: hidden;
  display: inline-block;
  position: fixed;
  visibility: hidden;
  bottom: 10vh;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 2.8vw;
  padding-right: 5vw;
  margin-left: -50px;
  background-color: #bd081c;
  border-radius: 10px;
  border: 1.5px solid white;
  z-index: 2;
}

#tk {
  color: white;
  animation-name: slider;
  animation-duration: 15s;
  animation-delay: 70s;
  visibility: hidden;
  display: inline-block;
  position: fixed;
  visibility: hidden;
  bottom: 10vh;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 2.8vw;
  padding-right: 5vw;
  margin-left: -50px;
  background-color: black;
  border-radius: 10px;
  border: 1.5px solid white;
  z-index: 2;
}

#sp {
  color: white;
  animation-name: slider;
  animation-duration: 15s;
  animation-delay: 90s;
  visibility: hidden;
  display: inline-block;
  position: fixed;
  visibility: hidden;
  bottom: 10vh;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 2.8vw;
  padding-right: 5vw;
  margin-left: -50px;
  background-color: black;
  border-radius: 10px;
  border: 1.5px solid white;
  z-index: 2;
}

.nombre {
  font-family: 'Poppins', sans-serif;
  margin-top: 8vh;
  font-size: 70px;
  animation-name: nameslide;
  animation-duration: 3s;
  display: flex;
  justify-content: center;
  padding-top: 2vh;
  padding-bottom: 2vh;
 
}

 .union{
    animation: flicker 1.5s infinite alternate; 
  }
  
  .union:hover{
    animation-play-state: paused;
  }

.apellido {
  font-family: 'Poppins', sans-serif;
  margin-top: 8vh;
  font-size: 70px;
  animation-name: lastnameslide;
  animation-duration: 3s;
  display: flex;
  justify-content: center;
  padding-top: 5vh;
  padding-bottom: 2vh;
}

.apellido:hover{
  animation-play-state: paused;
}


@keyframes flicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
  
   opacity: .99;   
}

 20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
  opacity: 0.4;
} 
 
}

@keyframes nameslide {
  from {
    transform: translateX(-66vw);
    opacity: 0
  }

  to {
    justify-content: center;
    ;
    opacity: 1
  }
}

@keyframes lastnameslide {
  from {
    transform: translateX(66vw);
    opacity: 0
  }

  to {
    justify-content: center;
    ;
    opacity: 1
  }
}


@keyframes slide {
  0% {
    transform: translateX(110vw);
    visibility: visible
  }

  30% {
    transform: translateX(90vw);
    visibility: visible
  }

  50% {
    transform: translateX(90vw);
    visibility: visible
  }

  70% {
    transform: translateX(90vw);
    visibility: visible
  }

  100% {
    transform: translateX(110vw);
    visibility: hidden
  }
}

@keyframes slidy {
  0% {
    transform: translateX(110vw);
    visibility: visible
  }

  30% {
    transform: translateX(93vw);
    visibility: visible
  }

  50% {
    transform: translateX(93vw);
    visibility: visible
  }

  70% {
    transform: translateX(93vw);
    visibility: visible
  }

  100% {
    transform: translateX(110vw);
    visibility: hidden
  }

}

@keyframes slider {
  0% {
    transform: translateX(110vw);
    visibility: visible
  }

  30% {
    transform: translateX(93vw);
    visibility: visible
  }

  50% {
    transform: translateX(93vw);
    visibility: visible
  }

  70% {
    transform: translateX(93vw);
    visibility: visible
  }

  100% {
    transform: translateX(110vw);
    visibility: hidden
  }

}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(50px);
  }

  60% {
    transform: translateY(30px);
  }
}



@media screen and (max-width: 1000px) {
  html {
    overflow-x: hidden;
    scroll-behavior: smooth
  }
  
  header {
    background-image: url(https://cdn.discordapp.com/attachments/979522160303411242/979896993444950056/WhatsApp_Image_2022-05-27_at_9.00.36_PM.jpeg);
    background-size: cover;
    background-position: center center;
    height: 50vh;
    border-bottom: 1px solid white;
  }
  
  body {
    background-image: url(https://cdn.discordapp.com/attachments/979522160303411242/992606250867118170/fondo2_bis.png);
    margin: 0;
    padding: 0;
    background-position: center center;
    color: white;
  }
  
  a {
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
  }
  
  .nav {
    background-color: black;
    height: 100%;
    width: 200px;
    top: 0px;
    padding-top: 55px;
    margin-left: -300px;
    padding-left: 10px;
    visibility: hidden;
    transition: all 600ms ease;
    Font-size: 30px;
    box-shadow: 3px 5px 20px white;
    position: fixed;
  }
  
  #boton:checked~.nav {
    visibility: visible;
    margin-left: 0px;
  }
  
  #boton {
    display: none
  }
  
  .hamburger {
    Font-size: 30px;
    padding-left: 10px;
    cursor: pointer;
    color: #fff;
    text-shadow:
    0 0 10px rgba(255,255,255,1) ,
    0 0 20px rgba(255,255,255,1) ,
    0 0 30px rgba(255,255,255,1) ,
    0 0 40px #ff00de , 
    0 0 70px #ff00de , 
    0 0 80px #ff00de , 
    0 0 100px #ff00de ;
    transition: all 300ms;
    margin-left: 0px;
    position: fixed;
    animation-name: bounce;
    animation-duration: 2s;
    animation-delay: 6s;
    animation-iteration-count: 3;
    padding-top: 2.5vh
  }
  
  .hamburger:hover{
    text-shadow: none;
  
  }
  #boton:checked~.hamburger {
    visibility: hidden;
    margin-left: -40px
  }
  
  .cruz {
    visibility: hidden;
    Font-size: 30px;
    cursor: pointer;
    transition: all 300ms;
    margin-left: -300px;
    position: fixed;
    z-index: 1;
    padding-left: 10px;
    color: white;
    padding-top: 2.5vh
  }
  
  .cruz :hover {
    color: purple;
    transition: all 300ms;
  }
  
  #boton:checked~.cruz {
    visibility: visible;
    margin-left: 0px;
    color: white;
  }
  
  .menulateral {
    font-size: 20px;
    display: block;
    padding-top: 20px;
    color: white;
    border-bottom: 1px solid white;
    margin-left: -10px;
    padding-left: 10px;
    transition: all 300ms ease;
  }
  
  .menulateral:hover {
    background-color: rgba(37, 37, 37, 0.55);
    padding-left: 20px;
    color: purple;
    border-bottom: 1px solid purple
  }
  
  .menu {
    font-family: 'Poppins', sans-serif;
    font-size: 10px
  }
  
  .content {
    transition: ease-in 300ms;
    margin-left: 25vw;
    margin-right: 25vw;
    font-size: 16px;
  }
  
  p2 {
    display: block;
    text-align: justify;
    text-justify: inter-word;
    font-family: 'Poppins', sans-serif;
    font-weight: bolder;
    padding-bottom: 30px
  }
  
  p1 {
    display: block;
    text-align: justify;
    text-justify: inter-word;
    font-family: 'Poppins', sans-serif;
  }
  
  p3 {
    display: block;
    text-align: justify;
    text-justify: inter-word;
    font-family: 'Poppins', sans-serif;
    padding-bottom: 30px
  }
  
  h1 {
    text-align: center;
    font-family: 'Poppins', sans-serif;
    margin-top: 15vh;
  }
  
  span {
    line-height: 0%;
  }
  
  .titulos {
    transition: all 300ms ease;
    color: #fff;
    text-shadow:
    0 0 10px rgba(255,255,255,1) ,
    0 0 20px rgba(255,255,255,1) ,
    0 0 30px rgba(255,255,255,1) ,
    0 0 40px #ff00de , 
    0 0 70px #ff00de , 
    0 0 80px #ff00de , 
    0 0 100px #ff00de ;
    
  }
  
  .titulos:hover {
    
    transform: translateY(-2px);
    text-shadow:none;
  }
  
  .imagencircular {
    width: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid white;
    border-radius: 100%;
    transition: ease-out 300ms;
    filter: grayscale(80%);
    margin-top: 7vh
  }
  
  .imagencircular:hover {
    filter: grayscale(0%);
    border: 3px solid purple;
     box-shadow:
  0 0 10px rgba(255,255,255,1) ,
  0 0 20px rgba(255,255,255,1) ,
  0 0 30px rgba(255,255,255,1) ,
  0 0 40px #ff00de , 
  0 0 70px #ff00de , 
  0 0 80px #ff00de , 
  0 0 100px #ff00de ;
  }
  
  #fotos {
    padding-left: 5vw;
    padding-right: 5vw;
    background-color: black;
    height: 200vh;
    border-top: 1px solid white
  }
  
  .imagenes {
    width: 29%;
    float: left;
    margin: 1.66%;
    filter: grayscale(80%);
    transition: all 300ms;
    z-index: 1;
    border: 1px solid white
  }
  
  
  
  
  .imagenes:hover {
    filter: grayscale(0%);
  }
  
  #instagram {
    color: white;
    animation-name: slide;
    animation-duration: 15s;
    animation-delay: 10s;
    display: inline;
    position: fixed;
    visibility: hidden;
    display: inline-block;
    visibility: hidden;
    bottom: 10vh;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 2.8vw;
    padding-right: 5vw;
    margin-left: -50px;
    background-image: linear-gradient(to bottom right, red, yellow);
    border-radius: 10px;
    border: 1.5px solid white;
    z-index: 2;
  }
  
  #steam {
    color: white;
    animation-name: slidy;
    animation-duration: 15s;
    animation-delay: 30s;
    visibility: hidden;
    display: inline-block;
    position: fixed;
    visibility: hidden;
    bottom: 10vh;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 2.8vw;
    padding-right: 5vw;
    margin-left: -50px;
    background-color: #1b2838;
    border-radius: 10px;
    border: 1.5px solid white;
    z-index: 2;
  }
  
  #pt {
    color: white;
    animation-name: slider;
    animation-duration: 15s;
    animation-delay: 50s;
    visibility: hidden;
    display: inline-block;
    position: fixed;
    visibility: hidden;
    bottom: 10vh;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 2.8vw;
    padding-right: 5vw;
    margin-left: -50px;
    background-color: #bd081c;
    border-radius: 10px;
    border: 1.5px solid white;
    z-index: 2;
  }
  
  #tk {
    color: white;
    animation-name: slider;
    animation-duration: 15s;
    animation-delay: 70s;
    visibility: hidden;
    display: inline-block;
    position: fixed;
    visibility: hidden;
    bottom: 10vh;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 2.8vw;
    padding-right: 5vw;
    margin-left: -50px;
    background-color: black;
    border-radius: 10px;
    border: 1.5px solid white;
    z-index: 2;
  }
  
  #sp {
    color: white;
    animation-name: slider;
    animation-duration: 15s;
    animation-delay: 90s;
    visibility: hidden;
    display: inline-block;
    position: fixed;
    visibility: hidden;
    bottom: 10vh;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 2.8vw;
    padding-right: 5vw;
    margin-left: -50px;
    background-color: black;
    border-radius: 10px;
    border: 1.5px solid white;
    z-index: 2;
  }
  
  .nombre {
    font-family: 'Poppins', sans-serif;
    margin-top: 8vh;
    font-size: 70px;
    animation-name: nameslide;
    animation-duration: 3s;
    display: flex;
    justify-content: center;
    padding-top: 2vh;
    padding-bottom: 2vh;
    
  }
  
  
  .union{
    animation: flicker 1.5s infinite alternate; 
  }
  
  .union:hover{
    animation-play-state: paused;
  }
  
  .apellido {
    font-family: 'Poppins', sans-serif;
    margin-top: 8vh;
    font-size: 70px;
    animation-name: lastnameslide;
    animation-duration: 3s;
    display: flex;
    justify-content: center;
    padding-top: 5vh;
    
    padding-bottom: 2vh;
  
  }
  
  
  
  
  @keyframes flicker {
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    
     opacity: .99;   
  }
  
   20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    opacity: 0.4;
  } 
   
  }
  
  @keyframes nameslide {
    from {
      transform: translateX(-66vw);
      opacity: 0
    }
  
    to {
      justify-content: center;
      ;
      opacity: 1
    }
  }
  
  @keyframes lastnameslide {
    from {
      transform: translateX(66vw);
      opacity: 0
    }
  
    to {
      justify-content: center;
      ;
      opacity: 1
    }
  }
  
  
  @keyframes slide {
    0% {
      transform: translateX(110vw);
      visibility: visible
    }
  
    30% {
      transform: translateX(90vw);
      visibility: visible
    }
  
    50% {
      transform: translateX(90vw);
      visibility: visible
    }
  
    70% {
      transform: translateX(90vw);
      visibility: visible
    }
  
    100% {
      transform: translateX(110vw);
      visibility: hidden
    }
  }
  
  @keyframes slidy {
    0% {
      transform: translateX(110vw);
      visibility: visible
    }
  
    30% {
      transform: translateX(93vw);
      visibility: visible
    }
  
    50% {
      transform: translateX(93vw);
      visibility: visible
    }
  
    70% {
      transform: translateX(93vw);
      visibility: visible
    }
  
    100% {
      transform: translateX(110vw);
      visibility: hidden
    }
  
  }
  
  @keyframes slider {
    0% {
      transform: translateX(110vw);
      visibility: visible
    }
  
    30% {
      transform: translateX(93vw);
      visibility: visible
    }
  
    50% {
      transform: translateX(93vw);
      visibility: visible
    }
  
    70% {
      transform: translateX(93vw);
      visibility: visible
    }
  
    100% {
      transform: translateX(110vw);
      visibility: hidden
    }
  
  }
  
  @keyframes bounce {
  
    0%,
    20%,
    50%,
    80%,
    100% {
      transform: translateY(0);
    }
  
    40% {
      transform: translateY(50px);
    }
  
    60% {
      transform: translateY(30px);
    }
  }
}