page.css

html {
  --easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
  font-family: system-ui, 'Roboto', sans-serif;
  font-weight: 400;
  color: var(--color-text);
  --h-diff: -1;
}
html[data-theme=light] {
  --color-bg: #CCC;
  --color-text: #111;
}
html,
html[data-theme=dark] {
  --color-bg: #111;
  --color-text: #EEE;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  align-items: center;
  --takeoff-height: 120%;
  background-color: var(--color-bg);
}
main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 14fr 72fr 14fr;
  --width: min(calc(1440/612 * 90vh), 75vw);
}
.la-switch {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  transform: translateZ(0);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .2));
}
html[data-theme=dark] .la-switch {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .05));
}
.nintendo-switch {
  --width: inherit;
  justify-self: center;
}
.warning {
  display: none;
}

* {
  /* Empêche le bleu moche quand on clique sur un truc sous chrome Android */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media screen and (max-width: 800px) {
  .warning {
    display: block;
    max-width: min(70ch, 90vw);
    grid-column: 1 / -1;
    margin: 16px;
    text-wrap: balance;
    text-wrap: pretty;
  }
}

@media screen and (max-width: 1439px) {
  main {
    --width: 90vw;
  }
}