@charset 'utf-8';


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


ul { list-style: none;}
body{
    background-color: #585858;
    margin: 80;
    padding: 1em;
    padding-bottom: 0.1em;
    font-family: Verdana, Arial, Geneva, Arial Black;
    color:#ffffff
    
}
body header img {
    width: 50px; 
    display: inline-block;
    margin: 0rem 0rem 0rem 0rem;
}
.contenedor-dgpc {
    background-color: rgba(88, 88, 88, 0.76);
   
}
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:100%;
    height: 10;
}
.contenedor-titulo {
    display: flex;
   align-items: center;
    align-content: center;
}
h1{  
    color:#ffffff;
    font-size: 1em;
    box-sizing:border-box ;
    display: block;
    text-align: center;
}

nav ul li a {
     display: flex;
    flex-direction: column;
    text-decoration: none;
    color: white;
    font-weight: bold;
    box-sizing: border-box;
    width: 98%;
    background-color: #2277b5;
    margin: .50rem 0rem 0rem 0rem;
    padding: .30rem;
    text-align: center; 
}
main ul li a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    align-items: center;
    color: white;
    background-color: #2277b5;
    margin: 1rem 1rem 1rem 1rem;
    padding: .75rem;
    text-align: center; 
    box-shadow: 2px 4px 8px rgb(8, 151, 255);
    font-weight: bold;
}
main section p {
    display: flex;
    justify-content: center;
    font-size: .75em;
    font-weight: bold
    color: #ffffff;
    padding: 1rem; 
    width: 90%;
    text-align: center;
    margin: 1rem 1rem 1rem 1rem;
    font-weight: bold;
}
h2{  
    color:#ffffff;
    font-size: 1.05em;
    padding: 1rem 0rem 1rem 1rem; 
    box-sizing:border-box ;
     background-color: #4d4d4d;
     text-align: center;
}
h4{  
    color:#ffffff;
    font-size: 1.05em;
    padding: .75rem .75rem .75rem .75rem; 
     margin: .75rem 0rem 0rem 0rem;
    box-sizing:border-box ;
     background-color: #4d4d4d;
     text-align: center;
}

main {
    padding: 0rem 0rem 3rem 0rem; 
}

 main section2 ul li {
         padding: .50rem .50rem .50rem .50em;
        text-align: center;
}
footer {
    font-size: .75em; 
    color:#ffffff;
    padding: 1rem; 
    margin: 0rem 0rem 2rem 0rem;
    box-sizing:border-box ;
     background-color: #7e7e7e;
    
}

@media (min-width: 30em) {
     
    
    main section p {
        display: flex;
         flex-direction: row;
        justify-content: center;
        max-width: 100em;
        margin-right: auto;
        margin-left: auto;
        text-align: center; 
    }
    
 nav ul {
     display: flex;
      flex-direction: row;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-around;
     background-color: #2277b5;
     box-shadow: 2px 4px 8px rgb(8, 151, 255);  
     padding: .75rem;
     margin: 2em 0em 0em 0em;
}
    body header img {
    width: 100px; 
        }
    h1{  
    font-size: 1.50em;
        }
    
    main ul{
        display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
       } 
    main ul li {
    width: 50%;
    }
}