/*El header tiene que estar a la misma altura todo*/
header{
  display: flex;
  justify-content: space-between;
  align-items:center;
}

#contenedor{
  width: 95%;
  max-width: 1280px;
  margin:auto;}

body {
  font-family: Arial, Helvetica, sans-serif;
}

nav{
    text-align: right;
}

nav a{
  margin-left: 1rem;
  display: inline;
}

/* Al hacerse pequeño se debe colocar en columna, de normal se encuentra en fila */
@media screen and (max-width: 850px){
nav a{
    display: block;
}
}

#Studioghibli1{
  max-width: 100%;
  height: auto;
}

.secciones {
  padding: 3px 5px; 
}

a:link, a:visited{
    color:#777777;
    text-decoration: none;
}

a:hover, a:active  {
    color:#97a3ed;
}

#arriba{
    background-color: #d2d2d2;
    padding: 1rem;
    margin-top: 1rem;
}

/*Se tiene que hacer por filas al reducir*/
@media screen and (min-width: 850px){
   .flexbox1 {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: 1rem;
    align-items: stretch;
    clear: both;
    text-align: justify;
    margin-top: 1rem;
  }
}

  .article1 {
    background-color: #a5a5a5;
    padding: 1rem;
    text-align: left;
    display: inline-block;
    margin-top: 1rem;
    overflow: hidden;    
  }

  .article1 img {
    float: left;
    padding-right: 1rem;
  }

  .article2 {
    background-color: #a5a5a5;
    padding: 1rem;
    text-align: left;
    display: inline-block;
    margin-top: 1rem;
    overflow: hidden;

  }

  .article2 img {
     float: left;
     padding-right: 1rem;
  }

footer{
    border-bottom: 1px solid black;
    margin-top: 1rem;
    margin-bottom: 1rem;
 }