html, body{
  margin: 0;
  padding: 0;
  scroll-behavior: smooth; 
  overflow: hidden;
}
#portada{
  background-color: red;
  width: 100vw;
  height: 100vh;
  background-image: url("./img/IMG_20230320_025149.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#tituloprinc{
  margin-top: 0vh;
  text-align: center;
  color: #ae00e8;
  font-size:45px;
  font-family: 'Dosis', sans-serif;
}
#perfil{
  background-color: #255f85;
  width: 100vw;
  height: 100vh;
}
#fotoperfil1{
  margin-top: 50px;
  position: absolute;
  height: 44.5vh;
  margin-left: 4vw;  
}
#fotoperfil2{
  height: 44.5vh;
  position:absolute;
  margin-left: 27vw;
  margin-top:50px;
}
#fotoperfil3{
  height:44.5vh;
  position:absolute;
  margin-left: 53vw;
  margin-top:50px;
}
#fotoperfil4{
  height: 44.5vh;
  position:absolute;
  left: 76.3%;
  margin-top: 50px;
}
#textoperfil{
  color: black;
  font-size: 20px;
  margin-top: 8vh;
  text-align:center;
}
#tituloperfil{
  color: #ae00e8;
  font-size: 40px;
  font-family: 'Bebas Neue', sans-serif;
  margin-top: 0vh;
  margin-left: 46vw;
  text-align:center;
  position: absolute;
}
#pasoIllia{
  background-color: #2d719f;
  width: 100vw;
  height: 100vh; 
}
#foto2018{
  width: 23vw;
  heigth: 10vh;
  margin-left: 5vw;
  margin-top: 8vh;
  position: absolute;
}
#textofoto1{
  position: absolute;
  margin-left: 5vw;
  margin-top: 3vh;
  color: black;
  font-size: 20px;
  text-align:center;
}
#foto2019{
  width: 22vw;
  heigth: 10vh;
  margin-left: 30vw;
  margin-top: 5vh;
  position: absolute;
}
#textofoto2{
  position: absolute;
  margin-left: 30vw;
  margin-top: 0vh;
  color: black;
  font-size: 20px;
  text-align:center;
}
#foto2020{
  width: 22vw;
  heigth: 10vh;
  margin-left: 55vw;
  margin-top: 5vh;
  position: absolute;
}
#textofoto3{
  position: absolute;
  margin-left: 55vw;
  margin-top: 1vh;
  color: black;
  font-size: 20px;
  text-align:center;
}
#foto2021{
  width: 25vw;
  heigth: 10vh;
  margin-left: 13vw;
  margin-top: 40vh;
  position: absolute;
}
#textofoto4{
  position: absolute;
  margin-left: 13vw;
  margin-top: 36vh;
  color: black;
  font-size: 20px;
  text-align:center;
}
#foto2022{
  width: 23vw;
  heigth: 10vh;
  margin-left: 45vw;
  margin-top: 42vh;
  position: absolute;
}
#textofoto5{
  position: absolute;
  margin-left: 45vw;
  margin-top: 37vh;
  color: black;
  font-size: 20px;
  text-align:center;
}
#foto2023{
  width: 20vw;
  heigth: 10vh;
  margin-left: 78.5vw;
  margin-top: 20vh;
  position: absolute;
}
#textofoto6{
  position: absolute;
  margin-left: 80vw;
  margin-top: 16vh;
  color: black;
  font-size: 20px;
  text-align:center;
}
#titulopasoxillia{
 text-align:center;
 color:#ae00e8;
 font-family: 'Bebas Neue', sans-serif;
 font-size:40px;
  margin-top: 0vh;
}
#futuro{
  background-color: #317daf;
  width: 100vw;
  height: 100vh;
}
#titulofuturo{
  text-align:center;
  color: #ae00e8;
  font-size: 40px;
  font-family: 'Bebas Neue', sans-serif;
  margin-top: 0px;
}
#textofuturo{
  text-align:center;
  color: black;
  margin-top: -5vh;

}
#fotoingequim{
  height: 25vh;
  margin-left: 3vw;
  margin-top: 10vh;
  position: absolute;
}
#ingenieriaquimica{
  position: absolute;
  margin-left: 3vw;
  margin-top: 5vh;
  color: black;
  font-size: 20px;
  text-align:center;
}
#fotoingelec{
  height: 25vh;
  margin-left: 3vw;
  margin-top: 45vh;
  position: absolute;
}
#ingenieriaelec{
  position: absolute;
  margin-left: 3vw;
  margin-top: 40vh;
  color: black;
  font-size: 20px;
  text-align:center;
}
#fotoavion{
  height: 30vh;
  margin-left: 70vw;
  margin-top: 10vh;
  position: absolute;
}
#fotoavion2{
  height: 30vh;
  margin-left: 68vw;
  margin-top: 43vh;
  position: absolute;
}
#piloto1{
  position: absolute;
  margin-left: 70vw;
  margin-top: 5vh;
  color: black;
  font-size: 20px;
  text-align:center;
}
#fotodolares{
  position: absolute;
  width: 30vw;
  heigth: 25vh;
  margin-top: 15vh;
  margin-left: 33vw;
}
#textoFuturoDerecha{
  text-align: right;
}
#random{
  background-color: #3688bf;
  width: 100vw;
  height: 100vh;
}
#titulorandom{
  text-align:center;
  color: #ae00e8;
  font-size:40px;
  font-family: 'Bebas Neue', sans-serif;
  margin-top: 5vh;
}
#playlist{
  margin-left: 3vw;
  width: 45vw;
  position:absolute;
}
#videorandom{
  position: absolute;
  width: 45vw;
  margin-left: 52vw;
}
#audiovisual {
  background-color: #4092c9;
  width: 100vw;
  height: 100vh;
}
#tituloaudiovisual{
  text-align:center;
  color: #ae00e8;
  font-size:40px;
  font-family: 'Bebas Neue', sans-serif;
  position: absolute;
  margin-top: 5vh;
  margin-left: 43vw;
}
#videoaudi{
  margin-left: 3vw;
  margin-top: 20vh;
  width: 45vw;
  position:absolute;
}
#videoaudi2{
  margin-left: 52vw;
  margin-top: 20vh;
  width: 45vw;
  position:absolute;
}
#buttonperfil{
  margin-top: 0vh;
  margin-left: 3vw;
  position: absolute;
}
#buttonpasoporelillia{
  margin-top: 15vh;
  margin-left: 3vw;
  position: absolute;
}
#buttonfuturo{
  margin-top: 30vh;
  margin-left: 3vw;
  position: absolute;
}
#buttonrandom{
  margin-top: 45vh;
  margin-left: 3vw;
  position: absolute;
}
#buttonaudiovisual{
  margin-top: 60vh;
  margin-left: 3vw;
  position: absolute;
}
.button {
  background-color: #afd2e9;
  border: 2px solid #122e40;
  border-radius: 0px;
  box-shadow: #122e40 4px 4px 0 0;
  color: #0d2330;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  font-size: 18px;
  padding: 0 18px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin-top: 1vh;
  margin-left: 3.5vw;
}
.button:hover {
  background-color: #fff;
}
.button:active {
  box-shadow: #422800 2px 2px 0 0;
  transform: translate(2px, 2px);
}
@media (min-width: 768px) {
.button {
  min-width: 120px;
  padding: 0 25px;
  }
.buttonv {
  background-color: #afd2e9;
  border: 2px solid #122e40;
  border-radius: 0px;
  box-shadow: #122e40 4px 4px 0 0;
  color: #0d2330;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  font-size: 18px;
  padding: 0 18px;
  line-height: 45px;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 5vw;
  height: 8vh;
  text-align: center;
  position: absolute;
  margin-top: 1vh;
  margin-left: 1vw;
}
.buttonv:hover {
  background-color: #fff;
}
.buttonv:active {
  box-shadow: #122e40 2px 2px 0 0;
  transform: translate(2px, 2px);
}
@media (min-width: 768px) {
.buttonv {
  min-width: 120px;
  padding: 0 25px;
  }