/************************************************************
Hoja de CSS con estilos de la página index.html
    · Estilos del bloque principal
    · Media queries
*************************************************************/

.Background{
    background-color: #000000;
}

.Main.Home {
    height: 90vh;
}

.Main-section{
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: flex-end;
}

.Section-h1{
    width: 100%;
    font-size: var(--fs-h1);
    color: var(--c-secondary);
}

.Section-name{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: flex-end;
    padding: var(--p-simple) 0 0;
}

.Name-wrapper{
    width: 36.5vw;
    min-width: 31.25rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: flex-end;
}

@media (max-width: 950px){
    .White-block{
        display: block;
    }
}

@media (max-width: 830px){
    .Main-section{
        flex-flow: column nowrap;
        align-items: center;
    }
}

@media (max-width: 600px){ 
    .Main.Home {
        padding: 0;
    }

    .Main-section{
        flex-flow: column nowrap;
        align-items: center;
    }

    .Section-name{
        min-height: 50vh;
    }

    .Name-wrapper{
        width: 100%;
        min-width: auto;
    }
}