:root {
  color-scheme: dark;
  background: #030507;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }
body { margin: 0; }

.space {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: radial-gradient(ellipse 58% 62% at 50% 48%, #0b1014 0%, #05080b 60%, #020304 100%);
}

.stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .29;
  background-image:
    radial-gradient(circle at 31px 47px, #e9e2d5 0 1px, transparent 1.6px),
    radial-gradient(circle at 113px 153px, #b7c4d2 0 .7px, transparent 1.4px),
    radial-gradient(circle at 213px 89px, #e6edf4 0 .8px, transparent 1.5px),
    radial-gradient(circle at 79px 217px, #c7c5bd 0 .6px, transparent 1.3px),
    radial-gradient(circle at 269px 23px, #b5c1cf 0 .7px, transparent 1.4px);
  background-size: 227px 223px, 331px 271px, 373px 307px, 283px 347px, 419px 257px;
}

.cheese {
  position: absolute;
  inset: 0;
  margin: 0;
  pointer-events: none;
}

.flight {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(62vw, 62svh, 680px);
  transform: translate(-50%, -50%);
  will-change: transform;
}

.photo-orbit, .photo-tilt { will-change: transform; }

.wedge-photo {
  display: block;
  width: 100%;
  height: auto;
  /* Clip the original photograph without repainting any cheese pixels. */
  clip-path: polygon(0.698% 16.136%, 1.395% 13.148%, 2.989% 8.566%, 4.483% 6.076%, 6.176% 3.786%, 8.168% 2.690%, 12.650% 2.690%, 16.136% 3.387%, 17.829% 3.188%, 20.120% 3.885%, 24.104% 4.284%, 24.602% 4.881%, 27.590% 5.379%, 29.084% 6.176%, 30.080% 5.778%, 33.068% 5.977%, 37.052% 6.973%, 39.044% 7.172%, 41.036% 6.973%, 45.020% 7.471%, 46.315% 7.969%, 49.004% 7.869%, 52.988% 8.566%, 54.183% 9.363%, 55.976% 8.865%, 59.960% 9.861%, 64.442% 10.857%, 68.625% 11.953%, 70.418% 12.252%, 73.705% 12.252%, 74.900% 13.148%, 77.888% 12.750%, 78.884% 13.248%, 80.876% 13.248%, 84.860% 14.642%, 86.852% 15.439%, 88.047% 16.634%, 90.238% 18.925%, 91.832% 18.726%, 96.115% 19.722%, 97.808% 19.821%, 98.206% 20.319%, 98.605% 23.805%, 98.804% 28.088%, 98.605% 34.064%, 97.808% 40.040%, 96.812% 45.020%, 94.820% 51.992%, 93.824% 56.972%, 91.334% 64.940%, 88.844% 73.904%, 85.358% 83.864%, 83.665% 89.840%, 82.868% 94.820%, 81.872% 97.410%, 80.378% 97.310%, 77.888% 95.318%, 75.896% 93.824%, 73.406% 91.334%, 70.916% 89.840%, 69.422% 88.346%, 66.733% 86.852%, 64.940% 85.358%, 62.450% 81.872%, 59.462% 80.179%, 57.968% 78.386%, 55.976% 76.394%, 53.984% 74.900%, 52.490% 71.912%, 50.000% 69.123%, 48.008% 67.928%, 46.016% 65.936%, 44.024% 64.940%, 41.036% 62.450%, 39.044% 61.056%, 36.056% 58.665%, 34.064% 56.474%, 32.072% 53.984%, 30.080% 52.291%, 27.092% 50.000%, 25.100% 48.008%, 24.303% 48.008%, 22.112% 45.020%, 20.120% 45.020%, 18.626% 43.526%, 18.128% 42.032%, 17.630% 41.235%, 16.136% 40.438%, 15.538% 41.036%, 14.144% 40.040%, 12.550% 38.048%, 10.658% 37.052%, 9.662% 35.060%, 8.865% 34.861%, 7.670% 33.068%, 7.471% 32.072%, 5.977% 31.076%, 4.383% 29.084%, 3.188% 26.096%, 1.993% 22.112%, 1.196% 20.120%);
}

.photo-credit {
  position: absolute;
  right: 1.25rem;
  bottom: 1rem;
  color: #7f8990;
  font: 0.75rem/1.5 system-ui, sans-serif;
  text-decoration: none;
}
.photo-credit:hover { color: #c3c9cd; }
.photo-credit:focus-visible { outline: 1px solid #c3c9cd; outline-offset: 5px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .stars { opacity: .35; }
}