/* Default background for small devices (mobile) */
body {
  background-image:
    linear-gradient(rgb(var(--background-defaultChannel) / 0.2) 60%, rgb(var(--background-defaultChannel))),
    var(--bg-image-url-fallback);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

:root {
  --bg-image-url-fallback: url('/images/480/clear-480');
}
@media (prefers-color-scheme: dark) {
  :root{
    --bg-image-url-fallback: url('/images/480/dark-480');
  }
}

/* For tablets and medium screens */
@media (min-width: 768px) {
  :root {
    --bg-image-url-fallback: url('/images/768/clear-768')
  }
  @media (prefers-color-scheme: dark) {
    :root{
      --bg-image-url-fallback: url('/images/768/dark-768')
    }
  }
}

/* For desktops and larger screens */
@media (min-width: 1200px) {
  :root {
    --bg-image-url-fallback: url('/images/1440/clear-1440')
  }
  @media (prefers-color-scheme: dark) {
    :root{
      --bg-image-url-fallback: url('/images/1440/dark-1440')
    }
  }
}

/* For retina or large desktop displays */
@media (min-width: 1600px) {
  :root {
    --bg-image-url-fallback: url('/images/1920/clear-1920')
  }
  @media (prefers-color-scheme: dark) {
    :root{
      --bg-image-url-fallback: url('/images/1920/dark-1920')
    }
  }
}