html {
  --oil: hotpink;
  --ink: #404;
  --ill-oil: var(--oil);
  --ill-ink: var(--ink);
}

@media (prefers-contrast: more) {
  html {
    --oil: linen;
    --ink: #404;
  }
}

html {
  font-size: calc(1em + 1vmin);
  font-family: monospace, serif;
  line-height: 1.5;
}

body {
  margin: 0;
  display: flex;
  flex-flow: column;
  margin-block-end: 3rem;
}

figure {
  margin: auto;
  position: relative;
  display: flex;
  flex-flow: column;
}

details {
  margin: 1rem;
}

svg:first-of-type {
  order: -2;
}

label,
input {
  align-self: flex-start;
  line-height: normal;
}

#turn {
  margin: 1ex;
  writing-mode: vertical-lr;
  visibility: hidden;
}

[for=turn] {
  font-size: 2rem;
  margin: 0;
}

:checked + [for=turn] {
  writing-mode: vertical-lr;
}

svg {
  max-width: 100%;
  height: auto;
}

.turn,
#turn:checked ~ [data-turn] {
  transform: rotate(90deg);
}

@media (orientation: landscape) {
  .tilt {
    transform: rotate(90deg);
  }
}