/* Let's keep it stupid, simple. ^^ */
* {
  /* Make CSS sizing sane */
  box-sizing: border-box; }

html {
  font-family: "Monaspace Krypton", monospace;
  /* Make the main text not solid black */
  color: #333;
  /* Let's not use solid white */
  background: #fcfcfc; }

body {
  /* Make the body a 80 character wide container */
  width: 80ch;
  /* Center the container within the viewport */
  margin: 0 auto;
  /* Give the lines an adequate amount of room to breathe. */
  line-height: 1.4;
  /* Make sure the edge of the body has a gap for mobile */
  padding: 1em; }

h1, h2, h3 {
  /* More contrast with the headers than the main text */
  color: #111; }

img {
  /* Make sure that the images do not overflow the body */
  max-width: 100%;
  /* Make sure that the images are not too tall as to be annoying */
  max-height: 50ch; }

/* We want the footer to be like two columns, where the right columns are also right-aligned and the columns grow to share the space sanely. */
footer nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  column-count: 2;
  gap: 0.5em 0.25em; }
  footer nav ul li {
    display: inline-block;
    padding: 0;
    margin: 0;
    flex-grow: 1; }
    footer nav ul li:nth-child(2n) {
      text-align: right; }