:root {
  --background-color: black;
  --foreground-color: white;
  --inverse-foreground-color: hsla(0, 0%, 0%, 0.75);
  --accent-1: #ff006e;
  --accent-2: #8338ec;
  --accent-3: #3a86ff;
  --accent-4: #299e9e;
  --accent-5: #65b867;
  --accent-6: #ffbe0b;
  --accent-7: #fb5607;
  --accent-8: #f6091d;

  --font-weight-display: 900;
  --size-extra-tiny: 4px;
  --size-tiny: 8px;
  --size-small: 12px;
  --size-regular: 16px;
  --size-large: 24px;
  --size-huge: 64px;
  --container: 480px;

  --font-family-count: "Roboto Mono";
  --font-weight-count: 100;
  --font-family-label: "Roboto Slab";
  --font-weight-label: 325;
  --font-family-title: "Roboto Slab";
  --font-weight-title: 100;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("/fonts/RobotoMono-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 700;
  font-style: normal;
}

@font-face {
  font-family: "Roboto Slab";
  src: url("/fonts/RobotoSlab-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

body,
html {
  background: var(--background-color);
  font-family: var(--font-family);
  font-size: var(--size-regular);
  line-height: 1;
}

main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--size-regular);
  box-sizing: border-box;
  width: 100%;
  max-width: var(--container);
  padding: var(--size-regular);
  margin: 0 auto;
}

.unit {
  position: relative;
  border: 2px solid currentColor;
}

.display {
  display: flex;
  align-items: baseline;
  box-sizing: border-box;
  padding-bottom: var(--size-extra-tiny);
}

.display.foreground {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  overflow: hidden;
  color: var(--inverse-foreground-color);
  transition: width 100ms ease-in-out;
}

.count {
  font-size: var(--size-huge);
  font-family: var(--font-family-count);
  font-weight: var(--font-weight-count);
  margin-left: var(--size-tiny);
}

.label {
  font-size: var(--size-large);
  font-family: var(--font-family-label);
  font-weight: var(--font-weight-label);
  margin: 0 var(--size-tiny);
}

.unit.years {
  color: var(--accent-7);
}

.unit.years .display.foreground {
  background-image: linear-gradient(
    90deg,
    var(--accent-7),
    var(--accent-1) var(--container)
  );
}

.unit.months {
  color: var(--accent-6);
}

.unit.months .display.foreground {
  background-image: linear-gradient(
    90deg,
    var(--accent-6),
    var(--accent-8) var(--container)
  );
}

.unit.weeks {
  color: var(--accent-4);
}

.unit.weeks .display.foreground {
  background-image: linear-gradient(
    90deg,
    var(--accent-4),
    var(--accent-3) var(--container)
  );
}

.unit.days {
  color: var(--accent-5);
}

.unit.days .display.foreground {
  background-image: linear-gradient(
    90deg,
    var(--accent-5),
    var(--accent-6) var(--container)
  );
}

.unit.hours {
  color: var(--accent-8);
}

.unit.hours .display.foreground {
  background-image: linear-gradient(
    90deg,
    var(--accent-8),
    var(--accent-6) var(--container)
  );
}

.unit.minutes {
  color: var(--accent-2);
}

.unit.minutes .display.foreground {
  background-image: linear-gradient(
    90deg,
    var(--accent-2),
    var(--accent-4) var(--container)
  );
}

.unit.seconds {
  color: var(--accent-1);
}

.unit.seconds .display.foreground {
  background-image: linear-gradient(
    90deg,
    var(--accent-1),
    var(--accent-2) var(--container)
  );
}

.title {
  color: var(--foreground-color);
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-title);
  font-size: var(--size-large);
  line-height: 1.333;
}