@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/IBM_Plex_Sans/static/IBMPlexSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --background: #141616;
  --background-soft: #1c1c1c;
  --foreground: #f2f1ec;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--background);
}

body {
  min-height: 100vh;
  margin: 0;
  font-family: "IBM Plex Sans", Arial, sans-serif;
  background: var(--background);
  color: var(--foreground);
}

.landing {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(1.5rem, 5vw, 4.75rem);
  background-color: var(--background-soft);
  background-image:
    radial-gradient(circle at 50% 50%, #282a29 0, #202221 13rem, transparent 28rem),
    linear-gradient(145deg, #1c1c1c 0%, var(--background) 54%, #0b0d0d 100%);
}

.waymark-logo {
  position: absolute;
  top: clamp(1.25rem, 6vh, 4.5rem);
  left: clamp(1.25rem, 5vw, 4.75rem);
  width: min(38vw, 26rem);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.announcement {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(100%, 40rem);
  margin: 0;
  text-align: center;
  transform: translate(-50%, -50%);
}

.announcement h1 {
  margin: 0;
  font-weight: 400;
}

.announcement h1 {
  color: var(--foreground);
  font-size: clamp(1.125rem, 2.45vw, 1.4rem);
  line-height: 1;
}

@media (max-width: 720px) {
  .landing {
    min-height: 100svh;
    padding: 1.5rem;
  }

  .waymark-logo {
    top: 2rem;
    left: 1.5rem;
    width: min(66vw, 18rem);
  }

  .announcement h1 {
    font-size: clamp(1.125rem, 5vw, 1.3rem);
  }
}