/* Lab 02: The Sphere – the images spread over a transparent globe you can turn and zoom.
   Dark outside the globe; inside it the colours invert to light (script.js swaps the "lab-dark" class) */

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden; /* the page never scrolls – scrolling and pinching zoom the globe */
  overscroll-behavior: none;
}

/* The globe is drawn transparently on top of the page's colour: light inside the globe… */
html {
  --caps-color: #121212;
  --text-color: #757575;
  background: #ededed;
  transition: background-color 0.6s ease;
}

/* …and near black, with light text, outside it */
html.lab-dark {
  --caps-color: #ededed;
  --text-color: #8c8c8c;
  background: #121212;
}

body {
  font: 14px/18px "Suisse Works", serif;
  letter-spacing: -0.018em;
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
}

.globe {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none; /* touch turns and pinches the globe instead of scrolling or zooming the page */
}