html {
  background: rgb(190, 190, 190) url(background.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

html,
body {
  padding: 0;
  margin: 0;
}

a {
    color: rgb(13, 75, 146);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

header {
  background: rgba(255, 255, 255, 0.9) url(eldeoro.png) no-repeat center center;
  background-size: auto 50%;
  height: 100px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

header ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  width: 40%;
  min-height: 100%;
  padding: 0;
  margin: 0;
}

header li {
  list-style-type: none;
  padding: 5px 5px;
  margin: 0;
  width: 140px;
  text-align: center;
}

header a {
  color: #1d1906;
  font-family: sans-serif;
  font-size: medium;
}

.content {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex-wrap: wrap;
}

article {
  background: rgba(238, 238, 238, 0.85);
  width: 30%;
  border-radius: 6px;
  font-family: sans-serif;
  color: #333;
  padding: 20px;
  margin: 30px;
}

article ul {
    margin: 10px;
    padding: 0;
}

article li {
    list-style: square;
    color: #855b00;
    padding: 5px;
}

@media only screen and (max-width: 600px) {
  html {
    background-position-x: left;
  }

  header a {
    font-size: small;
  }

  header {
    background-size: auto 30%;
  }

  article {
    width: auto;
    margin: 10px;
    
  }
  
  .content {
    display: block;
  }
}