/* Remove browser defaults so the artwork can fill the viewport exactly. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

/* Flexbox centers the homepage drawing horizontally and vertically. */
body {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
  The stage uses the drawing's original proportions: 1782 × 1280.
  It is also the positioning reference for the invisible links below.
*/
.stage {
  position: relative;
  aspect-ratio: 1782 / 1280;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
}

.stage img.art {
  width: 100%;
  height: 100%;
  display: block;
}

/* Each link is an invisible clickable rectangle over a word in the drawing. */
.stage a {
  position: absolute;
  top: 65.5%;
  height: 10%;
  border-radius: 6px;
  cursor: pointer;
}

/* Percentages keep the link rectangles aligned when the image changes size. */
.about         { left: 6.8%;  width: 13.5%; }
.coding        { left: 25.0%; width: 15.5%; }
.writing       { left: 46.8%; width: 14.0%; }
.illustrations { left: 66.8%; width: 26.5%; }

.stage a:hover {
  background: rgba(0, 0, 0, 0.045);
}

/* This outline appears when someone reaches a link with the keyboard. */
.stage a:focus-visible {
  outline: 2px dashed #4a4a4a;
  outline-offset: 4px;
}