* {
  margin: 0;
  padding: 0;
  
}

body {
  background: #e9e3ff;
  color: #000;
  font-family: 'Roboto', sans-serif;
  }
  
  .contenedor { 
    width: 90%;
    margin: 20px auto;
    display: grid; 
    grid-gap: 20px; 
    grid-template-columns: repeat(3,1fr); 
    grid-template-columns: repeat(4, auto);
    
    grid-template-areas: "header header header"
                         "contenido Imagen sidebar"
                         "contenido Imagen sidebar" 
                         "footer footer footer";
    }
    
    
    .contenedor > div,
    .contenedor .header, 
    .contenedor .contenido,
    .contenedor .sidebar,
    .contenedor .footer 
     {
      background: #fff; 
      padding: 20px; 
      border-radius: 4px; 
      }
      
      .contenedor .header {
        background: #12203E; 
        color: #fff; 
        grid-area: header;
        }
        
      
      .contenedor .contenido { 
          grid-area: contenido; 
           overflow: scroll;
            width: 500px;
           height: 300px;

        } 
        
        .contenedor .sidebar { 
          grid-column: 3 / 4; 
          background: #fAA43D;
          text-align: center; 
          display: flex; 
          align-items: center; 
          justify-content: center; 
          
          grid-area: sidebar; 
          
          }
          
      
      
      .contenedor .Imagen {
        grid-area: Imagen; 
         display: flex; 
          align-items: center; 
          justify-content: center; }
        
          .contenedor .footer {
            background: #12203E;
            color: #fff;
            grid-area: footer; 
            }      
            
            ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

 li {
  padding: 12px;
  margin-bottom: 15px;
  background-color: Black;
  color: White;
}
 li:hover {
  background-color: #28470f;
}
li:Active {
  background-color: #28470f;
  transform: translateY(4px);}
  


  
            @media screen and (max-width: 575px){
              
              body{background-color: #3f888f;
              }
              .contenedor .footer {
                Width:100%;}
                .contenedor .header {
                Width:100%;}
                .contenedor .contenido {
                Width:100%;}
                .contenedor .footer {
                Width:100%;}
                .contenedor { grid-template-areas:
                        "header header header"
                         "contenido contenido contenido"  
                         "sidebar sidebar sidebar"
                         "footer footer footer";
            }
         }