html, body{
 margin:0;
 scroll-behavior: smooth;
 font-family: 'Bitter', serif;
}
a{
  color: black;
  font-size: 2.9vw;
  text-decoration: none;
  font-family: 'Vina Sans', cursive;
 }
#volver{
  position: fixed;
    bottom: 90%;
    right: 2%;
   z-index:7;
}

#Portada{
  width: 100vw;
  height: 100vh;
  background-color: white;
  opacity: 0.9;
 background-size: cover;
  background-position: center center;
  background-image: url(https://i.pinimg.com/originals/9b/19/87/9b1987228edf9587e3922c8812bc6074.jpg);
}
#Titulo{
  font-family: 'Bitter', serif;
  position:absolute;
  font-size: 6vw;
  margin-left: 30%;
  margin-top:15%;
}

#botonPerfil{
 text-align: center; 
  position: absolute;  width: 15%; 
  top: 80%; right: 85%; left:5%;
}
#botonPerfil:hover{
 text-align: center; 
  position: absolute;  width: 15%; 
  top: 78%; right: 85%; left:5%;
  background-opacity: 0.2;
  font-size: 3.7vw;
  padding: 0.7vw;
   background-color: RGB(189,189,189,0.6);
  outline-offset: 500px;
}

#botonIllia{
    text-align: center; 
  position: absolute;  width: 15%; 
  top: 76%; right: 67%; left:23%;
}
#botonIllia:hover{
  text-align: center; 
  position: absolute;  width: 20%; 
  top: 74%; right: 67%; left:20%;
  font-size: 3.7vw;
  padding: 0.7vw;
    background-color: RGB(189,189,189,0.6);
  outline-offset: 5px;
}

#botonAudiovisual{
  text-align: center; 
  position: absolute;  width: 15%; 
  top: 80%; right: 49%; left:43%;
}
#botonAudiovisual:hover{
  text-align: center-center; 
  position: absolute;  width: 15%;
  top: 78%; right: 49%; left:43%;
   font-size: 3.7vw;
  padding: 0.7vw;
    background-color: RGB(189,189,189,0.6);
  outline-offset: 5px;
}

#botonFuturo{
   text-align: center; 
  position: absolute;  width: 15%; 
  top: 80%; right: 31%; left:59%;
}
#botonFuturo:hover{
   text-align: center; 
  position: absolute;  width: 15%; 
  top: 78%; right: 31%; left:59%;
   font-size: 3.7vw;
  padding: 0.7vw;
    background-color: RGB(189,189,189,0.6);
  outline-offset: 5px;
}

#botonRandom{
  text-align: center; 
  position: absolute;  width: 15%; 
 top: 80%; right: 13%; left: 77%;
}
#botonRandom:hover{
  text-align: center; 
    position: absolute;  width: 15%; 
  top: 78%; right: 13%; left: 77%;
   font-size: 3.7vw;
  padding: 0.7vw;
   background-color: RGB(189,189,189,0.6);
  outline-offset: 5px;
}

#Perfil{
  background-color: #FFF59D;
  width: 100vw;
  height: 100vh;
}
#Perfiltitulo{
  font-family: 'Vina Sans', cursive;
  position:absolute;
  color: black;
  font-size: 7vw;
  letter-spacing: 0.2vw;
  margin-left: 2%;
  margin-top:0%;
}

#perfiltexto{
  font-family: 'Bitter', serif;
  position:absolute;
   width: 50vw;
  height: 100vh;
  font-size: 2.5vw;
   margin-left: 2%;
  margin-top:10%;
}
#perfiltexto01{
  font-family: 'Bitter', serif;
  position:absolute;
   width: 50vw;
  height: 100vh;
  font-size: 2.5vw;
   margin-left: 2%;
  margin-top:13%;
}
#perfiltexto0{
  font-family: 'Bitter', serif;
  position:absolute;
   width: 50vw;
  height: 100vh;
  font-size: 2.5vw;
   margin-left: 2%;
  margin-top:19%;
}
#perfiltexto1{
  font-family: 'Bitter', serif;
  position:absolute;
   width: 50vw;
  height: 100vh;
  font-size: 2.5vw;
   margin-left: 2%;
  margin-top:22%;
}
#perfiltexto2{
  font-family: 'Bitter', serif;
  position:absolute;
   width: 50vw;
  height: 100vh;
  font-size: 2.5vw;
   margin-left: 2%;
  margin-top:28%;
}
#perfiltexto3{
  font-family: 'Bitter', serif;
  position:absolute;
   width: 50vw;
  height: 100vh;
  font-size: 2.5vw;
   margin-left: 2%;
  margin-top:31%;
}

#perfil1{
   height: 50%;
  margin-top: 3%;
  margin-left: 55%; 
  transition: transform 1s;
    position: absolute;
}
#perfil1:hover{
   height: 50%;
  margin-top: 3%;
  margin-left: 55%; 
  transform: scale(1.1);
   position: cover;
}

#perfil2{
   height: 50%;
  margin-top: 12%;
  margin-left: 78%;
  transition: transform 1s;
    position: absolute;
}
#perfil2:hover{
   height: 50%;
  margin-top: 12%;
  margin-left: 78%;
  transform: scale(1.1);
    position: absolute;
}
#perfil3{
   height: 52%;
  margin-top: 19%;
  margin-left: 58%; 
  transition: transform 1s;
position: absolute;
}
#perfil3:hover{
   height: 52%;
  margin-top: 19%;
  margin-left: 58%;
  transform: scale(1.1);
position: absolute;
}

#sigperfil{
   color: black;
  position: absolute;
  font-family: 'Bitter', serif;
  margin-left: 82vw;
  margin-top: 87vh;
}

#Illia{
  background-color: #D9F8E4;
  width: 100vw;
  height: 100vh;
}
#Illiatitulo{
  font-family: 'Vina Sans', cursive;
  position:absolute;
  color: black;
  font-size: 7vw;
  letter-spacing: 0.2vw;
  margin-left: 2%;
  margin-top:0%;
}
#illiatexto{
  font-family: 'Bitter', serif;
   width: 95vw;
  height: 100vh;
  font-size: 2.5vw;
   margin-left: 2%;
  margin-top:8%;
  position: absolute;
}

#intercolegiales{
  height: 55%;
  margin-top: 14.5%;
  margin-left: 2%;
  transition: transform 1.5s;
  position: absolute;
   border-radius: 30px;
  z-index: 1;
}
#intercolegiales:hover {
	height: 55%;
  margin-top: 14.5%;
  margin-left: 2%;
  transform: scale(1.1);
  border: 4px solid #0162A7;
  border-radius: 30px;
  }
#maqueta{
  height: 55%;
  margin-top: 14.5%;
  margin-left: 30%;
  position: absolute;
transition: transform 1.5s;
  border-radius: 30px;
  z-index: 1;
}
#maqueta:hover{
  height: 55%;
  margin-top: 14.5%;
  margin-left: 30%;
  transform: scale(1.1);
  border: 4px solid #0162A7;
  border-radius: 30px;
}
#plastica{
  height: 55%;
  margin-top: 14.5%;
  margin-left: 50%;
  position: absolute;
transition: transform 1.5s;
border-radius: 30px;
z-index: 1;
}
#plastica:hover {
  height: 55%;
  margin-top: 14.5%;
  margin-left: 50%;
	transform: scale(1.1);
  border: 4px solid #0162A7;
  border-radius: 30px;
  }
#rollito{
  height: 55%;
  margin-top: 14.5%;
  margin-left: 75%;
  position: absolute;
  transition: transform 1.5s;
  border-radius: 30px;
  z-index: 1;
}
#rollito:hover {
    height: 55%;
 margin-top: 14.5%;
  margin-left: 75%;
transform: scale(1.1);
  border: 4px solid #0162A7;
  border-radius: 30px;
  }

#sigillia{
   color: black;
  position: absolute;
  font-family: 'Bitter', serif;
 margin-left: 82vw;
  margin-top: 87vh;
}

#Imagenes{
 background-color: 
    #0162A7 ;
  width: 100vw;
  height: 100vh;
}
#Imagenestitulo{
    font-family: 'Vina Sans', cursive;
  position:absolute;
  color: black;
  font-size: 7vw;
  letter-spacing: 0.2vw;
  margin-left: 2%;
  margin-top:0%;
}

#marquee{
  position: absolute;
  width: 100vw;
  height:100vh;
  margin-top:10%;
}

#sigimagenes{
   color: black;
  position: absolute;
  font-family: 'Bitter', serif;
margin-left: 82vw;
  margin-top: 87vh;
}

#Futuro{
   background: linear-gradient(
    to top,
    #D9F8E4 70%,
   #0162A7 );
  width: 100vw;
  height: 100vh;
}

#Futurotitulo{
    font-family: 'Vina Sans', cursive;
  position:absolute;
  color: black;
  font-size: 7vw;
  letter-spacing: 0.2vw;
  margin-left: 2%;
  margin-top:0%;
}

#futurotexto{
  color: black;
  position:absolute;
  text-align: center;
   width: 90vw;
  height: 100vh;
  font-size: 2.5vw;
   margin-left: 2%;
  margin-top:10%;
  z-index: 1;
}
#futuroimgfondo{
 height: 90vh;
  margin-left: 35%;
  margin-top: 1%;
  opacity: 0.6;
   position:absolute;
}

#futuroimg{
 height: 90vh;
  margin-left: 35%;
  margin-top: 1%;
  opacity: 0;
   position:absolute;
  z-index: 2;
}

#futuroimg:hover{
 height: 90vh;
  margin-left: 35%;
  margin-top: 1%;
  opacity: 1;
   position:absolute;
}

#sigfuturo{
   color: black;
  position: absolute;
  font-family: 'Bitter', serif;
margin-left: 82vw;
  margin-top: 87vh;
  z-index: 3;
}

#Random{
     background: linear-gradient(
    to top,
    #FFF59D 82%,
   #D9F8E4 );
  width: 100vw;
  height: 100vh;
}

#Randomtitulo{
  font-family: 'Vina Sans', cursive;
  position:absolute;
  color: black;
  font-size: 7vw;
  letter-spacing: 0.2vw;
  margin-left: 2%;
  margin-top:0%;
}

#video{
  margin-top: 15%;
  margin-left: 30%;
}

#FFECB3