html, body {
  margin: 0;
}
html {
  background-color: #262424;
}
body {
  color: #faf6cb;
  font-family: Optima, sans-serif;
  font-weight: 100;
  font-style: normal;
  line-height: 1.5rem;
  letter-spacing: 1px;
  display: flex;
  max-height: 100vh;
  overflow: hidden;
  @media screen and (orientation: portrait) {
    flex-direction: column; 
    max-height: auto;
    overflow: auto;
  }
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Michroma";
  margin: 0;
}
a {
  text-decoration: none;
  color: #faf6cb;
}
a:hover {
  text-decoration: underline;
}
header, main {
  padding: 2rem;
  border-right: solid 1px #9E2E2E;
  @media screen and (orientation: portrait) {
    border-right: none;
    border-bottom: solid 1px #9E2E2E;
  }
}
header {
  nav {
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 2rem;
      font-family: "Michroma";
    }
  }
}
main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  flex-grow: 0;
  overflow-y: scroll;
  @media screen and (orientation: portrait) {
    overflow: unset;
  }
}
.box {
  padding: 2rem;
  border-radius: 1rem;
  border: #519139 solid 1px;
  p {
    margin: 0;
  }
  p + p {
    margin-top: 1rem;
  }
  h3 + p {
    margin-top: 1rem;
  }
}
img {
  max-width: 100%;
}
#ilustracion {
  flex-shrink: 0;
  max-width: 40vw;
  @media screen and (orientation: portrait) {
    max-width: 100vw;
  }
}