@charset "utf-8";


* img{max-width: 100%;
width: auto;}

body{
    background-image: url(imagenes/fondo.jpg);
}


.pagina {
    font-family: 'Maven Pro', sans-serif;
    max-width: 50em;
    margin: 0em  auto;
    }

#dgpc{
    float: right;}

nav ul{padding: 1em 6em;
}

nav ul li{
    display: inline-block;
    
}

nav ul li a{
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    font-size: 1.1em;
    background-color:#a1ffd0;
    color: #767676;
    padding: 0.8em;
}

nav ul li a:hover {
    color:bisque;
    background-color:#767676}

#info{
    height: 24em;
}


#fotonombre {width: 16em;
        padding: 2em 2em 0 2em;
        float: left;
        font-family: 'Merienda One', cursive;
        color: #d64f79;
       }

#fotonombre img{padding: 0 1em}

aside{padding: 5.05em;
        width: 100%;
}


#primer, #segundo, #tercer{color: #585858;
    float: left;
    width: 33.%;}
    
#primer{background-color: rgba(161, 255, 208, 0.6)}

#segundo{background-color: rgba(173, 220, 245, 0.6)}

#tercer{background-color: rgba(198, 172, 234, 0.72)}

section {
    
    height: 198px;
    margin: 0 1em}

.articulo{background-color: rgba(242, 251, 255, 0.6);
    padding: 0.5em;}

.titulocolor{color: rgba(0, 75, 114, 0.6);
        background-color: rgba(103, 202, 255, 0.35);
        font-family: 'Merienda One', cursive;
        text-align: center;
    padding: 0;}

footer{
    float: left;
    font-size: 0.8em;
    margin: 1em 0}



@media screen and (max-width: 360px){
   
    header nav ul li a{
    display: block;}
    
    #dgpc {
    width: 40%;   }
    
    #logo{
    width: 60%;  }
    
    #primer, #segundo, #tercer{width: 100%;
    height: auto;}

    #info{text-align: center;
        padding: 0;
    margin: 0;
    width: 100%}
    
    aside{  width: 100%;
        padding: 0;}
    
}
    



@media screen and (max-width: 800px){
    
    header nav ul li a{
    display: block;}
    
    #dgpc {
    width: 15%;   
   }
    
    #logo{
    width: 30%;  }

      
    header nav ul li{
    display: block}
    
    #info{ height: auto;}
        
    #fotonombre{
        width: 100%;
        margin: 0;
        padding: 1.2em;
        text-align: center;
    }
    
    #primer, #segundo, #tercer{width: 100%;
    text-align: center;
    }
    
    aside{float: left;
        text-align: center;
        padding: 0em;
        width: 100%;
         }
         
    
}