*{
    box-sizing: border-box;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.contenedor{
    background: lightgrey;
    display: grid;
    height: 100vh;
    grid-template-columns: 2fr 6fr 2fr;
    grid-template-rows: 2fr 7fr 1fr;
    grid-template-areas: "h h h"
                         "n m a"
                         "f f f";
    margin: 0%;
    padding-right: 0.1rem solid white;
}

header{
    grid-area: h;
    background-color: gray;
    color: white;
    text-align: center;
    text-transform: uppercase;
    align-content: center;
    margin: 0%;
    padding: auto;
    border-bottom: 0.1rem solid white;
}

nav{
    grid-area: n;
    border-right: 0.2rem solid white;
}

nav h2{
    padding-left: 2rem;
}

nav ul{
    list-style: none;
    padding-left: 2rem;
}

nav a{
    text-decoration: none;
    color: black;
    margin-bottom: 0.5rem;
}

main{
    grid-area: m;
    padding: 0rem 2rem 2rem 2rem;
    display: flex;
    flex-wrap:wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.elemento{
    flex: 1 1 15rem;
    padding: 0%;
    margin-right: 1rem;
}


main h2{
    margin-top: 4rem;
    border-bottom: 2px solid black;
}

aside{
    grid-area: a;
    padding-left: 1rem;
    border-left: 0.2rem solid white;
}

aside a{
    text-decoration: none;
    color: black;
}

footer{
    grid-area: f;
    border-top: 0.2rem solid white;
    background-color: gray;
    color: white;
    text-align: center;
    align-content: center;
}


@media (max-width: 650px){
    .contenedor{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr 1fr auto;
        grid-template-areas: "h h"
                            "n a"
                            "m m"
                            "f f";
    }

    header{
        grid-area: h;
        border-bottom: 0.3rem solid white;
    }

    main{
        grid-area: m;
    }

    nav{
        grid-area: n;
        border-bottom: 0.3rem solid white;
    }

    aside{
        grid-area: a;
        border-bottom: 0.3rem solid white;
    }

    footer{
        grid-area: f;
    }
}


@media (min-width:650px) and (max-width: 800px ){
    .contenedor{
        grid-template-columns: 1fr 2fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: "h h"
                            "n m"
                            "a m"
                            "f f";
    }

    header{
        grid-area: h;
    }

    main {
        grid-area: m;
        padding: 0rem 2rem 2rem 2rem;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        flex-grow: 1;
        min-height: 0;
        overflow-y: auto;/*Lo mejor que pude hacer fue esto, el footer nunca se quiso acomodar :c  */
    }

    .elemento {
        flex: 1 1 15rem;
        padding: 0;
        margin-right: 1rem;
        margin-bottom: 1rem;
        box-sizing: border-box;
    }

    nav{
        grid-area: n;
        border-bottom: 0.2rem solid white;
    }

    aside{
        grid-area: a;
        border-bottom: 0.2rem solid white;
        border-right: 0.2rem solid white;
    }

    footer{
        grid-area: f;
    }

}