:root {
  --foreground: #ebebeb;
  --background: #1b1f23;
  --grey: #2f363d;
}

@media (prefers-color-scheme: light) {
  :root {
    --foreground: #1b1f23;
    --background: #ebebeb;
    --grey: #d1d5da;
  }
}

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

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  /* Use dynamic viewport height to avoid mobile browser UI shrinking issues */
  height: 100dvh;
  /* Explicit, verbose background declarations for clarity & control */
  background-image: url('../blechroller.jpg');
  background-repeat: no-repeat;
  background-position: 50% 50%; /* Always perfectly centered */
  background-size: cover; /* Fill viewport while preserving aspect ratio */
  background-attachment: fixed; /* Parallax-style stability on desktop */
}

* {
  margin: 0;
  padding: 0;
}

body > * {
  display: none;
}

/* On small screens & devices with a coarse pointer (most touch devices),
   background-attachment: fixed can cause repaint & jitter / zoom issues.
   Switch to scroll so the image still scales correctly. */
@media (max-width: 900px), (pointer: coarse) {
  body {
    background-attachment: scroll;
  }
}

/* Fallback for browsers that don't yet support dvh (older Safari, etc.) */
@supports not (height: 100dvh) {
  body {
    height: 100vh;
  }
}