@keyframes lel {
  0%{
    background-position: 0%
  }
   100%{
    background-position: 400%
  }
}
@keyframes qweasd {
  0%{
    left: 100%
  }
   50%{
    left: 93%
  }
   90%{
    left: 93%
  }
   100%{
    left: 100%
  }
}
  @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 glitch {
  0% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
      -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
      -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  14% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
      -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
      -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  15% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
      0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
      -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  49% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
      0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
      -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  50% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
      0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  99% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
      0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  100% {
    text-shadow: -0.025em 0 0 rgba(255, 0, 0, 0.75),
      -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
      -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
}
@keyframes lol {
  0% {
    top: 45vw;
  }
  50% {
    top: 45.4vw;
  }
  100% {
    top: 45vw;
  }
}
::-webkit-scrollbar {
  width: 0.75em;
}
::-webkit-scrollbar-track {
  background-color: black;
}
::-webkit-scrollbar-thumb {
  background-image: url("https://i.pinimg.com/originals/dd/ac/0c/ddac0c7dc3e43217f48aeae9a967eb9d.gif");
  hight:0.5vw;
}
*{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    color: white;
}
body{
  background-color: black;
  overflow-x: hidden;
  overflow-y: scroll;
}
header{
  background-image: url("https://i.pinimg.com/originals/21/2b/55/212b558cd367dcd95b383d0e0db92ae4.gif");
  padding-bottom: 100%;
}
#ad{
  display: flex;
  position: fixed;
  border-radius: 30%;
  top: 45%;
  left: 100%;
  z-index: 10;
  animation-name: qweasd;
  animation-duration: 10s;
  animation-delay: 15s;
}
#xxx{
  border-radius: 100%;
}
#hd_foto{
   border:5px solid rgba(255, 0, 0, 0.8);
   border-radius:100%;
   margin-top:1%;
   margin-bottom:1.3%;
   filter: brightness(50%)
    }
.nav_b{
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    color: #fff;
    letter-spacing: 4px;
    text-decoration: none;
    font-size: 100%;
    overflow: hidden;
    transition: 0.2s;
}
.nav_b:hover{
    background: #FF0000;
    box-shadow: 0 0 10px #FF0000, 0 0 40px #FF0000, 0 0 80px #FF0000;
    transition-delay: 1s;
    color: black;
 }
.nav_b span{
    position: absolute;
    display: block;
}
#span1{
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent,#FF0000);
 }
 .nav_b:hover #span1{
    left: 100%;
    transition: 1s;
}
 #span3{
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent,#FF0000);
}
 .nav_b:hover #span3{
    right: 100%;
    transition: 1s;
    transition-delay: 0.5s;
}
#span2{
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,transparent,#FF0000);
}
.nav_b:hover #span2{
    top: 100%;
    transition: 1s;
    transition-delay: 0.25s;
}
#span4{
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg,transparent,#FF0000);
}
.nav_b:hover #span4{
    bottom: 100%;
    transition: 1s;
    transition-delay: 0.75s;
}
#volver{
  display: flex;
  position: fixed;
  background-color: white;
  border-radius: 40%;
  opacity: 70%;
  top: 90%;
  left: 1%;
  z-index: 10;
  }
#volver:hover{
  opacity: 100%;
  background-color: red;
  box-shadow: 0 0 5px #FF0000, 0 0 20px #FF0000, 0 0 40px #FF0000;
  animation-name: flicker;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  border-radius: 90%;
}
#gen{
  display: flex;
  position: fixed;
  background-color: white;
  border-radius: 20%;
  opacity: 70%;
  top: 5%;
  left: 1%;
  z-index: 10;
  }
#gen:hover{
  opacity: 100%;
  background-color: red;
  box-shadow: 0 0 5px #FF0000, 0 0 20px #FF0000, 0 0 40px #FF0000;
  animation-name: flicker;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  border-radius: 90%;
}
#yo{
  padding-bottom: 100%;
  background-image: url("https://i.imgur.com/eLSPcoD.gif?1");
  background-size: 33%
}
#yo_about{
  width: 50%;
}
#alalalala{
  filter: saturate(0%);
  border-radius: 10%;
  width: 35%;
  transition: 1s;
}
#alalalala:hover{ 
  filter: saturate(100%);
  box-shadow: 0 0 10px #FF0000, 0 0 40px #FF0000, 0 0 80px;
   width: 40%;
}
.halala{ 
  background-color: rgba(46, 45, 45, 0.28);
  }
h1{
  font-size: 200%;
  font-family: 'Hind Siliguri', sans-serif;
  letter-spacing: 7px;
  padding-left: 2vw;
  padding-right: 2vw;
  animation: glitch 500ms infinite;
}
h2{
  font-size: 150%;
  font-family: 'Hind Siliguri', sans-serif;
  letter-spacing: 7px;
  padding-left: 2vw;
  padding-right: 2vw;
  animation: glitch 500ms infinite;
}
p{
  font-family:'Kanit', sans-serif;
  font-size:125%;  
  padding-left: 3vw;
  padding-right: 2vw;
}
#mi_paso{
  padding-bottom:50vw;
  background-image: url("https://i.kym-cdn.com/photos/images/original/000/995/571/fab.gif");
  background-size: 20%;
  filter: brightness(70%)
}
.long:hover{
  cursor: pointer;
  margin-left:3vw;
  font-size: 170%;
}
#futuro{
  background-image: url("https://i.gifer.com/Ptiz.gif");
  background-size:100%;
  padding-bottom: 50vw;
}
#fr_p{
  font-size: 140%;
  left:5vw;
  right:5vw;
  background: linear-gradient(90deg, #ff0000, #ffff00, #ff00f3, #0033ff, #ff00c4, #ff0000);
  background-size: 400%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: lel 10s linear infinite;
}
#fr_img{
  padding-top:0vw;
  border-radius:100%;
  margin-top: 25vh; 
  margin-bottom: 5vw;
   border:5px solid rgba(255, 0, 0, 0.8);
   border-radius:100%;
   filter: brightness(50%)
}
#random{
  background-image: url("https://i.imgur.com/zVZIhTT.gif");
  background-size:25% ;
  padding-bottom: 20vw;
  padding-top: 5vw;
}
.subtitulo {
    text-align: center;
    font-weight: 700;
    color: red;
    margin-bottom: 40px;
    font-size: 35px;
}
.gallery {
   background-image: url("http://pa1.narvii.com/6155/4df5f49301e9cb0098b1d3072ddb4744bcdca413_00.gif");
   margin-bottom: 0vw;
}
.contenedor-galeria{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.img-galeria {
    object-fit: cover;
    width: 30%;
    display: block;
    margin-bottom: 15px;
    box-shadow: 0 0 6px rgb(0, 0, 0, 0.5);
    cursor: pointer;
}
.img-galeria:hover{
    transition: all 0.3s ease-in-out;
    transform: scale(1.1);
}
.imagen-light{
    position: fixed;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(100%);
    transition: transform .2s ease-in-out;
}
.show{
    transform: translate(0);
}
.agregar-imagen {
    object-fit: cover;
    width: 60%;
    border-radius: 10px;
    transform: scale(0);
    transition: transform .3s .2s;
}
.showImage{
    transform: scale(1);
}
.close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    cursor: pointer;
    color:red;
    font-size: 25px;
}
#sp{
  position: relative;
  top: 5vw;
}
footer{
  background-image: url('https://c.tenor.com/ZFDl8QBRzCUAAAAC/warn-warning.gif');
  padding-top:0%;
}
.btn_f{
  position: relative;
  display: inline-block;
  color: white;
  letter-spacing: 4px;
  text-decoration: none;
  font-size: 120%;
  padding: 5%;
  font-family: 'Anton', sans-serif;
  margin-left: 15%;
  border-radius: 10%;
  animation-name: flicker;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}
.btn_f:hover{
  border-radius: 100%;
  box-shadow: 5px 5px 5px black;
  background-image: url('https://cdn.discordapp.com/attachments/980100489305817098/994431782382485576/Cero_1.gif');
  background-size: 100%;
  background-repeat: no-repeat;
  font-size: 150%;
  transition: 1s;
  color: rgba(0 ,0 ,0 ,1);
  text-shadow: 0 0 10px #FF0000, 0 0 40px #FF0000, 0 0 80px #FF0000;
  box-shadow: 7px 7px 7px black;
}