html, body {
  margin:0;
  scroll-behavior:smooth;
}
#portada{
  background-color: beige;
  width: 100vw;
  height: 100vh; 
  text-align:center;
  animation-name: portada;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

#perfil {
  background-color:#B590D7;
  width: 100vw;
  height:100vh;
  text-align:center;
}
.soy{
  position: absolute;
  top: 105%;
  left: 5%;
  font-family: 'Playfair Display', serif;
  font-size:2.5vh;
}

.musica{
  position: absolute;
  top: 133.3%;
  left: 5%;
  font-family: 'Playfair Display', serif;
  font-size:2.5vh;
}

.ingles{
  position: absolute;
  top: 166.6%;
  left: 5%;
  font-family: 'Playfair Display', serif;
  font-size:2.5vh;
}
#videocover{
  position: absolute;
  top: 140%;
  left:5%;
  width: 25%;
  height: 25%;
}
#videochiquita1{
  position: absolute;
  top: 140%;
  left:35%;
  width: 25%;
  height: 25%;
}
#videochiquita2{
  position: absolute;
  top: 140%;
  left:66%;
  width: 25%;
  height: 25%;
}
#perf1{
  position:absolute;
  width:6%;
  top:173%;
  left: 5%;
}
#perf2{
  position:absolute;
  width:18%;
  top:111%;
  left: 5%;
}
#perf3{
  position:absolute;
  width:8%;
  top:111%;
  left: 26%;
}
#perf4{
  position:absolute;
  width:18%;
  top:111%;
  left: 37%;
}
#perf5{
  position:absolute;
  width:18%;
  top:111%;
  left: 58%;
}
#perf6{
  position:absolute;
  width:8%;
  top:173%;
  left: 14%;
}
#perf7{
  position:absolute;
  width:16%;
  top:173%;
  left: 25%;
}
#perf8{
  position:absolute;
  width:8%;
  top:173%;
  left: 44%;
}
#perf9{
  position:absolute;
  width:7%;
  top:173%;
  left: 55%;
}
#perf10{
  position:absolute;
  width:14%;
  top:173%;
  left: 65%;
}
#paso-por-el-Illia {
  background-color:#885DAF;
  width: 100vw;
  height:100vh;
  text-align:center;
}
.trayecto{
  position: absolute;
  top: 201vh;
  left: 5vw;
  font-family: 'Playfair Display', serif;
  font-size:3vh;
  text-aling: center;
}
.trayecto2{
  position: absolute;
  top: 204vh;
  left: 5vw;
  font-family: 'Playfair Display', serif;
  font-size:3vh;
  text-aling: center;
}
#contenedor{
  position: absolute;
  width: 20%;
  height:17%;
  top: 218%;
  left: 5%;
}
#contenedor1{
  position: absolute;
  width: 20%;
  height:21.5%;
  top: 218%;
  left: 26%;
}
#contenedor2{
  position: absolute;
  width:9%;
  height:21.6%;
  top: 218%;
  left: 47%;
}
#contenedor3{
  position: absolute;
  width: 15%;
  height:21.5%;
  top: 218%;
  left: 57%;
}
#contenedor4{
  position: absolute;
  width: 20.3%;
  height:29%;
  top: 218%;
  left: 73%;
}

#Random{
  background-color:#65378F;
  width: 100vw;
  height:100vh;
  text-align:center;
}
#contenedor5{
  position: absolute;
  width:18.3%;
  height:44%;
  top: 312%;
  left: 5%;
}
#contenedor6{
  position: absolute;
  width:17%;
  height:29%;
  top: 312%;
  left: 24%;
}
#contenedor7{
  position: absolute;
  width: 15%;
  height:21.5%;
  top: 312%;
  left: 42%;
}
#contenedor8{
  position: absolute;
  width:19.7%;
  height:29%;
  top: 312%;
  left: 57.5%;
}
#contenedor9{
  position: absolute;
  width:16%;
  height:44%;
  top: 312%;
  left: 78%;
}

#videomogotes{
  position: absolute;
  top: 510vh;
  left:5vh;
}
#futuro{
  width: 100vw;
  height:100vh;
  text-align:center;  
  background-color: #421967;
}

#conteiner{
  position: absolute;
  top: 420%;
  left: 5%;
  width: 40%;
  height:45%;
  background-color:#B590D7;
  font-family: 'Playfair Display', serif;
  font-size:5vh;
  color:white;
  text-align: center;
}
#conteiner:hover{
  background-image: url(https://i.ibb.co/NjK5Vtv/Captura-de-pantalla-2023-07-06-123120.png);
  background-size:cover;
  color:transparent;
}
#conteiner2{
  position: absolute;
  top: 420%;
  left: 55%;
  width: 40%;
  height:45%;
  background-color:#B590D7;
  font-family: 'Playfair Display', serif;
  font-size:5vh;
  color:white;
  text-align: center;
}
#conteiner2:hover{
  background-image: url(https://i.ibb.co/yghFmLd/Profesorado-de-Artes-Visuales.png);
  background-size:cover;
  color:transparent;
}
#conteiner3{
  position: absolute;
  top: 470%;
  left: 5%;
  width: 25%;
  height:30%;
  background-color:#B590D7;
  font-family: 'Playfair Display', serif;
  font-size:3.5vh;
  color:white;
  text-align: center;
}
#conteiner3:hover{
  background-image: url(https://i.ibb.co/p2k3sx5/3bdcab6abbbda5f2cf4edc96910a9486.jpg);
  background-size:cover;
  color:transparent;
}
#conteiner4{
  position: absolute;
  top: 470%;
  left: 37%;
  width: 25%;
  height:30%;
  background-color:#B590D7;
  font-family: 'Playfair Display', serif;
  font-size:3.5vh;
  color:white;
  text-align: center;
}
#conteiner4:hover{
  background-image: url(https://i.ibb.co/xGLKyW2/Dise-o-sin-t-tulo-2.png);
  background-size:cover;
  color:transparent;
  background-position: center;
}
#conteiner5{
  position: absolute;
  top: 470%;
  left: 70%;
  width: 25%;
  height:30%;
  background-color:#B590D7;
  font-family: 'Playfair Display', serif;
  font-size:3.5vh;
  color:white;
  text-align: center;
}
#conteiner5:hover{
  background-image: url(https://i.ibb.co/TTwkDnM/Dise-o-sin-t-tulo-3.png);
  background-size:cover;
  color:transparent;
}

#audio-visual{
  background-color:#240342;
  width: 100vw;
  height:100vh;
  text-align:center;
}
#contenedor10{
  position: absolute;
  width:21%;
  height:20%;
  top: 526%;
  left: 5%;
}
#contenedor11{
  position: absolute;
  width:9%;
  height:27%;
  top: 526%;
  left: 27%;
}
#contenedor12{
  position: absolute;
  width:27%;
  height:27%;
  top: 526%;
  left: 37%;
}
#contenedor13{
  position: absolute;
  width:30%;
  height: 103%;
  top: 515%;
  left: 68%;
  background-color:#B590D7;
}
#contenido{
  position: absolute;
  top:15%;
  left:7%;
  right:7%;
  font-family: 'Playfair Display',serif;
  font-size:2.7vh;
  text-align: justify;
}


#titulop1 {
  position: absolute;
  top: 5vh;
  left: 55vw;
  font-family: 'Playfair Display', serif;
  font-size:8.5vh;
  text-aling: center;
}
#titulop2{
  position: absolute;
  top: 15vh;
  left: 55vw;
  font-family: 'Playfair Display', serif;
  font-size:5vh;
}


a {
  text-decoration: none;
  color: black;
  margin-right:3vh;
}

.button-portada{
  font-family: 'Playfair Display', serif;
  font-size:4vh;
  width: 30vw;
  height: 10.65vh;
  position:absolute;
  top:20vh;
  left: 4vw;
  background-color:transparent;
}

.button-portada:hover{
  cursor: pointer;
  background-color:white;
}
.button-anuarios{
  font-family: 'Playfair Display', serif;
  font-size:4vh;
  width: 30vw;
  height: 10.65vh;
  position:absolute;
  top:20vh;
  left: 4vw;
  background-color:transparent;
}

.button-anuarios:hover{
  cursor: pointer;
  background-color:white;
}

.button-perfil{
  font-family: 'Playfair Display', serif;
  font-size:4vh;
  width: 30vw;
  height: 10.65vh;
  position:absolute;
  top:30vh;
  left: 4vw;
  background-color:transparent;
}

.button-perfil:hover{
  cursor: pointer;
  background-color:white;
}

.button-paso{
  font-family: 'Playfair Display', serif;
  font-size:4vh;
  width: 30vw;
  height: 10.65vh;
  position:absolute;
  top:40vh;
  left: 4vw;
  background-color:transparent;
}

.button-paso:hover{
  cursor: pointer;
  background-color:white;
}

.button-random{
  font-family: 'Playfair Display', serif;
  font-size:4vh;
  width: 30vw;
  height: 10.65vh;
  position:absolute;
  top:50vh;
  left: 4vw;
  background-color:transparent;
}

.button-random:hover{
  cursor: pointer;
  background-color:white;
}

.button-futuro{
  font-family: 'Playfair Display', serif;
  font-size:4vh;
  width: 30vw;
  height: 10.65vh;
  position:absolute;
  top:60vh;
  left: 4vw;
  background-color:transparent;
}

.button-futuro:hover{
  cursor: pointer;
  background-color:white;
}

.button-audiovisual{
  font-family: 'Playfair Display', serif;
  font-size:4vh;
  width: 30vw;
  height: 10.65vh;
  position:absolute;
  top:70vh;
  left: 4vw;
  background-color:transparent;
}

.button-audiovisual:hover{
  cursor: pointer;
  background-color:white;
}

.buttons-volvermenu{
  font-family: 'Playfair Display', serif;
  font-size:2vh;
  width: 12vw;
  height: 4.65vh;
  position:relative;
  top:92vh;
  left: 40vw;
  background-color:transparent;
}

.buttons-volvermenu:hover{
  cursor: pointer;
  background-color:white;
}

@keyframes portada {
  0% {background-image: url("https://i.ibb.co/2vP1qw1/DSCN9317.jpg");
  background-size:cover;
  background-position: center;
  }
  50% {background-image: url("https://i.ibb.co/wdymNSy/DSCN8323-1.jpg");
   background-size:cover;
   background-position: center;
  }
  100% {background-image: url(https://i.ibb.co/2vP1qw1/DSCN9317.jpg);
  background-size:cover;
  background-position: center;
  }
}