:root {
  color-scheme: dark;
  --field: #252f31;
  --field-deep: #101719;
  --field-soft: #3d474a;
  --mint: #90e0d0;
  --mint-light: #a0f0e0;
}

* {
  box-sizing: border-box;
}

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

body {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(144, 224, 208, 0.11), transparent 26rem),
    radial-gradient(circle at 18% 88%, rgba(160, 240, 224, 0.07), transparent 20rem),
    linear-gradient(145deg, var(--field-soft), var(--field) 32%, var(--field-deep));
  color: var(--mint);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

.landing {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

#murmuration {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.landing::before,
.landing::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
}

.landing::before {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.045), transparent 34%),
    linear-gradient(295deg, rgba(0, 0, 0, 0.26), transparent 45%);
  mix-blend-mode: soft-light;
}

.landing::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 44%, rgba(8, 12, 13, 0.36) 82%),
    linear-gradient(0deg, rgba(12, 18, 19, 0.42), transparent 30% 74%, rgba(12, 18, 19, 0.28));
}

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

@media (max-width: 760px) {
  body {
    background:
      radial-gradient(circle at 50% 45%, rgba(144, 224, 208, 0.12), transparent 18rem),
      linear-gradient(155deg, var(--field-soft), var(--field) 38%, var(--field-deep));
  }
}