:root {
  color-scheme: light;
  font-family: "Helvetica Neue", "Segoe UI", "Yu Gothic", "YuGothic",
    "Hiragino Kaku Gothic ProN", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background-color: #2f91e9;
  background-image: url("./assets/bg-day.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@supports (background-image: image-set(url("image.webp") type("image/webp"))) {
  body {
    background-image: image-set(
      url("./assets/bg-day.webp") type("image/webp"),
      url("./assets/bg-day.png") type("image/png")
    );
  }
}

.title-screen {
  display: grid;
  width: 100%;
  height: 100vh;
  height: 100svh;
  place-items: center;
}

.title-block {
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: calc(100vw - 2rem);
  color: #fff;
  text-align: center;
  transform: translateY(clamp(-3.5rem, -6vh, -1.5rem));
}

.site-title {
  margin: 0;
  font-size: clamp(1.45rem, 3.2vw, 2.7rem);
  font-weight: 300;
  letter-spacing: clamp(0.42rem, 1.15vw, 0.92rem);
  line-height: 1.22;
}

.site-title span {
  display: block;
  padding-inline-start: clamp(0.42rem, 1.15vw, 0.92rem);
}

.title-rule {
  width: 90%;
  height: 1px;
  margin: clamp(1.35rem, 3vh, 2rem) 0 0;
  border: 0;
  background-color: currentColor;
}

.coming-soon {
  margin: clamp(0.8rem, 1.8vh, 1.15rem) 0 0;
  padding-inline-start: 0.36em;
  font-size: clamp(0.66rem, 1.15vw, 0.78rem);
  font-weight: 300;
  letter-spacing: 0.36em;
  line-height: 1;
}

@media (max-width: 30rem) {
  .title-block {
    transform: translateY(-4vh);
  }
}