body,
html {
  overflow: hidden;
  background-color: transparent;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#planet-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  pointer-events: none;
  z-index: var(--z-canvas);
  /* Fond noir porte par le canvas lui-meme, pas par body/html. C'etait
     le schema d'origine du site (position:absolute + z-index positif +
     background-color:black directement sur #stars-canvas) avant un
     refactor qui l'a fait passer en position:fixed + z-index negatif
     SANS reporter le background -- bug connu sur mobile (WebKit/iOS
     notamment) : un element position:fixed en z-index negatif peut ne
     pas composer correctement avec le fond d'un ancetre (body/html),
     et disparaitre completement au lieu de laisser transparaitre le
     fond attendu. Porter le noir directement sur le canvas evite ce
     probleme : c'est son propre fond de boite, peint avant le rendu
     WebGL, independamment de tout comportement d'empilement avec ses
     ancetres. */
  background-color: black;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slogan-container {
  color: white;
  z-index: var(--z-content);
}