html, body {
  margin:0;
  scroll-behavior:smooth;
}
#portada{
  background-color: antiquewhite;
  background-image: url("./img/portada/fotoportada.jpg");
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center bottom;
}

#Perfil{
  background-color:bisque;
  width: 100vw;
  height: 100vh;
}

.texto1{
  position: absolute;
  top: 100%;
  left: 05%;
  font-size: 4vh;
}

#playlist{
  position: absolute;
  width: 25%;
  height: 30%;
  left: 70%;
  top:130%;
}

#foto1{
  position: absolute;
  width: 30%;
  left:00%;
  top: 100%;
  transition: transform 1s;
  }

#foto1:hover{
  transform: scale(1.1)
}

#foto2{
  position: absolute;
  width: 22.5%;
  left: 32%;
  top: 100%;
  transition: transform 1s;
  }

#foto2:hover{
  transform: scale(1.1)
}

#foto3{
  position: absolute;
  width: 40%;
  left: 56%;
  top: 100%;
  transition: transform 1s;
}

#foto3:hover{
  transform: scale(1.1)
}

#foto4{
  position: absolute;
  width: 40%;
  left: 98%;
  top: 100%;
  transition: transform 1s;
}

#foto4:hover{
  transform: scale(1.1)
}

#foto5{
  position: absolute;
  width: 27%;
  left: 105%;
  top: 10%;
  transition: transform 1s;
}

#foto5:hover{
  transform: scale(1.1)
}

#foto6{
  position: absolute;
  width: 27%;
  left: 165%;
  top: 10%;
  transition: transform 1s;
}

#foto6:hover{
  transform: scale(1.1)
}

#foto7{
  position: absolute;
  width: 27%;
  left: 135%;
  top: 10%; 
  transition: transform 1s;
}

#foto7:hover{
  transform: scale(1.1)
}

#Mi-paso-por-el-Illia{
  background-color: beige;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}

.texto2{
  position: absolute;
  top: 200%;
  left: 2%;
  font-size: 4vh;
}

#amigos1{
  position: absolute;
  width: 15%;
  left: 00%;
  top: 100%; 
  transition: transform 1s;
}

#amigos1:hover{
  transform: scale(1.1)
}

#amigos2{
  position: absolute;
  width: 15%;
  left: 16%;
  top: 100%;
  transition: transform 1s;
}

#amigos2:hover{
  transform: scale(1.1)
}

#amigos3{
  position: absolute;
  width: 15%;
  left: 32%;
  top: 100%;
  transition: transform 1s;
}

#amigos3:hover{
  transform: scale(1.1)
}

#amigos4{
  position: absolute;
  width: 15%;
  left: 48%;
  top: 100%;
  transition: transform 1s;
}

#amigos4:hover{
  transform: scale(1.1)
}

#amigos5{
  position: absolute;
  width: 15%;
  left: 64%;
  top: 100%;
  transition: transform 1s;
}

#amigos5:hover{
  transform: scale(1.1)
}

#amigos6{
  position: absolute;
  width: 15%;
  left:80%;
  top: 100%;
  transition: transform 1s;
}

#amigos6:hover{
  transform: scale(1.1)
}

#Futuro{
  background-image: url("./img/futuro/psicofondo.png");
  background-size: cover;
  background-position: top left;
  width: 100vw;
  height:100vh;
}

.texto3{
  position: absolute;
  top: 310%;
  left: 2%;
  font-size: 4vh;
  color: white;
}

#psico1{
  position: absolute;
  width: 30%;
  left: 05%;
  top: 100%;
  transition: transform 1s;
}

#psico1:hover{
  transform: scale(1.1)
}

#ingles{
  position: absolute;
   width: 30%;
  left: 43%;
  top: 100%;
 transition: transform 1s;
}

#ingles:hover{
  transform: scale(1.1)
}

#viajar{
   position: absolute;
   width: 30%;
  left:80%;
  top: 100%;
  transition: transform 1s;
}

#viajar:hover{
  transform: scale(1.1)
}

#Random{
  background-color:mistyrose;
  background-size: cover;
  background-position: top left;
  width: 100vw;
  height:100vh;
}
.texto4{
  position: absolute;
  top: 405%;
  left: 2%;
  font-size: 4vh;
  color: black;
}

#dukiyisus{
  position: absolute;
  width: 25%;
  left: 02%;
  top: 100%;
  transition: transform 1s;
}

#dukiyisus:hover{
 transform: scale(1.1)
}

#duki{
  position: absolute;
  width: 18.6%;
  left: 28%;
  top: 100%;
  transition: transform 1s;
}

#duki:hover{
  transform: scale(1.1)
}

#atardecer{
  position: absolute;
  width: 18.6%;
  height: 60%;
  left: 48%;
  top: 100%;
  transition: transform 1s;
}

#atardecer:hover{
  transform: scale(1.1)
}

#hamburguesa{
  position: absolute;
  width: 18.9%;
  left: 67%;
  top: 100%;
  transition: transform 1s;
}

#hamburguesa:hover{
  transform: scale(1.1)
}

#felix{
  position: absolute;
  width: 18.9%;
  left: 87%;
  top: 100%;
  transition: transform 1s;
}

#felix:hover{
  transform: scale(1.1)
}


#Audiovisual {
  background-color: plum;
  width: 100vw;
  height:100vh;
  text-align: center; 
  font-size: 5vh;
}

.audiovisual{
  position: absolute;
  top: 500vh;
  left: 2vw;
  font-family: 'Bacasime Antique', serif;
  font-size: 4vh;
}

.texto5{
   position: absolute;
  top: 509%;
  left: 2%;
  font-size: 4vh;
  color: black;
}

#medio{
  position: absolute;
  width: 25%;
  left: 02%;
  top: 530%;
}

#operacion{
  position: absolute;
  width: 25%;
  left: 26%;
  top: 530%;
}

#upd{
  position: absolute;
  width: 25%;
  left: 50%;
  top: 530%;
}

.momentos{
  position: absolute;
  top: 600%;
  left: 2%;
  font-size: 4vh;
  color: black;
}

#randomm{
  position: absolute;
  width: 25%;
  left: 75%;
  top: 530%;
}

#conteiner{
  position: absolute;
  top: 580%;
  left: 5%;
  width: 90%;
  height:20%;
  background-color:#B590D7;
  font-family: 'Playfair Display', serif;
  font-size:3.5vh;
  color:white;
  text-align: center;
}

a {
 font-family:'Nerko One', cursive;
  color: black;
  margin-right: 3vh; 
}

.button-perfil{
  font-family: 'Bacasime Antique', serif;
  font-size: 4vh;
  width: 25vw;
  height: 10.65vh;
  position: absolute;
  top: 40vh;
  left: 72vw;
  background-color: transparent;
}

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

.button-mipaso{
  font-family: 'Bacasime Antique', serif;
  font-size: 4vh;
  width: 25vw;
  height: 10.65vh;
  position: absolute;
  top: 51vh;
  left: 72vw;
  background-color: transparent;
}

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

.button-futuro{
  font-family: 'Bacasime Antique', serif;
  font-size: 4vh;
  width: 25vw;
  height: 10.65vh;
  position: absolute;
  top: 62vh;
  left: 72vw;
  background-color: transparent;
}

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

.button-random{
  font-family: 'Bacasime Antique', serif;
  font-size: 4vh;
  width: 25vw;
  height: 10.65vh;
  position: absolute;
  top: 73vh;
  left: 72vw;
  background-color: transparent;
}

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

.button-audiovisual{
 font-family: 'Bacasime Antique', serif;
  font-size: 4vh;
  width: 25vw;
  height: 10.65vh;
  position: absolute;
  top: 84vh;
  left: 72vw;
  background-color: transparent;
}

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

.buttons-volvermenu{
  font-family: 'Bacasime Antique', serif;
  font-size: 2.5vh;
  width: 15vw;
  height: 5.65vh;
  position: relative;
  top: 90vh;
  left: 5vw;
  background-color: transparent;
}
.buttons-volvermenu:hover{
  cursor: pointer;
  background-color: white;
}

.titulo{
  position: absolute;
  top: 15%;
  left: 75%;
  font-size: 4vh;
  color: #FE00E7;
}