@charset "utf-8";
/* CSS Document */

/*---------------------------------------------------------*/

body, html  {
    font-family: 'Lato', sans-serif;
    background-color:white;
    }

h2  { 
    text-align: center;
    }
    
#contenedor {
    display: grid;
    grid-template-columns: 4fr;
    grid-gap: 3px;
    grid-template-areas:
    "m m m m"
    "c c c c"
    "f f f f";
    }

/*MENU------------------------------------------------------*/

#menu {
    grid-area: m;
    margin: 0.3em;
    padding:0.3em;
    font-family: Verdana, Geneva, sans-serif;
    border: solid 1px black;
    }

nav ul  {
    display: flex;
    list-style: none;
    justify-content: center; 
    margin:0;
    padding:0;
    }

nav ul li { 
    flex-grow: 1;
    flex-basis: 25%;
    text-align:center;
    margin:1px;
    background-color: teal;
    }

a   { 
    display: block;
    color:white;
    text-decoration: none;
    text-align:center;
    padding:1em;
    }
         
nav li:hover {
    background:turquoise;
    color: black;
    }

/*SECTION (contenido)-------------------------------------------*/

#contenido  { 
    grid-area: c;
    margin:0em 0.3em 0.3em 0.3em;
    display: grid;
    grid-template-columns: 3fr 1fr;
    }
  
article { 
    display:flex;
    justify-content: center; 
    margin:0;
    padding:0;
    }

.caja{ 
    background-color:LightGray ;
    flex-grow: 1;
    flex-basis: 33%;
    margin:1px;
    padding:0px 5px 20px 5px;
    border-radius: 15px;
    }

#primera{
    background-color: palegoldenrod;
    }   

#segunda{
    background-color:palegreen;
    }

#tercera{
    background-color:paleturquoise;
    }

video, iframe {
    width: 100%;
    height: auto;
    }

aside {
    background-color:white ;
    margin:1px;
    border: solid 1px black;
    border-radius: 15px;
    }

aside p{
    margin:0px 10px 10px 15px;
    }

/*PIE-----------------------------------------------------------*/

#pie { 
    grid-area: f;
    margin:0.3em;
    background-color:dimgray;
    text-align: center;
    padding: 0.3em;
    color:white;
    }

/*------------------------------------------------------*/  

@media (orientation:landscape){
 
  nav ul  {
    flex-direction:row;
    }
         
  #contenido {
    grid-template-columns: 3fr 1fr;
    grid-template-rows: auto;
    } 

  article {
    flex-direction: row;
    }

}

/*------------------------------------------------------*/    

@media (orientation:portrait){

  nav ul {
    flex-direction: column;
    }  
         
  #contenido {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    }
 
  article {
    flex-direction: column;
    }

}