@import url("normalize.css");
@import 'https://fonts.googleapis.com/css?family=Exo:300,400,700';

* {
    margin: 0;
    padding: 0;
    font-family: 'Exo', arial, helvetica, sans-serif;
    list-style: none;
    box-sizing: border-box;
    }

body {
    margin: 0;
    padding: 0;
    background-color: #F5F5F5;
}

a {
    text-decoration: none;
}

header, footer {
    background-color: dimgray;
    margin: auto;
    min-width: 90%;
    max-width: 90%;
}

#logo {
    margin-top: .5em;
    margin-left: .5rem;
    background-color: white;
    } 

header > a {
            margin: auto;
            max-width: 60%;
}

    header h1 {
        text-align: center;
        margin: auto;
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
        max-width: 90%;
        color: white;
    }

header nav {
    padding: .1em;
}

header nav ul li {
        list-style: none;
        text-align: center;
        margin-bottom: .2em;
        }

       header nav ul li a {
            background-color: black;
            max-width: 95%;
            margin: auto;
            text-decoration: none;
            color: white;
            display: flex;
            padding: .4rem;
            justify-content: center;
            align-items: center;
            }

            header nav ul li a:hover {
                color: white;
                background-color: rgba(255,255,255,0.3);
                }

.logo {
    display: block;
    margin: auto;
    margin-top: .5em;
    margin-bottom: .5em;
}

    main {
        max-width: 90%;
        min-width: 90%;
        margin: auto;
        background-color: white;
        margin-top: 0.2rem;
        padding-top: .5em;
    }

        
main ol {
    padding-left: 3rem;
}

    main ol li {
        padding: 0.2rem;
        font-weight: bold
    }

main ul {
        margin: auto;
        max-width: 90%;
        padding-left: 2rem;
        color: cadetblue;
    }

    main ul li {
        padding: 0.2em;
        background-color: white;
    }

    main ul p {
        background-color: white;
        margin-top: 0.1rem;
}

    main ul li a {
        text-decoration: none;
        color: dimgrey;
    }

    main ul li a:hover {
            color: black;
    }

    main h2 {
        color: cadetblue;
        margin: auto;
        max-width: 90%;
    }

    main h3 {
        color: cadetblue;
        margin: auto;
        max-width: 90%;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    main h4 {
        margin: auto;
        max-width: 90%;
        padding-top: .5rem;
    }

    main p {
        margin: auto;
        max-width: 90%;
        padding-bottom: 0.5rem;
        padding-top: 0.5rem;
        color: dimgrey;
    }
    
main p a {
    margin: auto;
    max-width: 90%;
    text-decoration: none;
    color: cadetblue;
}

   footer p {
       padding: 1em;
       margin-top: .5em;
       font-size: 7pt;
       text-align: justify;
       color: white;
    }


    .destacado {
        font-weight: bold;
    }

.Iluminado {
    background-color: darkgray;
    color: white;
}

.fuerte {
        font-weight: 700;
        text-transform: capitalize;
}

.link {
    text-decoration: none;
}


}


/*
----------------------Responsive---------------------------*/


#contenedor {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

header, 
footer {
    flex: 0 1 auto;
}

.contenidos {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}
 
@media screen and (min-width:30em) {

    header, footer {
        margin: auto;
        max-width: 90%;
    }
    
    nav ul{
        display: flex;
        justify-content: space-between;
    }
    
    nav ul li {
        flex: 1;
    }
}

@media screen and (min-width:40em) {
   article {
       display: flex;
       align-items: center;
       max-width: 95%;
       margin: auto;
       margin-bottom: .5em;
       }
}

@media screen and (min-width:45em) {
        header div {
        display: flex;
        align-items: center;
        justify-content:space-around;
        }
    
    nav, h1 {
        margin: 1em;
        flex-basis: calc(100% - 8em);
        justify-content: space-around;
        }
}

@media screen and (min-width:100em) {
    body {
        max-width: 80%;
        margin: auto;
    }
    
    article {
        max-width: 85%
        }
    
    main>div {
        margin: auto;
        max-width: 95%;        
        }
    }

{}