body {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-content: center;
  align-items: center;
}

main {
  /* TODO: pixel perfect alignment */
  --tile-size: calc(4 * var(--scale-px));

  display: grid;
  grid-template-rows: repeat(var(--height-in-tiles), var(--tile-size));
  grid-template-columns: repeat(var(--width-in-tiles), var(--tile-size));
}

footer {
  margin: calc(10 * var(--scale-px)) 0;
  text-align: center;
}

#about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;

  padding: calc(5 * var(--scale-px));

  & p {
    text-indent: calc(8 * var(--scale-px));
  }

  & p:not(:last-child) {
    margin-bottom: calc(3 * var(--scale-px));
  }
}

#gallery {
  --size: calc(50 * var(--scale-px));

  padding: calc(2 * var(--scale-px));

  & img {
    width: var(--size);
  }

  tr:last-of-type td:last-of-type a {
    display: block;
    line-height: var(--size);
    width: var(--size);
    height: var(--size);
    text-align: center;
  }
}

@media (max-aspect-ratio: 3/2) {
  main {
    --width-in-tiles: 82;
    --height-in-tiles: 135;
  }

  #alien {
    scale: var(--scale);
    grid-row: 26 / span 15;
    grid-column: 12 / span 15;
  }

  #headshot {
    grid-row: 3 / span 44;
    grid-column: 24 / span 44;
  }

  #about {
    grid-row: 41 / span 45;
    grid-column: 1 / span 33;
  }

  #writing {
    grid-row: 53 / span 33;
    grid-column: 37 / span 46;

    margin-top: calc(3.5 * var(--scale-px));
  }

  #gallery {
    grid-row: 89 / span 47;
    grid-column: 4 / span 46;

    margin-bottom: calc(2 * var(--scale-px));
    margin-left: calc(2 * var(--scale-px));
  }

  #links {
    grid-row: 89 / span 25;
    grid-column: 53 / span 27;

    margin-bottom: calc(1 * var(--scale-px));
  }
}

@media (min-aspect-ratio: 3/2) {
  main {
    --width-in-tiles: 123;
    --height-in-tiles: 86;

    margin-top: calc(20 * var(--scale-px));
  }

  #alien {
    scale: var(--scale);
    grid-row: 40 / span 15;
    grid-column: 104 / span 15;
  }

  #headshot {
    grid-row: 1 / span 44;
    grid-column: 1 / span 44;
  }

  #about {
    grid-row: 48 / span 34;
    grid-column: 4 / span 44;
  }

  #writing {
    grid-row: 4 / span 33;
    grid-column: 48 / span 46;

    margin-top: calc(3.5 * var(--scale-px));
  }

  #gallery {
    grid-row: 40 / span 47;
    grid-column: 51 / span 46;

    margin-bottom: calc(2 * var(--scale-px));
    margin-left: calc(2 * var(--scale-px));
  }

  #links {
    grid-row: 9 / span 25;
    grid-column: 97 / span 27;

    margin-bottom: calc(1 * var(--scale-px));
  }
}