/* letras que importé de googlefonts */
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;700;800&display=swap');
body {
    margin:0; padding:0;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* header, en el que está el nav y el h1 (aunque lo último no es lo más recomendable) */
header:nth-child(1) {
    background-color: #6F2DBD;
    height: 10vh;
    width:100%;
    margin:0; padding:0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
    /* TÍTULO DE LA PÁGINA */
    header h1:nth-child(1) {
    font-size: 7vmin;
    color: #cefaf7;
    margin-left:1vmin;
    font-family: 'Righteous', cursive;
    }
    /* NAVEGADOR PARA IR A SECCIONES Y VOLVER AL CURSO */
        header nav:nth-child(2) {
            margin:0; padding:0;
            display:flex;
            flex-direction:row;
            justify-content: space-around;
            width:50%;
        }
            /* DIFERENTES IMÁGENES QUE SIRVEN PARA IR A LAS DIFERENTES SECCIONES */
            header img {
                height: 7vmin;
                margin-top:0.5vmin;
                padding-left:0.5vmin;
                padding-right:0.5vmin;
            }
                header img:hover {
                    border:#cefaf7 0.25vmin solid;
                    padding:0.5vmin;
                    transition: 300ms;
                }
            /* BOTÓN PARA VOLVER AL CURSO */
            header .volver {
                padding:0.5vmin;
                border: 0.5vmin #cefaf7 outset;
                font-size: 3vmin;
                color: #cefaf7;
                font-family: 'Righteous', cursive;
                text-align: center;
                align-self: center;
            }
/* MAIN, donde están las secciones y el botón de regreso al inicio */
main:nth-child(2) {
    margin:0; padding:0;
    width: 100%;
    display:flex;
    flex-direction: column;
}
/* características que tienen en común todas las secciones que agregué, si quisiese dsp cambiarle algo a alguna, 
puedo hacer abajo porque lo que está más abajo tiene más importancia */
main section {
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    width:100%;
    margin:0; padding:0;
}
    /* Diferentes secciones con sus h2 */
    /* seccion 1: presentación */
    .seccion1:nth-child(1){
        background-color: #a663cc;
        display:flex;
        height: 90vh;
        flex-direction:column;
        align-items:center;
        justify-content:space-around;
    }
            .seccion1 h2:nth-child(1) {
                color:#6F2DBD;
                margin:0; padding:0;
                font-family: 'Monoton', cursive;
                font-size:8vmin;
                justify-self:flex-start;

            }
                .cajaparrafo1:nth-child(2) {
                    width:85vw;
                    border-left: #6F2DBD solid 0.75vmax;
                    background-color: #a359ce;
                    padding:0.75vmax;
                    display:flex;
                    align-self: flex-end;
                    align-items:center;
                }
                    .presentacionparrafo1:nth-child(1) {
                        font-size:3.15vmin;
                        color:#cefaf7;
                        font-family:'Roboto Condensed', sans-serif;
                        text-align: justify;
                        text-indent: 1vmax;
                        font-weight: 500;
                    }
                .cajafotoyparrafo:nth-child(3) {
                    padding:0;
                    margin:0;
                    margin-top:1vmax;
                    width:85vw;
                    background-color: #a359ce;
                    padding:0.75vmax;
                    border-right: #6F2DBD solid 0.75vmax;
                    display:flex;
                    flex-direction:row;
                    align-self:flex-start;
                    justify-content:space-between;
                    align-items:center;
                }
                    .mifoto:nth-child(1) {
                        width:13vmax;
                        border:0.75vmax outset#cefaf7;
                        margin-left:2vw;
                        margin-right:2vw;
                    }
                    .presentacionparrafo2:nth-child(2) {
                        width:65vw;
                        font-size:3.15vmin;
                        color:#cefaf7;
                        font-family:'Roboto Condensed', sans-serif;
                        text-align: justify;
                        text-indent: 1vmax;
                        font-weight: 500;
                        margin-right:1vw;
                    }


    .seccion2:nth-child(2){
        background-color: #b298dc;
        height: 200vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:space-around;
    }
        .seccion2 h2:nth-child(1) {
            color: #a663cc;
            margin:0; padding:0;
            margin-top:1.5vmax;
            justify-self:flex-start;
            font-family: 'Monoton', cursive;
            font-size:8vmin;
        }

        .container:nth-child(2) {
            width: 100%;
            height: 120%;
            margin:0;
            padding:0;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items:center;
            flex-wrap:wrap;
        }
        
        .gallery-item {
            justify-self:center;
            width:30vmin;
            height: 30vmin;
            box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
            overflow: hidden;
        }
        .gallery-image {
            display: block;
            width:30vmin;
            height: 30vmin;
            transition: transform 800ms ease-out;
        }
        
        .gallery-image:hover {
            transform: scale(1.15);
        }
            .gallery-item {
                margin: 0;
            }
        

    .seccion3:nth-child(3){
        background-color: #B8D0EB;
        height: 100vh;
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        justify-content:space-between;
    }
        .titulodatos:nth-child(1){
            width: 100vw;
            display:flex;
            flex-direction: row;
            justify-content:center;
        }
        .seccion3 h2{
            color: #7f50ca;
            margin:0; padding:0;
            margin-top:1.5vmax;
            font-family: 'Monoton', cursive;
            font-size:8vmin;
            }

        .redes:nth-child(2) {
            width:10vw;
            height: 80vh;
            margin:0;
            align-self:flex-start;
            background-color: #eaeaff;
            display:flex;
            flex-direction: column;
            align-items: center;
            padding-top:2vh;
            justify-self: center;
            justify-content: space-between;
            border-top-right-radius: 1vw;
        }
            .botonesredes {
                width:5.5vw;
                border: solid 0.4vw #eaeaff;
            }
            .botonesredes:hover {
                border: dotted 0.4vw #6969e6;
                transition: 400ms;
            }
            
        .seccion3 article:nth-child(3) {
                width: 87vw;
                height: 90vh;
                margin:0;
                display:flex;
                flex-direction: row;
                justify-content: space-around;
                align-items:flex-start;
                flex-wrap:wrap;
                    }
            .seccion3 article div{
                margin:0.25vmin;
                border-radius: 0.25vw;
                padding:0;
                background-color: #895bbe;
                width: 18vmax; height: 25.5vmin;
                opacity: 0.75;
                align-self:center;
                display:flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding:0.25vmax;
            }
            .seccion3 article div p {
                text-align: center;
                color:#eaeaff;
                font-size:1.3vmax;
                font-family: 'Righteous', cursive;
            }
            .seccion3 article div a {
                color:#7a28aa;
                text-decoration:none;
            }
                .textodestacadosobremi {
                    font-size:1.4vmax;
                    color:#6dffdf;
                }
                .musicafavorita {
                    padding:0.15vmax;
                }
                    .logobandas {
                        height: 5.2vmax;
                }
                .ciencia {
                    display:flex;
                    flex-direction: column;
                    align-items:center;
                    justify-content:flex-start;
                }
                .ciencia h3 {
                    text-align: center;
                    color:#eaeaff;
                    font-size:2.5vmin;
                    font-family: 'Righteous', cursive;
                }
                .sobremiciencia {
                    height: 6vmax;
                }
                .qrmusica{
                    height: 5.2vmax;;
                }
                .mymadfatdiary {
                    height: 6vmax;
                    opacity: 1;
                }
                .mymadfatdiarycaja h3 {
                    text-align: center;
                    color:#eaeaff;
                    font-size:2.25vmin;
                    font-family: 'Righteous', cursive;
                }
                .juegos {
                    background-image: url(/images/fondojuegos.jpg);
                }
                .cajaterror {
                    background-image:url(/images/fondoterror.png);
                    color: rgb(206, 178, 178);
                }
    .seccion4:nth-child(4) {
        background-color: #cefaf7;
        height: 90vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items:center;
    }
        .seccion4 h2:nth-child(1) {
            color: #6F2DBD;
            margin:0; padding:0;
            margin-top:1.5vmax;
            font-family: 'Monoton', cursive;
            font-size:8vmin;
        }
        .collage:nth-child(2) {
            display: flex;
            flex-direction: row;
            flex-wrap:wrap;
            align-items: center;
            justify-content:space-around;
            height: 82vh;
            width: 100%;
        }
            .collage1:nth-child(1) {
                width:40vmax;
                height: 29.04vmax;
                margin:0.5vmin;
                padding:0.1vmin;
                border: rgb(56, 120, 194) 0.4vmin dashed;
            }
            .collage2:nth-child(2) {
                width:40vmax;
                height: 29.04vmax;
                margin:0.5vmin;
                padding:0.1vmin;
                border: rgb(56, 120, 194) 0.4vmin dashed;
            }
    /* botón para volver que obtuve de https://www.silocreativo.com/neumorfismo-disenando-botones-con-css/ (aunque lo modifiqué) */
    .boton:nth-child(5) {
        font-size: 2.5vmax;
        font-family: 'Righteous', cursive;
        padding:0.5vmax;
        width: min-content;
        position:fixed;
        bottom:0.6vmin;
        right: 1.5vh;
        display:flex;
        flex-direction: row;
        align-items: center;
        height: 4vh;
        margin-bottom:1vmax;
        background: #6F2DBD;
        background: linear-gradient(145deg, #753eb3, #5610a5);
        box-shadow: 0.25vmax 0.25vmax 0.75vmax -0.1vmax #4c1d81,
            -0.25vmax -0.25vmax 0.75vmax -0.1vmax #481b7c;
        border-radius: 0.5vmax;
    }
    .botonlink {
        text-decoration:none;
    }
    .boton p {
        color:#cefaf7;
    }
/* footer de la página, solo contiene el año */
.footer:nth-child(3){
    background-color: #6F2DBD;
    height:10vh;
    width: 100%;
    display:flex;
    flex-direction: row;
    align-items:center;
}
    .año:nth-child(1) {
        margin:0; padding:0;
        margin-left: 1.5vh;
        color:#cefaf7;
        font-size: 3vh;
        font-family: 'Monoton', cursive;
    }