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

/*--------- Portada ----------*/

#portada {
  background-color: #536DFE;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 28" width="56" height="28"%3E%3Cpath fill="%239C92AC" fill-opacity="0.4" d="M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z"%3E%3C/path%3E%3C/svg%3E');
  width: 100vw;
  height: 100vh;
}

#Titulo {
  font-size: 6vw;
  text-align: center;
  font-family: 'Caprasimo', cursive;
}

#subtitulo {
  font-size: 4vw;
  text-align: center;
  margin-top: 6vh;
  font-family: 'Caprasimo', cursive;
}

#PieDePagina {
  width: 100vw;
  height: 4vh;
  position: fixed;
  bottom: 0;
  font-family: 'Caprasimo', cursive;
  font-size: 4vh ;
  background-color: white;
  text-align: center;
  z-index: 100;
}

/*------- Todos -------*/

.Titulos{  font-size: 4vw;
font-family: 'Caprasimo', cursive
}

.Textos{ 
  font-size: min(2vw, 14px);
  font-family: 'Caprasimo', cursive;
  text-align: center;
  line-height: 0.75;
}

.vineta{
  width: 100vw;
  height: 100vh;
}
/*------- botonesportada -------*/

#buttonv{
  width: 75px;
  height: 75px;
  background-image: url("./img/volver.png");
  background-size: contain;
  margin-top: 5vh;
  margin-left: 5vw;
}

#botonperfil{
  background-image: url("https://i.pinimg.com/564x/23/20/76/232076352882051c5e9107605a92113c.jpg");
  background-size: cover;
  width: 13vw;
  height: 12vw;
}

#botonperfil:hover {
 cursor: pointer;
 background-image: url("https://i.pinimg.com/564x/c3/46/3b/c3463baeb79ff80fbfda95da1cdfeb3e.jpg");
}

#botonmipasoporelillia{
  background-image: url("https://i.pinimg.com/564x/35/8c/12/358c127d700f194fdf86483fe613acd1.jpg");
  background-size: cover;
  width: 13vw;
  height: 12vw;
}

#botonmipasoporelillia:hover {
 cursor: pointer;
 background-image: url("https://i.pinimg.com/564x/ba/b0/82/bab082e62606d3d69543b96657082240.jpg");
}

#botonrandom{
  background-image: url("https://i.pinimg.com/564x/cb/15/7a/cb157a2ea48a70d151b05a7fcd6db396.jpg");
  background-size: cover;
  width: 13vw;
  height: 12vw;
}

#botonrandom:hover {
 cursor: pointer;
 background-image: url("https://i.pinimg.com/564x/9b/2a/78/9b2a78b25c0c3b93cb8804959e610e2a.jpg");
}

#botonaudiovisual{
  background-image: url("https://i.pinimg.com/564x/15/28/a9/1528a9d2c7e2689ed1ac692cd4b34072.jpg");
  background-size: cover;
  width: 13vw;
  height: 12vw;
}

#botonaudiovisual:hover {
 cursor: pointer;
 background-image: url("https://i.pinimg.com/564x/f0/03/f1/f003f1bd0387981e06b6e713f1a2cac2.jpg");
}

#botonfuturo{
  background-image: url("https://i.pinimg.com/736x/65/63/eb/6563eb2618616701ee3bd0392755894b.jpg");
  background-size: cover;
  width: 13vw;
  height: 12vw;
}

#botonfuturo:hover {
 cursor: pointer;
 background-image: url("https://i.pinimg.com/736x/73/23/c5/7323c5e04f62e5a62444ee369a06932b.jpg");
}

#Botonesperfil {
  width: 90%;
  margin: auto;
  margin-top: 13vh;
  height: 10vh;
  justify-content: space-around;
  display: flex;
}

a {
  text-decoration: none;
  color: black;
}

.button-54 {
  font-family: "Open Sans", sans-serif;
  font-size: 1.5vw;
  letter-spacing: 0.1vw;
  text-decoration: none;
  text-transform: uppercase;
  color: #000;
  cursor: pointer;
  border: 3px solid;
  padding: 0.25em 0.5em;
  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation; 
  padding: 0.25em 0.75em;
  background-color: white;
}

.button-54:active {
  box-shadow: 0px 0px 0px 0px;
  left: 61vw;
}

/*--------- Perfil ----------*/

#perfil {
  background-color: #BA68C8;
  width: 100vw;
  height: 100vh;
}  

.fotosPerfil {
  max-width: 100px;
  width: 15%;
}

#Fotoperfil1 {
 position: absolute;
  left:2vw;
  top: 125vh;
}
  
#Fotoperfil2 {
position: absolute;
left:22vw; 
top: 125vh;
}
  
#Fotoperfil3 {
position: absolute;
left:42vw;
top: 125vh;
 } 
  
 #Fotoperfil4 {
 position: absolute;
 left:62vw;
 top: 125vh;
}
  
#Fotoperfil5 {
position: absolute;
left:82vw; 
top: 125vh;
}
  
#Fotoperfil6 {
position: absolute;
left: 2vw;
top: 145vh;
} 
#Fotoperfil7 {
 position: absolute;
  left:22vw;
  top: 145vh;
}
  
#Fotoperfil8 {
position: absolute;
left:42vw; 
top: 145vh;
}
  
#Fotoperfil9 {
position: absolute;
left:62vw;
top: 145vh;
 } 
  
 #Fotoperfil10 {
 position: absolute;
 left:82vw;
 top: 145vh;
}
  
#Fotoperfil11 {
position: absolute;
left:2vw; 
top: 165vh;
}
  
#Fotoperfil12 {
position: absolute;
left:22vw;
top: 165vh;
} 
#Fotoperfil13 {
 position: absolute;
 left:42vw;
 top: 165vh;
}
  
#Fotoperfil14 {
position: absolute;
left:62vw; 
top: 165vh;
}
  
#Fotoperfil15 {
position: absolute;
left:82vw;
top: 165vh;
} 
  
/*------- Mipasoporelillia --------*/

#mipasoporelillia {
  background-color: #BA68C8;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"%3E%3Cg fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.4"%3E%3Cpath opacity=".5" d="M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z"/%3E%3Cpath d="M6 5V0H5v5H0v1h5v94h1V6h94V5H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
  width: 100vw;
  height: 100vh;
  }

#MyVideo {
  position: relative;
  margin-bottom: 33vh;
  margin-left: 33vw;
  height: 80vh;
  width: 40vw;
}
  

/*--------- Random ----------*/

#random {
  background-color: #BA68C8;
  width: 100vw;
  height: 100vh;
}
  

#fotorandom {
  position: relative;
  left: 10vw;
  top: 10vh;
  widht: 300px;
  height: 350px;
}
#textoRandom {
  position: relative;
  width: 50vw;
  top: -55vh;
}
.Textosrandom {
 font-size: 2vw;
 font-family: 'Caprasimo', cursive;
 position: relative;
 left: 33vw;
margin-top: 0vh;
}


/*--------- audiovisual ----------*/

#audiovisual {
  background-color: #BA68C8;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"%3E%3Cg fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.4"%3E%3Cpath opacity=".5" d="M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z"/%3E%3Cpath d="M6 5V0H5v5H0v1h5v94h1V6h94V5H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
  width: 100vw;
  height: 100vh;
}
  

/*--------- futuro ----------*/

#futuro {
  background-color: #BA68C8;
  width: 100vw;
  height: 100vh;
}
.fotosfuturo{
  max-width: 130px;
  width: 15%;
}

#Fotofuturo1{
 position: relative;
 left: 45vw;
 top: 2vh;
}

#Fotofuturo2{
 position: relative;
 left: 2vw;
 top: 1vw;
}
#Fotofuturo3{
  position: relative;
 left: 2vw;
 top: 1vw;
}
#Fotofuturo4{
  position: relative;
 left: 2vw;
 top: 1vw;
}
#Fotofuturo5{
 position: relative;
 left: 2vw;
 top: 1vw;
}
#Fotofuturo6{
 position: relative;
 left: 2vw;
 top: 1vw;
}

/*------- botonvolveralmenu -------*/

#enlaceVolver {
  position: fixed;
  left: 75vw;
  top: 85vh;
  z-index: 99;
}