:root {
  --page-bg: #081018;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--page-bg);
  color: #ffffff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.landing {
  min-height: 100vh;
  background-color: var(--page-bg);
  background-image: url("../images/tf-landing-hero-4k.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

@supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
  .landing {
    background-image: image-set(
      url("../images/tf-landing-hero-4k.webp") type("image/webp") 1x,
      url("../images/tf-landing-hero-4k.png") type("image/png") 1x
    );
  }
}

@media (max-width: 900px) {
  .landing {
    background-image: url("../images/tf-landing-hero-mobile.png");
  }

  @supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
    .landing {
      background-image: image-set(
        url("../images/tf-landing-hero-mobile.webp") type("image/webp") 1x,
        url("../images/tf-landing-hero-mobile.png") type("image/png") 1x
      );
    }
  }
}

@media (max-aspect-ratio: 16/9) {
  .landing {
    background-size: auto 100%;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}