/*Estilos de grilla*/
Body {
    background: #1c1c1c;
}

.container {
  max-width: 1250px;
  height: auto;
  margin-left: 0;
  margin-right: 0; 
  margin-top: 0;
  margin-bottom: 0;
  display: grid; 
  grid-gap: 0;
  grid-template-columns: 70%;
  grid-auto-rows: minmax(120px,auto);
}

.header {
    background-color: #3792b1;
    grid-area: box1;
    grid-column-gap: 0;
    grid-row-gap: 0;
    font-family: 'Quicksand', sans-serif;
}

.content {
    background-color: #1c1c1c;
    grid-area: box2;
    grid-column-gap: 0;
    grid-row-gap: 0;
    font-family: 'Quicksand', sans-serif;
}

.images {
    background-color: #3792b1;
    grid-area: box3;
    grid-column-gap: 0;
    grid-row-gap: 0;
}

/*Estilos de texto*/
header {
    padding: 1rem;
}

h1 {
    color: #4cc8f1;
    padding: 1rem;
}

h2 {
    color: #3792b1;
    padding: 1rem;
}

p {
    color: #d7cec2;
    padding: 1rem;
}

/*Estilos de hipervínculos*/
a:link {
    background-color: #3792b1;
    color: #1c1c1c;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:visited {
    background-color: #3792b1;
    color: #0e5269;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

/*Aquí defino la posición de cada bloque en la grilla cuando la pantalla mide más de 600px*/
@media (min-width: 600px) {
    .container {
      grid-template-areas:
      "box1 box1 box1"
      "box2 box2 box2"
      "box2 box2 box2"
      "box3 box3 box3"
      "box3 box3 box3";
    }

}

/*Aquí defino la posición de los bloques en la grilla cuando la pantalla mide menos de 600px*/
@media (max-width: 600px) {
    .container {
       grid-template-areas:
       "box1 box1 box1"
       "box2 box2 box2"
       "box3 box3 box3"
       "box3 box3 box3";
     }
   }