/* 1) Establecer margenes "externos" e "internos" para todo */

*{
margin: 0;
padding: 0;
}

/* 2) Establecer valores del grupo de etiquetas "pagina" (principales) */

.pagina {max-width: 960px;
         margin: 0 auto;}

/* 3) Estilos */

body   {background: #c5c1d1;
        margin: 0;
        font-size:16px;}

header {width: 100%;
        height: 100px;
        background: #2c1c62;
        margin: 0px auto;}

nav {width: 100%;
    height: 50px;
    margin: 0px auto;
    background: #5e9a98;
    float:left;
    margin: 40px auto;}

main   {display:block;
        width: 100%;
        height: 500px;
        background: #2c1c62;
        margin:auto;}

section {width: 72%;
         height: 415px;
         float:left;
         background: #5e9a98;
         margin: -10px 0px 0px 0px;}

aside {width: 28%;
       height: 415px;
       float:left;
       background: #5e9a98;
       margin: -10px auto;}

nav article  {width: 14%;
              height: 25px;
              background: #41b9b5;
              float:left;
              margin: 8px -10px 0px 20px;
              padding: 10px 0px 0px 10px;
              font-family:"TREBUCHET MS", arial, sans-serif;}

section article   {width: 90%;
                   height: 225px;
                   background: rgb(45, 132, 96);
                   float:left;
                   margin: 20px 20px 0px 20px;
                   padding: 10px 10px 10px 10px; }

aside article  {width: 87%;
                height: 28px;
                background: #41b9b5;
                margin: 20px 5px 0px 5px;
                padding:10px 0px 0px 10px;
                font-size:0.94rem;
                font-family:"TREBUCHET MS", arial, sans-serif;}

.materias  {width: 90%;
            height: 106px;
            background: rgb(45, 132, 96);
            float:left;
            margin: 8px 0px 0px 20px;
            padding: 10px 10px 10px 10px; 
            font-size:0.9rem;
            font-family:"TREBUCHET MS", arial, sans-serif;}

.bio {font-family:"TREBUCHET MS", arial, sans-serif;
      color: #c8e6d2;}

.imagenchristian {
                  width:-10px;
                  height:40px;}

footer {width:100%;
        height: 50px;
        background: #000;
        color:#5e9a98;
        font-size:0.7rem;
        font-family:"TREBUCHET MS", arial, sans-serif;}

footer article {padding: 10px 22px 10px 22px;}

/* 4) Responsive para tablets */

@media screen and (max-width: 768px)
{
section   {height:500px;}
aside     {height:500px;}
aside article {font-size:0.89rem;}
main      {height: 590px;}    
.materias {height:190px;}    

footer    {height: 75px}  
}

/* 5) Responsive para celulares */

@media screen and (max-width: 480px)
{
nav article {margin: 8px -16px 0px 20px; 
             width: 23%;}
section {width: 100%;
        height:550px;}
section article { width: 77%;}
.materias {width: 77%;
            height:240px;}
aside {height:185px;
       width:100%;}
aside article {margin: 10px 0px 0px 20px;
               width: 80.5%;}
main {height: 820px}
footer {height: 115px}
    
}