@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

.body{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin:0%;
    padding:0%;
    background-color: darkkhaki;
    overflow: auto;
    box-sizing: border-box;
}

/* Encabezado (hijo del body)*/
.header:nth-child(1){
    order: 0;
    flex: 0 1 auto;
    align-self: center;
    background-color: #ff637d;
    width: 100%;
    height: 7vh;
    margin:0%;
    padding:0%;
}

/* Contenido Principal (hijo del body) */
.main:nth-child(2){
    order: 0;
    flex: 0 1 auto;
    align-self: center;
    width: 100%;
    margin:0%;
    padding:0%;
}

/* Contenido principal: contenedor padre de las secciones */
.main {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin:0%;
    padding:0%;
}

/* Sección 1: Presentación (hijo)*/
.seccion1:nth-child(1){
    order: 0;
    flex: 0 1 auto;
    align-self: center;
    background-color:#ff637d;
    margin:0%;
    padding:0%;
    width: 100%;
    height: 100vh;
}

/* Sección 1: Presentación (padre)*/
.seccion1{
    background-color: #ff637d;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}

/* Título: Presentación */
.titulo1:nth-child(1){
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
}

.titulo1{
    text-align: center;
    font-size: 9vmin;
    font-family: 'Bebas Neue', cursive;
    height: 10%;
}

/* Sección 2: Mi paso por el Illia (hijo) */
.seccion2:nth-child(2) {
    order: 0;
    flex: 0 1 auto;
    align-self: center;
    background-color: #f4f1bb;
    margin:0%;
    padding:0%;
    width: 100%;
    height: 100vh;
}

/* Sección 2: Mi paso por el Illia (padre) */
.seccion2{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    overflow: auto;
}

/* Título: Mi paso por el Illia */
.titulo2:nth-child(1){
    order: 0;
    flex: 0 1 auto;
    align-self: center;
    font-family: 'Bebas Neue', cursive;
}

.titulo2{
    text-align: center;
    font-size: 9vmin;
}

/* Sección 3: Sobre mí (hijo) */
.seccion3:nth-child(3) {
    order: 0;
    flex: 0 1 auto;
    justify-content: flex-start;
    background-color: #66d7d1;
    margin:0%;
    padding:0%;
    width: 100%;
    height: 100vh;
}

/* Sección 3: Sobre mí (padre) */
.seccion3{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    overflow: auto;
}

/* Título: Sobre mí */
.titulo3:nth-child(1){
    order: 0;
    flex: 0 1 auto;
    align-self: center;
    font-family: 'Bebas Neue', cursive;
}

.titulo3{
    text-align: center;
    font-size: 9vmin;
}

/* Sección 4: Expectativas (hijo) */
.seccion4:nth-child(4) {
    order: 0;
    flex: 0 1 auto;
    justify-content: flex-start;
    background-color: #fff87f;
    width: 100%;
    height: 100vh;
    margin:0%;
    padding:0%;
}

/* Sección 4: Expectativas (padre)*/
.seccion4{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center; 
    width: 100%;
    height: 100vh;
}

/* Título: Expectativas */
.titulo4:nth-child(1){
    order: 0;
    flex: 0 1 auto;
    align-self: center;
    font-family: 'Bebas Neue', cursive;
}

.titulo4{
    text-align: center;
    font-size: 9vmin;
}

/* Collage expectativas: división (hijo) */
.img_expectativas:nth-child(2){
    order: 0;
    flex: 0 1 auto;
    align-self: center;
} 

/* Link hacia arriba */
.main img{
    width: 10vmin;
    height: auto;
}

/* Collage: división (padre) */
.img_expectativas{
    width: 100%;
    height: 60vh;
    margin-top: 2vmin;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

/* Imagen: Hijo del div */
.img_expectativas img:nth-child(1){
    width: 73%;
    order: 0;
    flex: 0 1 auto;
    align-self: center;
}

.subir{
    position: fixed;
    bottom: 0%;
    right: 0%;
    margin-right: 2vmin;
    margin-bottom: 1%;
}