*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    
}

h2~ul{
    margin-top: 5%;
}


li>a{
    text-transform: lowercase;
    
    color: black; 
}
article{
    margin-top: 2%;
}

hr{
    border: 1px solid black;
}


section{
    margin-top: 3%;
}




/* ----------------ESCRITORIO-------------------------------- */
@media (min-width: 800px){
  
.contenedor{
    background: lightgray;
    display: grid;  
    justify-content: space-evenly;
    align-content: space-evenly;
    grid-template-columns: 15% auto 15%;
    grid-template-rows: 15% auto 15%;
    height: 100vh;
    grid-template-areas: "h h h"
                         "n m a"
                         "f f f";
}
header{
    border: 1px solid white;
    grid-area: h;    
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-family:'Courier New', Courier, monospace;
    padding: 20px;
    background: gray;
    color: white;
}
nav{
    border: 1px solid white;
    grid-area: n;
    background: pink;
    padding: 5% 5% 0% 5%;
}
a{
    text-decoration: none;
}

main{
    border: 1px solid white;
    text-align: left;
    padding: 20px;
    grid-area: m;
    background: lightblue;
}
aside{
    border: 1px solid white;
    background: lightgreen;
    max-width: 100%;
    width: 100%;
    padding: 5% 5% 0% 5%;
    grid-area: a;
    overflow: auto;
}
ul{
    list-style: none;
    text-align: left;
    font-size: 0.9rem;
    margin-right: 5%;
}

footer{
    border: 1px solid white;
    grid-area: f;
    align-content: center;    
    text-align: center;
    color: white;
   
    text-align: center;
    background: gray;
}

}

/*------------------- tablet---------------------------  */
@media (max-width: 799px) {
  
    .contenedor{
        background: lightgray;
        display: grid;  
        justify-content: space-evenly;
        align-content: space-evenly;
        grid-template-columns: 15% auto;
        grid-template-rows: 15% auto auto 15%;
        height: 100vh;
        grid-template-areas: "h h"
                             "n m"
                             "a m"
                             "f f";
    }
    header{
        border: 1px solid white;
        grid-area: h;    
        text-align: center;
        text-transform: uppercase;
        font-weight: bold;
        font-family:'Courier New', Courier, monospace;
        padding: 20px;
        background: gray;
        color: white;
    }
    nav{
        border: 1px solid white;
        grid-area: n;
        padding: 5% 5% 0% 5%;
    }
    
    main{
        border: 1px solid white;
        text-align: left;
        padding: 20px;
        grid-area: m;
    }
    aside{
        max-width: 100%;
        width: 100%;
        border: 1px solid white;
        padding: 5% 5% 0% 5%;
        grid-area: a;
        overflow:hidden;

    }
    a{
        text-decoration: none;
    }
    
    footer{
        border: 1px solid white;
        grid-area: f;
        align-content: center;    
        text-align: center;
        color: white;
       
        text-align: center;
        background: gray;
    }
    ul{
        list-style: none;
        text-align: left;
        font-size: 0.9rem;
        margin-right: 5%;
    }
    
    }

    /* -----------------------------movil------------------------------------- */
  
    @media (max-width: 649px) {
  
        .contenedor{
            background: lightgray;
            display: grid;  
            justify-content: space-evenly;
            align-content: space-evenly;
            grid-template-columns: auto auto;
            grid-template-rows: 15% auto auto 15%;
            height: 100vh;
            grid-template-areas: "h h"
                                 "n a"
                                 "m m"
                                 "f f";
        }
        header{
            border: 1px solid white;
            grid-area: h;    
            text-align: center;
            text-transform: uppercase;
            font-weight: bold;
            font-family:'Courier New', Courier, monospace;
            padding: 20px;
            background: gray;
            color: white;
        }
        nav{
            border: 1px solid white;
            grid-area: n;
            padding: 5% 5% 0% 5%;
        }
        a{
            text-decoration: none;
        }
        main{
            border: 1px solid white;
            text-align: left;
            padding: 20px;
            grid-area: m;
        }
        aside{
            max-width: 100%;
            width: 100%;
            border: 1px solid white;
            padding: 5% 5% 0% 5%;
            grid-area: a;
            overflow:hidden;
    
        }
        
        footer{
            border: 1px solid white;
            grid-area: f;
            align-content: center;    
            text-align: center;
            color: white;
           
            text-align: center;
            background: gray;
        }
        ul{
            list-style: none;
            text-align: left;
            font-size: 0.9rem;
            margin-right: 5%;
        }
        }