/*FUENTES*/
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital@1&display=swap');

/*DESARROLLO*/
html, body {
  scroll-behavior: smooth;
  margin:0;
  overflow: hidden;
}

/*PORTADA*/
 #Portada{
  background-image:url("./image/fondo.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  height: 100vh;
  width:100vw;
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:space-evenly;
}

#TituloPortada{
  font-family: 'Lobster', cursive;
  font-size: 8vw;
  color: black;
  text-shadow: 2px 4px 8px grey;
  text-align: center;
  margin-bottom: 0vh;
  margin-top: 0vh; 
}

#Subtitulo{
  font-family: 'Playfair Display', serif;
  font-size: 3.5vw;
  color: black;
  text-shadow: 2px 4px 8px grey;
  text-align: center;
  margin-bottom: 0vh;
  margin-top: 0vh;
}
#Subtitulo:hover{
  text-shadow: 4px 6px 2px grey;
}
#Subtitulo2{
  font-family: 'Playfair Display', serif;
  font-size: 0vw;
  color: black;
  text-shadow: 2px 4px 8px grey;
  text-align: center;
  margin-bottom: 0vh;
  margin-top: 0vh;
}

/* BOTONES*/
#Botonera {
  width: 90%;
  justify-content: space evenly;
  align-items: center;
  display:flex;
  flex-direction:column;
  margin-bottom:5vh;
}
#BotonPerfil{
  background-image:url("./image/Perfil/botonPerfil.jpg");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  background-color:none;
  width: 15vw;
  height: 15vw;
  border-top-left-radius: 10px 10px;
  border-top-right-radius: 10px 10px;
  border-bottom-left-radius: 10px 10px;
  border-bottom-right-radius: 10px 10px;
  box-shadow:5px 7px 10px black;
  margin-bottom:1vh;
}
#BotonFuturo{
  background-image:url("./image/Futuro/botonFuturo.jpg");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  background-color:none;
  width: 15vw;
  height: 15vw;
  border-top-left-radius: 10px 10px;
  border-top-right-radius: 10px 10px;
  border-bottom-left-radius: 10px 10px;
  border-bottom-right-radius: 10px 10px;
  box-shadow:5px 7px 10px black;
  margin-bottom:1vh;
}
#BotonMiPasoPorElIllia{
  background-image:url("./image/Illia/botonIllia.jpg");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  background-color:none;
  width: 15vw;
  height: 15vw;
  border-top-left-radius: 10px 10px;
  border-top-right-radius: 10px 10px;
  border-bottom-left-radius: 10px 10px;
  border-bottom-right-radius: 10px 10px;
  box-shadow:5px 7px 10px black;
  margin-bottom:1vh;
}
#BotonAudiovisual{
  background-image:url("./image/Audiovisual/botonAudiovisual.jpg");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  background-color:none;
  width: 15vw;
  height: 15vw;
  border-top-left-radius: 10px 10px;
  border-top-right-radius: 10px 10px;
  border-bottom-left-radius: 10px 10px;
  border-bottom-right-radius: 10px 10px;
  box-shadow:5px 7px 10px black;
  margin-bottom:1vh;
}
#BotonRandom{
  background-image:url("./image/Random/botonRandom.jpg");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  background-color:none;
  width: 15vw;
  height: 15vw;
  border-top-left-radius: 10px 10px;
  border-top-right-radius: 10px 10px;
  border-bottom-left-radius: 10px 10px;
  border-bottom-right-radius: 10px 10px;
  box-shadow:5px 7px 10px black;
  margin-bottom:1vh;
}

#BotonPerfil:hover{
  cursor:pointer;
  background-image:url("./image/Perfil/botonPerfilHover.jpg");
}
#BotonFuturo:hover{
  cursor:pointer;
  background-image:url("./image/Futuro/botonFuturoHover.jpg");
}
#BotonMiPasoPorElIllia:hover{
  cursor:pointer;
  background-image:url("./image/Illia/botonIlliaHover.jpg");  cursor:pointer;
}
#BotonAudiovisual:hover{
  cursor:pointer;
  background-image:url("./image/Audiovisual/botonAudiovisualHover.jpg");
}
#BotonRandom:hover{
  cursor:pointer;
  background-image:url("./image/Random/botonrandomHover.jpg");
}
.Volver{
  display:flex;
  height: 5vh;
  right:5%;
  margin-top:18vh;
  margin-left:2vh;
}

/*TITULOS*/
.Titulos{
  font-family: 'Abril Fatface', cursive;
  font-size: 6vw;
  color: black;
  text-shadow: 4px 6px 5px grey;
  text-align: center;
  margin-top: 0vh;
  padding-top: 3vh;
}
.Titulos:hover{
  text-shadow: none;
}

/*PERFIL*/
#Perfil{
  background-image:url("./image/fondo.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  margin: 0;
  height: 100vh;
  width: 100vw;
}

#ContenidoPerfil{
  display: flex;
  flex-direction: column;
  flex-wrap:nowrap;
  justify-content: space-evenly;
  align-items:center;
  height: 55%;
  width:100%;
  margin-top: 10vh;
  margin-bottom: 5vh;
  margin-right:5vh;
}
#TextoPerfil{
  width:80%;
  height:auto;
  font-family: 'Raleway', sans-serif;
  font-size:2.3vw;
  text-align:justify;
  background-color:#E4E2E2;
}
#ImagenPerfil{
  width:45vw;
  box-shadow:8px 8px 10px black;
  border-top-left-radius: 20px 20px;
  border-top-right-radius: 20px 20px;
  border-bottom-left-radius: 20px 20px;
  border-bottom-right-radius: 20px 20px;
  transition: transform 1s;
}
#ImagenPerfil:hover {
  transform: scale(1.15);
}

/*FUTURO*/

#Futuro{
 background-image:url("./image/fondo.jpg");
 background-size:cover;
 background-repeat:no-repeat;
 background-position:center;
 margin: 0;
 height: 100vh;
 width: 100vw;
}
#ContenidoFuturo{
  display: flex;
  flex-direction: column-reverse;
  flex-wrap:nowrap;
  justify-content: space-evenly;
  align-items:center;
  height: 55%;
  width:90%;
  margin-top: 10vh;
  margin-bottom: 5vh;
  margin-left:5vh;
  margin-right:5vh;
}
#TextoFuturo{
  width:90%;
  height:auto;
  font-family: 'Raleway', sans-serif;
  font-size:2.5vw;
  text-align:justify;
  background-color:#E4E2E2;
}
#ImagenFuturo{
  width:45vh;
  box-shadow:8px 8px 10px grey;
  border-top-left-radius: 20px 20px;
  border-top-right-radius: 20px 20px;
  border-bottom-left-radius: 20px 20px;
  border-bottom-right-radius: 20px 20px;
  transition: transform 1s;
}
#ImagenFuturo:hover {
  transform: scale(1.15);
}

/*MI PASO POR EL ILLIA*/
#MiPasoPorElIllia{
  background-image:url("./image/fondo.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  margin: 0;
  height: 100vh;
  width: 100vw;
}
#ContenidoMiPasoPorElIllia{
  display: flex;
  flex-direction: column;
  flex-wrap:nowrap;
  justify-content: space-evenly;
  align-items:center;
  height: 55%;
  width:90%;
  margin-top: 10vh;
  margin-bottom: 5vh;
  margin-left:5vh;
  margin-right:5vh;
}
#TituloIllia{
  font-family: 'Abril Fatface', cursive;
  font-size: 0vw;
  color: black;
  text-shadow: 4px 6px 5px grey;
  text-align: center;
  margin-top: 0vh;
  padding-top: 3vh;
}
#TituloIllia:hover{
  text-shadow: none;
}
#TextoMiPasoPorElIllia{
  width:90%;
  height:auto;
  font-family: 'Raleway', sans-serif;
  font-size:0vw;
  text-align:center;
  background-color:#E4E2E2;
}
#ImagenesMiPasoPorElIllia1{
  width: 90%;
  justify-content: space-evenly;
  display:flex;
  flex-wrap: wrap;
  padding-bottom:2vh;
}
#ImagenesMiPasoPorElIllia2{
  width: 90%;
  justify-content: space-evenly;
  display:flex;
  flex-wrap: wrap;
}
.Imagen{
  background-color:black;
  border-top-left-radius: 10px 10px;
  border-top-right-radius: 10px 10px;
  border-bottom-left-radius: 10px 10px;
  border-bottom-right-radius: 10px 10px;
  box-shadow:5px 7px 10px black;
  transition: transform 0.75s;
}
.Imagen:hover {
  transform: scale(1.15);
}

/*AUDIOVISUAL*/
#Audiovisual{
  background-image:url("./image/fondo.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  margin: 0;
  height: 100vh;
  width: 100vw;
}
#ContenedorAudiovisual{
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: space-evenly;
  align-items:center;
  height: 55%;
  margin-top: 10vh;
  margin-bottom: 5vh;
  margin-left:5vh;  
  margin-right:5vh;
}
#VideoJoaqui{
  border: solid 5px red;
  border-top-left-radius: 20px 20px;
  border-top-right-radius: 20px 20px;
  border-bottom-left-radius: 20px 20px;
  border-bottom-right-radius: 20px 20px;
  transition: transform 0.8s;
}
#VideoJoaqui:hover {
  transform: scale(1.35);
}
/*RANDOM*/
#Random{
  background-image:url("./image/fondo.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  margin: 0;
  height: 100vh;
  width: 100vw;
}
#ContenedorRandom{
  display: flex;
  flex-direction: column;
  flex-wrap:nowrap;
  justify-content: space-evenly;
  align-items:center;
  height: 55%;
  width:100%;
  margin-top: 10vh;
  padding-bottom: 5vh;
  margin-right:5vh;
}
#TextoRandom{
  width:90%;
  height:auto;
  font-family: 'Raleway', sans-serif;
  font-size:2.5vw;
  text-align:justify;
  background-color:#E4E2E2;
  margin:2vh;
}
#ImagenRandom{
  width:40vh;
  border-top-left-radius: 20px 20px;
  border-top-right-radius: 20px 20px;
  border-bottom-left-radius: 20px 20px;
  border-bottom-right-radius: 20px 20px;
  box-shadow:8px 8px 10px grey;
  transition: transform 0.8s;
}
#ImagenRandom:hover {
  transform: scale(1.15);
}
@media screen and (min-width:450px){
/*PERFIL*/
#TextoPerfil{
  width:80%;
  height:auto;
  font-size:2.3vw;
}
/*VOLVER*/
.Volver{
  height: 7.5vh;
  margin-top:14vh;
  margin-left:1.6vh;
}
 /*Imagenes de mi paso por el illia*/
.Imagen:hover {
  transform: scale(1.25);
}

}
@media screen and (min-width:550px){
 /*PORTADA*/
#Subtitulo2{
  font-family: 'Playfair Display', serif;
  font-size: 3vw;
  color: black;
  text-shadow: 2px 4px 8px grey;
  text-align: center;
  margin-bottom: 0vh;
  margin-top: 0vh;
}
/*BOTONERA*/
#Botonera {
  width: 90%;
  justify-content: space-evenly;
  display:flex;
  flex-direction:row;
}
/*PERFIL*/
#TextoPerfil{
  font-size:2vh;
  }
#ImagenPerfil{
  width:40vh;
  }
/*FUTURO*/
#TextoFuturo{
  font-size:2vw;
}
/*ILLIA*/
#TextoMiPasoPorElIllia{
  font-size:0vw;
}
/*RANDOM*/
#TextoRandom{
  font-size:1.75vw;
}
/*VOLVER*/
.Volver{
  display:flex; 
  height: 7.5vh;
  right:5%;
  margin-top:10vh;
  margin-left:1.3vh;
  }

 /*Imagenes de mi paso por el illia*/
.Imagen:hover {
  transform: scale(1.3);
}

}
@media screen and (min-width:750px){
/*VOLVER*/
.Volver{
  display:flex; 
  height: 10vh;
  right:5%;
  margin-top:5vh;
  margin-left:1vh;
} 
/*PERFIL*/
#ContenidoPerfil{
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: space-evenly;
  align-items:center;
  height: 55%;
  width:100%;
  margin-top: 10vh;
  margin-bottom: 5vh;
}
#TextoPerfil{
  width:55%;
  height:auto;
  font-size:1.5vw;
}
/*FUTURO*/
#ContenidoFuturo{
  display: flex;
  flex-direction: row;
  flex-wrap:nowrap;
  justify-content: space-evenly;
  align-items:center;
  height: 55%;
  width:90%;
  margin-top: 10vh;
  margin-bottom: 5vh;
  margin-left:5vh;  
  margin-right:5vh;
}
#TextoFuturo{
  width:90%;
  height:auto;
  font-family: 'Raleway', sans-serif;
  font-size:1.5vw;
  text-align:justify;
  background-color:#E4E2E2;
  margin-left:2vh;
}
/*MI PASO POR EL ILLIA*/  
#ContenidoMiPasoPorElIllia{
  display: flex;
  flex-direction: column;
  flex-wrap:nowrap;
  justify-content: space-evenly;
  align-items:center;
  height: 55%;
  width:90%;
  margin-top: 10vh;
  margin-bottom: 5vh;
  margin-left:5vh;
  margin-right:5vh;
}
#TituloIllia{
  font-size: 6vw;
  }

#TextoMiPasoPorElIllia{
  font-size:1.5vw;
}
.Imagen:hover {
  transform: scale(1.45);
}
/*RANDOM*/
#ContenedorRandom{
  display: flex;
  flex-direction: column;
  flex-wrap:nowrap;
  justify-content: space-evenly;
  align-items:center;
  height: 55%;
  width:100%;
  margin-top: 10vh;
  padding-bottom: 0vh;
}
#TextoRandom{
  font-size:1.5vw;
}