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

a{
  color: black;
  font-size: 3.5vw;
  text-decoration: none;
  font-family: 'Vina Sans', cursive;
 }

#volver{
  position: fixed;
    bottom: 1%;
    right: 3%;
   z-index:2;
}

#Portada{
  width: 100vw;
  height: 100vh;
  background-color: #E2F3FD;
 background-size: cover;

}

#Titulo{
  font-family: 'Bitter', serif;
  position:absolute;
  font-size: 6vw;
  margin-left: 80vh;
  margin-top:74vh;
  color:#304F6D;
}

#Subtitulo{font-family: 'Bitter', serif;
  position:absolute;
  font-size: 3.8vw;
  margin-left: 90vh;
  margin-top:86vh;
  color:#E07D54;
  
}

#botonPerfil {
  background-color: #899481;
  color: white;
  font-size: 3vw;
  font-family: Karma;
  text-align: center; 
  position: absolute; 
  width: 17.6vw;
  top: 2.3vw; 
  left: 2vw;
 border-radius: 13px;
}

#botonPerfil:hover{
  background-color:#304F6D;
  color: white;
  font-size: 3vw;
  font-family: Karma;
  text-align: center; 
  position: absolute;
  width: 17.6vw;
  top: 2.3vw;
  left: 2vw;
  border-radius: 13px;
}

#botonIllia{
  background-color:#899481;
  color: white;
  font-size: 3vw;	
  font-family: Karma;
  text-align: center;
  position: absolute;
  width: 17.6vw;
  top: 9vw;
  left: 2vw;
  border-radius: 13px;
}

#botonIllia:hover{
  background-color:#304F6D;
  color: white;
  font-size: 3vw;
  font-family: Karma;
  text-align: center; 
  position: absolute;
  width: 17.6vw;
  top: 9vw; 
  left: 2vw;
}

#botonAudiovisual{
  background-color:#899481;
  color: white;
  font-size: 3vw;
  font-family: Karma;
  text-align: center;	
  position: absolute;
  width: 17.6vw;
  top: 15.7vw;
  left: 2vw;
  border-radius: 13px;
}

#botonAudiovisual:hover{
  background-color:#304F6D;
  color: white;
  font-size: 3vw;
  font-family: Karma;
  text-align: center; 
  position: absolute;
  width: 17.6vw;
  top: 15.7vw; 
  left: 2vw;
}

#botonFuturo{
  background-color:#899481;
  color: white;
  font-size: 3vw;
  font-family: Karma;
  text-align: center;
  position: absolute;
  width: 17.6vw;
  top: 22.4vw;
  left: 2vw;
  border-radius: 13px;
}

#botonFuturo:hover{
  background-color:#304F6D;
  color: white;
  font-size: 3vw;
  font-family: Karma;
  text-align: center; 
  position: absolute;
  width: 17.6%;
  top: 22.4vw; 
  left: 2vw;
}

#botonRandom{
  background-color:#899481;
  color: white;
  font-size: 3vw;
  font-family: Karma;
  text-align: center;
  position: absolute;
  width: 17.6vw;
  top: 29.1vw;
  left: 2vw;
  border-radius: 13px;
}

#botonRandom:hover{
  background-color:#304F6D;
  color: white;
  font-size: 3vw;
  font-family: Karma;
  text-align: center; 
  position: absolute;
  width: 17.6vw;
  top: 29.1vw; 
  left: 2vw;
}

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

#Perfiltitulo{
  font-family: ;
  position:absolute;
  color: #304F6D;
  font-size: 5vw;
  letter-spacing: 0.1vw;
  margin-left: 2vw;
  margin-top: 5vw;
}

#perfiltexto{
  font-family: ;
  position:absolute;
   width: 50vw;
  height: 100vh;
  font-size: 3.5vw;
  margin-left: 2vw;
  margin-top:10vw;
  color:#899481;}

#perfiltexto1{
  font-family: ;
  position:absolute;
   width: 50vw;
  height: 100vh;
  font-size: 3.5vw;
   margin-left: 2vw;
  margin-top:25vw;
    color:#899481;}

#perfiltexto2{
  font-family: ;
  position:absolute;
   width: 50vw;
  height: 100vh;
  font-size: 3.5vw;
   margin-left: 2vw;
  margin-top:35vw;
    color:#899481;
  
}

#foto1{
  width:20vw;
  margin-top: 6vw;
  margin-left:53%;
  position:absolute;
}

#foto2{
  margin-top: 6vw;
  margin-left: 73vw;
  position:absolute;
  width: 22vw;}
  
#perfil1{
  position:absolute;
  width: 24vw;
  top: 2.3vw;
  left: 20vw;
}

#perfil2{
  position:absolute;
  width: 24vw;
  top: 2.3vw;
  left: 45vw;
}

#perfil3{
  position:absolute;
  width: 24vw;
  top: 2.2vw;
  left: 70vw;
}

#sigperfil{
   color: #F5F5F5;
  position: absolute;
  font-family: 'Bitter', serif;
  margin-left: 80vw;
  margin-top: 90vh;
}

#Illia{
  background-color:#E2F3FD;
  width: 100vw;
  height: 100vh;
}

#Illiatitulo{
  font-family: ;
  position:absolute;
  color: #304F6D;
  font-size: 5vw;
  letter-spacing: 0.1;
  margin-left: 2vw;
  margin-top:5vw;
}

#illiatexto{
  font-family: ;
  position:absolute;
   width: 50vw;
  height: 100vh;
  font-size: 2.5vw;
   margin-left: 2vw;
  margin-top:11vw;
  color:#899481;
  
}

#Imagenes{
  background-color:#E2F3FD;
  width: 100vw;
  height: 150vh;}

#Imagenestitulo{
  font-family: ;
  position:absolute;
  color: #304F6D;
  font-size: 5vw;
  margin-left: 2vw;
  margin-top:5vw;
  width:20px;
  text-align:center;
  line-height:60px;
}

#contenedor {
  position: absolute;
  width: 70vw;
  height: 65vh;
  background-color:  #E2F3FD;
  top: 325vh;
  left: -12vw;
  background-image: url(https://i.pinimg.com/750x/57/6a/d3/576ad3f9533598ecc904cbe5446a8a97.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
}



#foto4{
  height: 50vw;
  margin-top: 30vw;
  margin-left: 2vw;
  position:absolute;
}
#foto5{
  height: 50vw;
  margin-top: 30vw;
  margin-left: 2vw;
  position:absolute;
}
#foto6{
  height: 50vw;
  margin-top: 30vw;
  margin-left: 2vw;
  position:absolute;
}
#foto7{
  height: 50vw;
  margin-top: 30vw;
  margin-left: 2vw;
  position:absolute;
}


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

#Futuro{
  background-color:#E2F3FD;
  width: 100vw;
  height: 100vh;
}

#Futurotitulo{
  font-family: ;
  position:absolute;
  color: #304F6D;
  font-size: 5vw;
  letter-spacing: 0.1;
  margin-left: 2vw;
  margin-top:5vw;
}

#futurotexto2{
  font-family: ;
  position:absolute;
   width: 50vw;
  height: 100vh;
  font-size: 2vw;
   margin-left: 2vw;
  margin-top:19vw;
  color:#E07D54;
}
#futurotexto1{
  font-family: ;
  position:absolute;
   width: 50vw;
  height: 100vh;
  font-size: 2vw;
   margin-left: 2vw;
  margin-top:11vw;
  color:#899481;
}
#futurotexto3{
  font-family: ;
  position:absolute;
   width: 50vw;
  height: 100vh;
  font-size: 2vw;
   margin-left: 2vw;
  margin-top:25vw;
  color:#899481;
}
#caraamarilla {
  width:13vw;
  heigh:13vw;
  margin-top:3vw;
  margin-left: 16vw;
}
  
#sigfuturo{
   color: black;<div id="Portada">
  <h1 id="Titulo">Sofia Nouguez</h1>
  <a id="botonPerfil" href="#Perfil">Perfil</a>  
  <a id= "botonIllia" href="#Illia">Colegio</a>
    <a id= "botonAudiovisual" href="#Imagenes">Galeria</a>
  <a id="botonFuturo" href="#Futuro">Futuro</a> 
  <a id= "botonRandom"
href="#random">Random</a>
</div>
<div id="Perfil">
  <p id="perfiltexto">INSERTAR TEXTO
  </p>
 
  <a id= "sigperfil" href="#Illia">Siguiente</a>
</div>

<div id="Illia">
  <h1 id="Illiatitulo">Mi paso por el colegio</h1>
  <h1 id="illiatexto"></h1>
  

<div id="Imagenes">
  <h1 id="Imagenestitulo"> GalerIa</h1>
  <img id="foto1" src=>
  <img id="foto2" src>
  <img id="foto3" src=>
  <img id="foto4" src=>
  <img id="foto5" src=>
  <img id="foto6" src=>
  <img id="foto7" src=>
  <img id="foto8" src=>
  <img id="foto9" src=>
  

<div id="Futuro">
  <h1 id="Futurotitulo"> Futuro</h1>
  <h1 id="futurotexto"></h1>
  <a id= "sigfuturo" href="#Random">Siguiente</a>
</div>

<div id="Random">
  <h1 id="Randomtitulo"> RandoM</h1>
</div>

<a id="volver"
   href="#Portada">
    

  position: absolute;
  font-family: 'Bitter', serif;
  margin-left: 80vw;
  margin-top: 90vh;
}

#Random{
   background-color:#E2F3FD;
  width: 100vw;
  height: 100vh;
}

#Randomtitulo{
  font-family: ;
  position:absolute;
  color: #304F6D;
  font-size: 5vw;
  letter-spacing: 0.1;
  margin-left: 2vw;
  margin-top:5vw;
}


*{
  font-famiy: Arial;
  margin: 0px;
  padding: 0px;
  
}
.gallery-container h3{
  font-size: 26px;
  line-height: 55px;
  margin: 5px 0px 0px 5px;
}

.gallery-full{
  margin: 0px auto;
}

@media (min-width: 1270px){
  
  .gallery-full{
    width: 1240px;
    
  }
  .gallery-container{
    padding: 0px 15px;
    
  }
  .gallery-box{
    width: 100%;
    
  }
  .gallery-box img{
    cursor: pointer;
    margin: 5px;
    width:228px;
    height:200px;
    
  }

}
@media (max-width: 930px){
  .gallery-full{
    width: 900;
  }
  .gallery-container{
    padding: 0px 15px;
  }
  .gallery-box{
    width: 100%;
  }
  .gallery-box img{
    cursor: pointer;
    margin: 5px;
    width:238px;
    height:200px;
  
  }
}
@media (max-width: 620px){
  .gallery-full{
    width: 620;
  }
  .gallery-container{
    padding: 0px 10px;
  }
  .gallery-box{
    width: 100%;
  }
  .gallery-box img{
    cursor: pointer;
    margin: 5px;
    width:200px;
    height:180px;
   
  }
}

#imagencolegio1{
  height:30vw;
  width:30vw;
  margin-left:52vw; 
}
#teenbeachmovie{
   font-family: ;
  position:absolute;
   width: 50vw;
  height: 100vh;
  font-size: 2vw;
   margin-left: 2vw;
  margin-top:11vw;
  color:#304F6D;
}
#teenbeach2{
   font-family: ;
  position:absolute;
   width: 50vw;
  height: 100vh;
  font-size: 2vw;
   margin-left: 2vw;
  margin-top:20vw;
  color:#899481;
}
#fototeenbeachmovie {
  height: 42vw;
  width:25vw;
  margin-left: 55vw;
  top:2vw;
}