:root {
  color-scheme: dark;
}

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

body {
  margin: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(36, 157, 121, 0.18), transparent 32rem),
    radial-gradient(circle at 85% 75%, rgba(25, 135, 184, 0.14), transparent 28rem),
    #0d1218;
}

body::before {
  background-image: none;
}

.coming-soon {
  position: relative;
  overflow: hidden;
}

.coming-soon::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.coming-soon > .flex-1 {
  position: relative;
  z-index: 1;
  width: 100%;
}

.brand-mark {
  color: var(--bs-theme);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
}

.coming-soon-content h1 {
  font-size: clamp(2rem, 6vw, 3.5rem);
}

#form-message.is-error {
  color: #ff8d8d !important;
  opacity: 1 !important;
}

#form-message.is-success {
  color: var(--bs-theme) !important;
  opacity: 1 !important;
}

@media (max-width: 575.98px) {
  .coming-soon .coming-soon-timer,
  .coming-soon .coming-soon-content {
    padding-inline: 1rem;
  }

  #notify-form {
    display: grid;
    gap: 0.75rem;
  }

  #notify-form .form-control,
  #notify-form .btn {
    width: 100%;
    border-radius: 0;
  }
}