@charset "utf-8";
/* CSS Document */
body,html{
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    border: solid 1px black;

}
nav{
      margin-bottom: 0.1em;
     background-color: grey;

}
 
nav ul {
     list-style-type: none;
     margin: 0px;
     padding: 0px;
     display: flex;
}

nav li{
        flex-grow: 1;
}

nav a {
      display: block;
      padding: 1em;
      text-align: center;
      text-decoration: none;
      color: white;
      border: solid 1px red;
      transition: all 0.5s;
      text-transform: uppercase;
      font-family: 'Ultra', serif;
      
     }     

     nav a:hover{
         background-color:red;
     }
     
     section{
         display: grid;
         margin-bottom: 0.5em;
     }

     article{
               font-family: 'lato', sans-serif;
              
     }

     article h1{
         margin: 1rem 1rem 0rem 1rem;
         text-transform: uppercase;
         color: red;
     }

     #main{
         display: grid;
         grid-gap: 1rem;
         padding: 1rem;
     }

     aside{
             display: grid;
             grid-gap: 0.5rem;
             padding: 00.5rem;
             background-color: lightgray;
             font-family: 'Nanum Pen Script', cursive;
             text-align: justify;
     }

     .bloque{
         font-family: 'Merriweather', serif;
         box-shadow: 3px 5px 28px 0px rgba(0,0,0,0,75);
         text-align: center;
     }
     .card img{
         width: 100%;
         height: auto;
         transition: all 1s;

     }
  .card img:hover{
      filter: invert(100%);
  }

  footer{
          font-family: 'Ultra', serif;
          font-size: 0.8em;
          color:white;
          background-color:red;
          padding: 1.0rem;
          padding-left: 8.2em;
  }

  .textos h2 {
	font-family: 'Ultra', serif;
	font-size: 1.2rem;
	font-weight: 300;
	margin-top: 0;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
    border-bottom-color: #19191B;
    color: red;
  
}
.textos p {
   
	font-size:0.8rem;
}
.textos a {
    
	font-size:0.8rem;
	color:red;
    text-align: center;
    
}

  @media (orientation:landscape){
      section{
          grid-template-columns: 3fr 1fr;
          grid-template-rows: auto;
      }
      #main{
          grid-template-columns: 1fr 1fr 1fr;
          grid-template-rows: auto;
      }
      aside{
             grid-template-columns: 1fr;
             grid-template-rows: auto auto;
      }

      nav ul{ 
               flex-direction: row;
      }
      a {
           margin-right: 0.2em;
      }

  }
  @media (orientation:portrait){
      section {
          grid-template-columns: 1fr;
          grid-template-rows: auto auto;
      }
      #main{
          grid-template-columns: 1fr;
          grid-template-rows: auto auto;
      }
      aside{
          grid-template-columns: 1fr 1fr 1fr;
          grid-template-rows: auto auto;
      }
      nav ul{
          flex-direction: column;
      }
      nav a {
          margin-bottom: 0.2em;
      }
  }