:root {
  --page-bg: #001f27;
  --number-colour: #06242b;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: var(--page-bg);
}

body {
  overflow: hidden;
}

.sota-page {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  background: var(--page-bg);
}

/*
  The original artwork is 2048 × 1152, which is exactly 16:9.
  This stage scales up or down while preserving that ratio.
*/
.sota-countdown {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  overflow: hidden;
  background: var(--page-bg);
  container-type: inline-size;

  /* Coordinates are based on the 2048 × 1152 artwork. */
  --box-top: 75.174%;
  --box-width: 9.082%;
  --box-height: 16.146%;
  --days-left: 30.322%;
  --hours-left: 40.332%;
  --minutes-left: 50.391%;
  --seconds-left: 60.596%;
}

.sota-countdown__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

.sota-countdown__numbers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sota-time-box {
  position: absolute;
  top: var(--box-top);
  width: var(--box-width);
  height: var(--box-height);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--number-colour);
  font-family: "Anton", "Bebas Neue", "League Gothic", "Arial Narrow", Impact, "Arial Black", sans-serif;
  font-size: clamp(22px, 6.0cqw, 123px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sota-time-box:nth-child(1) { left: var(--days-left); }
.sota-time-box:nth-child(2) { left: var(--hours-left); }
.sota-time-box:nth-child(3) { left: var(--minutes-left); }
.sota-time-box:nth-child(4) { left: var(--seconds-left); }

.sota-time-box span {
  display: block;
  width: 100%;
  text-align: center;
  transform: translateY(2%) scaleX(0.82);
  transform-origin: center center;
}

/* If days ever reaches 3+ digits, shrink it so it stays inside the first box. */
.sota-time-box--wide {
  font-size: clamp(18px, 4.95cqw, 101px);
}

.sota-time-box--wide span {
  transform: translateY(2%) scaleX(0.72);
}

/* Fallback for browsers that do not support container query units. */
@supports not (font-size: 1cqw) {
  .sota-time-box {
    font-size: clamp(22px, 6.0vw, 123px);
  }

  .sota-time-box--wide {
    font-size: clamp(18px, 4.95vw, 101px);
  }
}