html, body {
  margin: 0;
  height: 100%;
  background-color: #000;
  overflow: hidden;
}

/* fallback: the old gifs, shown when the live sun can't run */
body.fallback {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url('nasa.gif');
}
body.fallback.sun-blauw-rood { background-image: url('nasa3d_blue.gif'); }
body.fallback.sun-groen-rood { background-image: url('nasa3d_green.gif'); }
body.fallback .sun { display: none; }

.sun {
  position: fixed;
  inset: 0;
  margin: auto;
  height: 100%;
  width: auto;
  max-width: 100vw;
  max-height: 100vh;
  aspect-ratio: 1;
  display: block;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #000 url('spinner.gif') no-repeat center center;
  transition: opacity .8s;
}
.loader.gone { opacity: 0; pointer-events: none; }

.time, .observed {
  position: fixed;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  z-index: 99;
  font-family: system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.time { top: max(10px, env(safe-area-inset-top)); }
.observed { top: calc(max(10px, env(safe-area-inset-top)) + 22px); font-size: 12px; opacity: .55; }

.hover {
  position: fixed;
  width: 200px;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 98;
}
.hover:hover ~ .btn, body:has(.btn:hover) .btn, .btn:focus-visible, .btn:focus-within { left: 30px; }

.btn {
  z-index: 99;
  display: block;
  position: fixed;
  width: 100px;
  height: 100px;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  left: -100px;
  cursor: pointer;
  transition: left .3s, opacity .3s;
}
.btn:focus-visible, .link:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* the active sun is marked by dimming the others a little */
body.sun-blauw-rood .groen-rood, body.sun-blauw-rood .internet,
body.sun-groen-rood .blauw-rood, body.sun-groen-rood .internet,
body.sun-internet .blauw-rood, body.sun-internet .groen-rood { opacity: .55; }

.blauw-rood  { background-image: url('blauw-rood.png');  top: 50px; }
.groen-rood  { background-image: url('groen-rood.png');  top: 150px; }
.internet    { background-image: url('internet.png');    top: 250px; }
.labo        { background-image: url('labo.png');        top: 350px; }
.screensaver { background-image: url('screensaver.png'); top: 450px; }
.HOTSPOT     { background-image: url('HOTSPOT.png');     top: 550px; }

.link { display: block; width: 100%; height: 100%; }

/* touch screens have no hover: show the menu along the bottom instead */
@media (hover: none) {
  .hover { display: none; }
  .btn { top: auto; left: auto; bottom: calc(10px + env(safe-area-inset-bottom)); width: 15vw; height: 15vw; max-width: 70px; max-height: 70px; }
  .blauw-rood  { left: 2%; }  .groen-rood { left: 18.5%; } .internet { left: 35%; }
  .labo        { left: 51.5%; } .screensaver { left: 68%; } .HOTSPOT { left: 84.5%; }
}