/* 
https://raiolanetworks.com/blog/media-queries/
https://colorhunt.co/palette/2f39a92e6fa049a4bb15d8b3 
*/

:root {
    --colorfondo:#898787;
    --color1: #222b88;
    --color2: #296593;
    --color3: #357b8d;
    --color4: #0e836d;
    --colorblanco: #FFFFFF;
}


* {
    margin: 0px;
    padding: 0px;

    text-decoration: none;
    list-style: none;
    box-sizing: border-box;

}

body{
    background: var(--colorfondo);
}
header {
    width:  80%;
    margin:auto;
    background-color: var(--color1);
    font-size: 3em;
    color: var(--colorblanco);
    padding-left: 25px;
    border-radius: 15px;
}

main {
    width: 80%;
    font-family: Arial, Helvetica, sans-serif;
    margin: auto;
    color: black;
}


main fieldset {
    border: 1px solid var(--color4);
    background: var(--color2);   
    padding: 10px;
    margin:10px;
}


main fieldset legend {
    background: var(--color1);
    color:var(--colorblanco) ;
    font-size: 2em;
    padding: 5px;
    margin:5px
}

main ul {
    background: #FFFFFF;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding:10px;
    margin: 10px;
    gap:10px;
  
}

main ul li{
     background: #15D8B3;
     margin:5px;
     padding:5px; 
}

ul li a {

    background: (var(--color2));
    text-decoration: none;
    margin:auto;
    padding: 5px;
    font: size 1.5em;
}

footer {
    background-color: var(--color1);
    font-size: 1.2em;
    color: var(--colorblanco);
    margin:auto;
    text-align: center;
    border-radius: 15px;
}

footer>p{
    margin: 10px;
    padding: 10px;
}

@media (width < 400px) {
    header{
        width: 100%;
    }

    main fieldset{
        width: 100%;
    }
    
}