:root {
  --page-bg: #ddcbfd;
  --text-color: #4f25b6;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--page-bg);
  color: var(--text-color);
  font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
}

.coming-soon {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

.logo {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: min(77vw, 470px);
  height: auto;
}

.headline {
  position: absolute;
  top: 77%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.045em;
  white-space: nowrap;
  text-align: center;
}

@media (max-height: 580px) and (min-width: 650px) {
  .logo {
    width: min(54vh, 350px);
  }

  .headline {
    top: 81%;
  }
}

@media (max-width: 480px) {
  .logo {
    top: 35%;
    width: min(90vw, 390px);
  }

  .headline {
    top: 75%;
    font-size: clamp(42px, 12vw, 60px);
  }
}