html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Safari tints its toolbars by sampling the rendered pixels along the page's
   top edge (and falls back to the html/body background colour), so the edge
   must be a single flat colour that is painted by the document itself, not a
   composite that only settles once the WebGL canvas exists. Hence the opaque
   gradient here with the orb drawn at 30% on top, rather than a black page
   with a 70% pink-white overlay: the two are pixel-identical (this gradient
   is that overlay pre-multiplied by 0.7 over black) but this one is correct
   from the first paint. closest-side makes the gradient reach its end colour
   on every edge, so the whole border is the flat colour Safari sits against.
   Keep background-color in sync with the theme-color meta in index.html */
html {
  background-color: #b3a6a8;
  background-image: radial-gradient(ellipse closest-side, #b3868e, #b3a6a8);
}

/* Pin the canvas to the viewport edges rather than sizing them in
   px/vw, which overflows (and scrolls) in iOS landscape. The canvas's CSS size
   is the source of truth for the WebGL buffer (see resizeRendererToDisplaySize
   in main.js). z-index keeps the canvas < links paint order once the
   canvas is positioned */
#scene {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  /* Reproduce the old look (full-strength orb under a 70% overlay) exactly.
     There an orb pixel was 70% overlay + 30% orb, the orb *replacing* the black
     beneath. Plain opacity would also cover 30% of the gradient and wash the
     orb out, so add it instead: plus-lighter sums the premultiplied colours,
     giving background + 30% orb. Where the canvas is transparent nothing is
     added. See the html rule above for why the layers are arranged this way */
  opacity: 0.3;
  mix-blend-mode: plus-lighter;
}

.links {
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: 20px;
  /* viewport-fit=cover lets the page run under the notch in landscape; keep
     the icons clear of it */
  padding-left: max(20px, env(safe-area-inset-left));
  align-items: flex-start;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  /* white + difference inverts whatever is behind the icons. It has to be set
     here, not on .link: the transform above makes .links its own stacking
     context, so a blend on .link would only see the empty container */
  mix-blend-mode: difference;
}

.link {
  font-size: 18px;
  padding: 8px;
  /* font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; */
  /* font-family: Helvetica, Arial, sans-serif; */
  color: white;
  white-space: nowrap;
  text-decoration: none;
  /* text-transform: uppercase; */
  transition: opacity 0.3s ease;
}

.link:hover {
  opacity: 0.6;
}

.link svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Mobile portrait / vertical orientation */
@media screen and (max-width: 768px) {
}

/* Mobile landscape / horizontal orientation: keep the vertically centered
   column, just tighter so all icons fit in a short viewport */
@media screen and (max-height: 500px) {
  .links {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .link {
    padding: 5px 8px;
  }
}