@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Caveat:wght@500&family=Inconsolata:wght@300&family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Noto+Serif:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Courgette&family=Noto+Serif:wght@300&display=swap');

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

#pagina1{
  background-color: black;
  background-position: right;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: row;
  margin: 0px;
}

.anuario{
  font-size: 9vw;
  color: white;
  font-family: 'Courgette', cursive;
  text-align: center;
  margin-bottom: 4.5vh;
  margin-top: 3vh;
  text-decoration: underline;
}


.nombre{
  font-size: 4vw;
  font-weight: bold; 
  color: white;
  font-family: 'Noto Serif', serif;
  text-align: center;
  margin-bottom: 4.5vh;
  margin-top: 3vh;
  text-decoration: underline;
}

.promo23{
  font-size: 4vw;
  font-weight: bold; 
  color: white;
  font-family: 'Courgette', cursive;
  text-align: center;
  margin-bottom: 4.5vh;
  margin-top: 3vh;
  text-decoration: underline;
}


.textoPagina1{
  margin-top: 35vh;
  margin-right: 3vw;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  height: 30vh;
}

a{
  align: center;
  color: white;
  text-decoration: none;
	font-family: 'Caprasimo', cursive;
  font-size: 2.5vw;
  font-weight: bold;
  transition: color 1s;
}

.botones{
  margin-top: 10vh;
  margin-left: 5vw;
  margin-bottom: 10vh;
  width: 40vw;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-decoration: none;
}

#boton1{
  padding: 3vh;
  margin: 3vh;
  width: 20vw;
  text-align: center;
  border-radius: 50px;
  box-shadow: white;
  border: 2px solid white;
}


#boton2{
  padding: 3vh;
  margin: 3vh;
  width: 20vw;
  text-align: center;
  text-decoration: none;
  border-radius: 50px;
  border: 2px solid white;
  
}

#boton3{
  padding: 3vh;
  margin: 3vh;
  width: 20vw;
  text-align: center;
  text-decoration: none;
  border-radius: 50px;
  border: 2px solid white;
  
}


#boton4{
  padding: 3vh;
  margin: 3vh;
  width: 20vw;
  text-align: center;
  text-decoration: none;
  border-radius: 40px;
  border: 2px solid white;
  
}

#boton5{
  padding: 3vh;
  margin: 3vh;
  width: 20vw;
  text-align: center;
  text-decoration: none;
  border-radius: 50px;
  border: 2px solid white;
}



#pagina2{
  background-color: ;
  margin: 0;
  height: 100vh;
  width: 100vw;
}

.titulopagina{
  font-size: 6vw;
  color: black;
  font-family: 'Courgette', cursive;
  text-align: center;
  margin-bottom: 7vh;
  margin-top: 0vh;
  padding-top: 3vh;
  text-decoration: underline;
}


.contenedor{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 60vh;
  margin-top: 3vh;
  margin-bottom: 3vh;
}

.textoSobreMi{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 40vw;
}


.imagenPerfil{
  width: 30vw;
  border: 4px solid black;
  border-radius: 20px;
  font-family: 'Caprasimo', cursive;
  font-size: 2.5vw;
  color: black;
}

#pagina3{
  background-color: purple;
  height: 100vh;
  width: 100vw;
  margin: 0px;
}

.futuro{
  font-size: 6vw;
  color: white;
  font-family: 'Caprasimo', cursive;
  text-align: center;
  margin-bottom: 3vh;
  margin-top: 0vh;
}

.contenidoIllia{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  
}

.imagenIllia{
  width: 30vw;
  border: 2px solid white;
  border-radius: 20px;
  margin-left: 8vw;
}

.texto{
  color: white;
  font-size: 1.5vw;
  font-family:'Noto Serif', serif;
  text-align: center;
  margin-right: 3vw;
}

.textoperfil{
  color: black;
  font-size: 2.3vw;
  font-family:'Noto Serif', serif;
}

.textofuturo{
  color: white;
  font-size: 2vw;
  font-family:'Noto Serif', serif;
  text-align: center;
  margin-right: 3vw;
}

.botonVolver{
  height: 15vh;
  margin-right: 7vw;
  position: relative;
  
}


#pagina4{
  background-color: blue;
  margin: 0px;
  height: 100vh;
  width: 100vw;
}

.container-fotos{
  margin: auto;
  display: flex;
  margin-bottom:5vmin;
}

.container-fotos img{
  margin: 4vmin;
  height: 25vmin;
  width: 20%;
  border: 2px solid white;
  border-radius: 15px;
}



#pagina5{
  background-color: red ;
  margin: 0px;
  height: 100vh;
  width: 100vw;
}

.contenedor-general{
  display: flex;
}

.videoyt{
  border: 3px solid white;
  margin-top: 7vw;
  border-radius: 15px;
  margin-left: 2.3vw;
}

#pagina6{
  background-color: green;
  margin: 0px;
  height: 100vh;
  width: 100vw;
}

.imgfuturo{
  width: 30vw;
  border: 2px solid white;
  border-radius: 20px;
  margin-left: 12vw;
}