*{
    box-sizing: border-box;
}

:root{
    --fondo: #f5f5f5;
    --azul: #6495ed;
    --blanco: white;
    --negro: rgb(66, 66, 66);
    --verdeClaro: #f5f5dc;
    --naranjaClaro: #faebd7;
    --naranja: #d96830;
    --verde: #5f9ea0;
    background-color: var(--fondo);
    font-family: Arial, Helvetica, sans-serif;

}




body{
    width: 1050px;
    margin: auto;
}

header{
    background-color: var(--azul);
    color: var(--blanco);
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 25px;
}


header nav ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
}

header nav ul li{
    display: inline;
}

header nav ul li a {
    display: inline-block;
    margin: 20px;
    color: var(--blanco);
    font-size: 1.1;
    text-decoration: none;
}

header input{
    border: 1px solid var(--negro);
    border-radius: 4px;
    padding: 5px;
    width: 80%;
}

main{
    display: grid;
    background-color: var(--fondo);
    /* grid-template-columns: calc(80% - 10px) 20%; */
    grid-template-columns: 8fr 2fr;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

main section>article{
    padding: 10px;
    background-color: var(--blanco);
}

main section>div>ul{
    list-style: none;    
    margin: 0px;
    padding: 0px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
main section>div ul article{
    background-color: var(--verdeClaro);
    padding: 10px;
    font-size: 0.8em;
}

main nav{
    background-color: var(--naranjaClaro);
}

main nav ul{
    margin: 0px;
    padding: 0px;
    list-style: none;
}

main nav ul a{
    display: block;
    border-bottom: 1px solid var(--naranja);
    color: var(--naranja);
    padding: 5px;
    text-decoration: none;
}

footer{
    background-color: var(--verde);
    padding: 25px;
}

footer nav ul{
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    text-align: center;
}

@media (max-width: 600px) {
    body{
        width: 100%;
    }
    
    header{
        grid-template-columns: 1fr;
        text-align: left;
        padding: 0px;
    }
    header nav ul li{
        display: block;
        
    }    

    header nav ul li a {
        display: block;
        border-bottom: 1px solid var(--blanco);
        margin: 6px;
    }
    
    header form {footer{
        background-color: var(--verde);
        padding: 25px;
    }
    
    footer nav ul{
        margin: 0px;
        padding: 0px;
        list-style: none;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        text-align: center;
    }
        text-align: center;
        margin: 5px;
    }


    main{
        display: grid;
        grid-template-columns: 1fr;
    }


    main section>div>ul{
        grid-template-columns: 1fr;
    }

    footer{
        padding: 5px;
    }
    
    footer nav ul{
        margin: 0px;
        padding: 0px;
        list-style: none;
        display: block;
        text-align: center;
    }

    footer nav ul li{
        padding: 5px;
    }
}