body {
  font-family: Ubuntu, roboto, noto, avenir next, avenir, helvetica neue, helvetica, sans-serif;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  color: hsl(25, 9%, 11.2%);
}

section {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

ul {
  list-style-type: none;
  padding-left: 0;
}

li.pane {
  border-radius: 8px;
  margin-bottom: 2em;
  background-color: hsl(35, 10%, 16%);
  padding-left: 1.2em;
  padding-right: 1.2em;
  padding-top: 1.2em;
  padding-bottom: 1.2em;
  margin-bottom: 2em;
  color: hsl(47.8, 100%, 54.7%);
  width: 30em;
}

li.pane:only-child {
  max-width: 90vm;
}

a:link {
  color: #333;
  font-weight: bolder;
}

a:visited {
  color: hsl(0, 0%, 30%);
}

footer {
  max-width: 800px;
}

footer > div {
  margin-bottom: 0.5em;
  text-align: center;
}


@media all and (max-height: 568px) {
  .media {
    max-width: 90%;
  }
  li.pane {
    width: initial;
  }
  font-size: 12px;
}