@font-face {
  font-family: Jost;
  src: url('assets/jost-subset.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  background: #45713c;
  color: #fffbea;
  font-family: Jost, Arial, sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; }

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #45713c url('assets/background-desktop.svg') 50% 48.5% / cover no-repeat;
}

.logo {
  position: absolute;
  top: 5.2%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(150px, 17%, 260px);
  height: auto;
}

.mark {
  position: absolute;
  top: 48.2%;
  left: 50%;
  width: clamp(150px, 15%, 210px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.message {
  position: absolute;
  top: 75%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  font-size: clamp(23px, 2.5vw, 34px);
  font-weight: 400;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .page { background-image: url('assets/background-mobile.svg'); }
  .logo { top: 11%; left: 50%; width: 63%; transform: translateX(-50%); }
  .mark { top: 49%; width: 42%; }
  .message { top: 75%; font-size: 27px; }
}

@media (max-height: 450px) {
  .logo { top: 5%; width: min(35vw, 28vh); }
  .mark { width: min(30vw, 36vh); }
  .message { font-size: clamp(16px, 6.3vh, 27px); }
}