html, body{
  margin: 0;
  scroll-behavior: smooth; 
  

}
#portada {
  background-color: BlueViolet;
  background-image: url("./img/luna.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  text-align: center;
}
#titulo{
  color: Plum; 
  text-align: left; 
  font-size: 80px; 
  font-family: Lilita One;  
  margin-top: 0px; 
  margin-left: 150px; 
  text-shadow: 4px 2px white;
}
#anuario{
  position: absolute;
  top: 93vh;
  left: 0vw; 
  color: white;
  font-size: 20px; 
  font-family: 'Ysabeau Infant', sans-serif;
}
#fotoportada{
  width: 35vw; 
  position: absolute;
  left: 12vw; 
  top: 25vh; 
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100%;
  border-radius: 100%; 
  transition: transform 1s;
}
#fotoportada:hover {
	transform: scale(1.1);}
#perfil{
  background-color: #b3b3ff;
  width: 100vw;
  height: 100vh;
  text-align: center; 
}
#tituloperfil{
  color: SlateBlue; 
  font-size: 70px; 
  font-family: Lilita One, cursive;
  margin-top: -3vh;
  margin-left: 40vw;
  text-align: center;
  position: absolute;
}
#volveralmenuperfil{
  color: Navy;
  font-size: 17px; 
  text-decoration: none; 
  font-family: Caprasimo;  
  position: absolute;
  width: 100px; 
  right: 2vw;  
  top: 190vh;
  text-align: center; 
  background-color: white; 
  border-radius: 50px;
  padding: 10px;
}
#volveralmenuperfil:hover{
  background-color: black;
  color: DeepPink; 
}
#fotozuri{
  width: 20vw;
  position: absolute; 
  left: 5vh;
  top: 135vh;
}
#fotozuri:hover{
  filter: grayscale(100%)
}
#foto17{
  width: 15vw;
  position: absolute; 
  right: 5vh; 
  top: 135vh;
}
#foto17:hover{
  filter: grayscale(100%)
}
#fotobateria{
  width: 35vw;
  position: absolute; 
  left: 40vh;  
  top: 135vh;
}
#fotobateria:hover{
  filter: grayscale(100%)
}
#bebe{
  width: 16vw;
  position: absolute; 
  right: 34vh;  
  top: 135vh;
}
#bebe:hover{
  filter: grayscale(100%);
}
#bhavi{
  width: 12vw;
  position: absolute; 
  right: 32vh;  
  top: 164vh;
}
#bhavi:hover{
  filter: grayscale(100%);
}
#presentacion{
  color: black; 
  font-size: 20px; 
  position: absolute; 
  font-family: Montserrat, sans-serif; 
  margin-top: 8vh;
  text-align: center;
  margin-left: 5vh;
  margin-right: 5vh; 
  text-align: center;
}
#PasoporelIllia{
  background-color: #e6ffee;
  width: 100vw;
  height: 100vh;
  text-align: center;
  font-size: 50px;
  color: DarkTurquoise;  
  text-align: left; 
  font-family: Lilita One, cursive;
}
.textoillia{
  font-family: Montserrat, sans-serif;
  text-align: center;
  font-size: 2vw;
  margin-right: 0vw;
  background-color:   DarkTurquoise;
  position: absolute; 
  top: 268%; 
  left: 70%;
  right: 2%;
  padding: 1vw;
}
#contenedor1{
  position: absolute;
  width: 22%;
  height: 22%;
  top: 215%;
  left: 1%;
}
#contenedor1:hover{
  filter: grayscale(100%)
}
#contenedor2{
  position: absolute;
  width: 22%;
  height: 22%;
  top: 215%;
  left: 24%;
}
#contenedor2:hover{
  filter: grayscale(100%)
}
#contenedor3{
  position: absolute;
  width: 22%;
  height: 22%;
  top: 215%;
  left: 47%;
}
#contenedor3:hover{
  filter: grayscale(100%)
}
#contenedor4{
  position: absolute;
  width: 28%;
  height: 28%;
  top: 210%;
  left: 70%;
}
#contenedor4:hover{
  filter: grayscale(100%)
}
#volveralmenuillia{
  color: Navy;
  font-size: 17px; 
  text-decoration: none; 
  font-family: Caprasimo;  
  position: absolute;
  width: 10vw; 
  right: 2vw;   
  top: 290vh;
  text-align: center; 
  background-color: white; 
  border-radius: 50px;
  padding: 10px;
}
#volveralmenuillia:hover{
  background-color: black;
  color: DeepPink; 
}
#Futuro{
  background: linear-gradient(to bottom, #cc00cc 0%, #ff6699 100%);
  width: 100vw;
  height: 100vh; 
  text-align: center;
  font-size: 60px;
  color:  #ff6699;  
  text-align: center; 
  font-family: 'Caprasimo', cursiva; 
}
#textofuturo{
  font-family: Montserrat, sans-serif;
  text-align: center;
  font-size: 1vw;
  margin-right: 0vw;
  background-color:  white;
  color: black;
  position: absolute; 
  top: 320%; 
  left: 2%;
  right: 70%;
  padding: 1vw;
  line-height: 2,5vw;
  animation-name: move2;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}
@keyframes move {
  0% {background-color: #ff8080;}
  50% {background-color: #ffe6e6;}
  100% {background-color: #b3daff;
       color: white;  
  }
}

@media screen and (min-width: 992px) {
  #textofuturo{
    font-family: Montserrat, sans-serif;
    text-align: center;
    font-size: 2vw;
    margin-right: 0vw;
    background-color:  white;
    color: black;
    position: absolute; 
    top: 320%; 
    left: 2%;
    right: 70%;
    padding: 1vw;
  }
#textofuturo2{
  font-family: Montserrat, sans-serif;
  text-align: center;
  font-size: 2vw;
  margin-right: 0vw;
  background-color:  white;
  color: black;
  position: absolute; 
  top: 360%; 
  left: 58%;
  right: 5%;
  padding: 2vw;
  line-height: 2,5vw;
  animation-name: move;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}
  @keyframes move2 {
  0% {background-color: #b3daff;
    color: w}
  50% {background-color: #ffe6e6;}
  100% {background-color: #ff8080;}
}
@media screen and (min-width: 992px) {
 #textofuturo2{
    font-family: Montserrat, sans-serif;
    text-align: center;
    font-size: 2vw;
    margin-right: 0vw;
    background-color:  white;
    color: black;
    position: absolute; 
    top: 360%; 
    left: 58%;
    right: 5%;
    padding: 2vw;
  }
}
#contador{
  width: 25%;
  position: absolute; 
  left: 3vh;
  top: 340vh;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100%;
  border-radius: 100%; 
  transition: transform 1s;
}
  #contador:hover{
    transform: scale(1.1);
  }
#gimnasio{
  width: 15%;
  position: absolute; 
  left: 55vh;
  top: 353vh;
  animation-name: giro;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}
  }
#chicas{
  width: 18%;
  position: absolute; 
  right: 5vh; 
  top: 310vh;
  animation-name: reboteOut;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}
@-webkit-keyframes reboteOut{
  25%{
   	-webkit-transform: scale(0.8);
   }
   50%{
   	opacity: 1;
   	-webkit-transform: scale(1.1);
   }
     100%{
     	opacity: 0;
   	-webkit-transform: scale(0.5);
   }
}
#chicas2{
  width: 35%;
  position: absolute; 
  right: 45vh; 
  top: 315vh;
  animation-name: aparicion;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
@-webkit-keyframes aparicion{
     0%{
     	opacity: 0;
     }
       50%{
     	opacity: 0.8;
     }
}
#volveralmenufuturo{
  color: Navy;
  font-size: 17px; 
  text-decoration: none; 
  font-family: Caprasimo;  
  position: absolute;
  width: 10vw; 
  right: 0vh;  
  top: 385vh;
  text-align: center; 
  background-color: white; 
  border-radius: 50px;
  padding: 2vh;
}
#volveralmenufuturo:hover{
  background-color: black;
  color: DeepPink;
}
#Random{
  background-color: #99d6ff;
  width: 100vw;
  height: 100vh;
  text-align: center;
  font-size: 50px;
  color: #008ae6;  
  text-align: center; 
  font-family: 'Caprasimo', cursiva;  
}
#textorandom{
  color: black; 
  font-size: 25px; 
  position: absolute; 
  top: 2820px;
  font-family: Montserrat, sans-serif;
  text-align: center;
  margin-left: 0vh;
  margin-right: 5vh; 
  text-align: center;
}
#galeriarandom{
  position: absolute; top: 425%;
}
#galeriarandom2{
   position: absolute; top: 472%;
}
#volveralmenurandom{
  color: Navy;
  font-size: 17px; 
  text-decoration: none; 
  font-family: Caprasimo;  
  position: absolute;
  width: 10vw; 
  right: 2px;   
  top: 490vh;
  text-align: center; 
  background-color: white; 
  border-radius: 50px;
  padding: 10px;
  z-index: 1; 
}
#volveralmenurandom:hover{
  background-color: black;
  color: DeepPink;
}
#Audiovisual{
  background-color: #f0b3ff;
  widht: 100vw;
  height: 100vh;
  text-align: center;
  font-size: 60px;
  color: MediumOrchid;  
  text-align: center; 
  font-family: 'Chela One', cursiva; 
  text-shadow: 4px 2px white;
}
#volveralmenuaudiovisual{
  color: Navy;
  font-size: 17px; 
  text-decoration: none; 
  font-family: Caprasimo;  
  position: absolute;
  width: 15vw; 
  right: 0px;  
  top: 585vh;
  text-align: center; 
  background-color: white; 
  border-radius: 50px;
  padding: 10px;
}
#volveralmenuaudiovisual:hover{
  background-color: black;
  color: DeepPink;
}
#video{
  left: 5vw;
  top: 515vh;
  width: 45vw;
  position:absolute;
}
#playlist{
  left: 58vw;
  top: 515vh;
  width: 30vw;
  position:absolute;
}
#upd{
  left: 5vw;
  top: 562vh;
  width: 45vw;
  position:absolute;
  animation-name: reboteOut2;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}
@-webkit-keyframes reboteOut2{
  25%{
   	-webkit-transform: scale(0.5);
   }
   50%{
   	opacity: 1;
   	-webkit-transform: scale(0.8);
   }
     100%{
     	opacity: 0;
   	-webkit-transform: scale(0.5);
   }
}
#textoaudio{
  font-family: Montserrat, sans-serif;
  text-align: center;
  font-size: 2vw;
  margin-right: 0vw;
  background-color:  white;
  color: black;
  position: absolute; 
  top: 570vh; 
  right: 2vh;
  padding: 1vw;
}


/* PORTADA*/
#bottonperfil{
  color: DeepPink; 
  margin-top: 0vh;
  font-size: 30px;
  font-family: Lobster;
  background-color: Plum; 
  border-radius: 30px;
  padding: 10px;
  margin-right: 30px; 
  width: 30vw; 
  margin-left: 50vw; 
}
#bottonperfil:hover{
  background-color: #ccffe5; 
  color: blue; 
  
}
#bottonpasoporelillia{
  color: DeepPink; 
  margin-top: 2vh;
  font-size: 30px;
  font-family: Lobster;
  background-color: Plum; 
  border-radius: 30px;
  padding: 10px;
  margin-right: 30px; 
  width: 30vw; 
  margin-left: 50vw; 
}
#bottonpasoporelillia:hover{
  background-color: #ccffe5; 
  color: blue;
}
#bottonfuturo{
  color: DeepPink; 
  margin-top: 2vh;
  font-size: 30px;
  font-family: Lobster;
  background-color: Plum; 
  border-radius: 30px;
  padding: 10px;
  margin-right: 30px; 
  width: 30vw; 
  margin-left: 50vw; 
}
#bottonfuturo:hover{
  background-color: #ccffe5; 
  color: blue;
}
#bottonrandom{
  color: DeepPink; 
  margin-top: 2vh;
  font-size: 30px;
  font-family: Lobster;
  background-color: Plum; 
  border-radius: 30px;
  padding: 10px;
  margin-right: 30px; 
  width: 30vw; 
  margin-left: 50vw; 
}
#bottonrandom:hover{
  background-color: #ccffe5; 
  color: blue;
}
#bottonaudiovisual{
   color: DeepPink; 
  margin-top: 2vh;
  font-size: 30px;
  font-family: Lobster;
  background-color: Plum; 
  border-radius: 30px;
  padding: 10px;
  margin-right: 30px; 
  width: 30vw; 
  margin-left: 50vw; 
}
#bottonaudiovisual:hover{
  background-color: #ccffe5; 
  color: blue;
}
#volveralmenu{
  color: black; 
  font-size: 20px; 
  margin-top: 510px; 
  margin-left: 600px; 
  
}


/*margin-left
margin-right
poner efectos a las imagenes y botones
langosta (fuente botones portada)*/