body {
  font-family: "Atkinson Hyperlegible Pro";
  background-color: #080808;
  color: #f0f0f0;
}
main {
  width: 600px;
  margin: 1em auto;
  padding: 2em;
  background-color: #151515;
  border-radius: 0.5em;
  box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);
}
@media (max-width: 700px) {
  main {
    margin: 0 auto;
    width: auto;
  }
}
a { color: lightblue; }
/* thanks AN-43-L */
body {
  background-color: #080808;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cpattern id='diagonalHatch' width='10' height='10' patternTransform='rotate(45 0 0)' patternUnits='userSpaceOnUse'%3E%3Cline x1='0' y1='0' x2='0' y2='10' style='stroke:%231a1a1a; stroke-width:1' /%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23diagonalHatch)' /%3E%3C/svg%3E");
}