:root {
  /** hill colors 1= lightest
#211A29 dark hill 2
#1A1823 dark hill 3
#2F2439 dark hill 1
#46485B star

body bg
- Very dark blue: hsl(235, 16%, 14%)

lower flip digit bg
- Dark desaturated blue: hsl(236, 21%, 26%)

upper flip digit bg
hsl(240, 21%, 22%)


social icon default
default body color
- Grayish blue: hsl(237, 18%, 59%)

flip digit foreground
- Soft red: hsl(345, 95%, 68%)
upper digit color
hsl(346, 62%, 57%)

*/
  /** Dark Grays **/
  --color-dark: hsl(235, 16%, 14%); /* Very dark blue */
  --color-dark-dark: hsl(234, 17%, 12%); /* Very dark (mostly black) blue*/
  --color-dark-contrast: white;

  /** Light Grays **/
  --color-light: hsl(236, 21%, 26%); /* Dark desaturated blue */
  --color-light-light: hsl(237, 18%, 59%); /* Grayish blue */
  --color-light-dark: hsl(240, 21%, 22%); /* darker Grayish blue */
  --color-light-accent: white;
  --color-light-contrast: hsl(253, 16%, 11%); /* almost black */

  /** Primary **/
  --color-primary: hsl(345, 95%, 68%); /* Soft red */
  --color-primary-contrast: black;
  --color-primary-dark: hsl(346, 62%, 57%);

  /** Secondary **/
  --color-secondary-light: #2f2439; /* dark hill 1 */
  --color-secondary: #211a29; /* dark hill 2 */
  --color-secondary-dark: #1a1823; /* dark hill 3 */
  --color-secondary-accent: #46485b; /* star */

  /** Design Tokens **/
  --designtoken-BackgroundColor-background: var(--color-dark);
  --designtoken-BackgroundColor-surface: var(--color-light);
  --designtoken-BackgroundColor-secondary-light: var(--color-secondary-light);

  --designtoken-TextColor-onBackground: var(--color-light-light);
  --designtoken-TextColor-onBackground--accent: var(--color-light-accent);
  --designtoken-TextColor-onSurface: var(--color-light-contrast);

  --designtoken-TextColor-primary: var(--color-primary);
  --designtoken-TextColor-primary--dark: var(--color-primary-dark);

  /** Components **/
  --wot-Icon-size-sm: 24px;
  --wot-Icon-size-md: 32px;
  --wot-Icon-size-lg: 50px;

  --FlipDigit-fontSize: 7.6rem;
  --FlipDigit-width: calc(var(--FlipDigit-fontSize) * 2);
  --FlipDigit-height: calc(var(--FlipDigit-fontSize) * 1.87);
}

/*
 * 1. font-size 1em = 10px on default browser settings
 */
html {
  font-size: 0.625em; /* 1 */
  font-family: 'Red Hat Text', sans-serif;
}
body {
  font-size: 0.7rem;
  padding: 0;
  margin: 0;
  line-height: 1.6;
  background-color: var(--designtoken-BackgroundColor-background);
  color: var(--designtoken-TextColor-onBackground);
  min-height: 100vh;
}
@media screen and (min-width: 514px) {
  body {
  font-size: 0.86666rem;
}
}
@media screen and (min-width: 653px) {
  body {
  font-size: 1.03332rem;
}
}
@media screen and (min-width: 792px) {
  body {
  font-size: 1.3rem;
}
}

/*
 * 1. Ensure lettering doesn't blend with stars.
 */
h1 {
  margin: 0;
  color: var(--designtoken-TextColor-onBackground--accent);
  background-color: var(--designtoken-BackgroundColor-background); /* 1 */
  text-transform: uppercase;
  font-size: 2rem;
  letter-spacing: 0.45em;
}
h2 {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: underline;
}
a:hover,
a:active {
  color: var(--designtoken-TextColor-primary);
}

.attribution {
  margin: 0.5em 1.7em;
  text-align: right;
  background-color: inherit;
  color: inherit;
}

/*
 * 1. Match width of pattern-hills graphic
 * 2. The pattern-hills graphic is shifted and scaled down; add extra padding to
 * bottom to compensate.
 */
.Landing {
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  max-width: 1440px; /* 1 */
  align-items: center;
  background-image: url("./images/pattern-hills.svg"),
    url("./images/bg-stars.svg");
  background-repeat: repeat-x, repeat;
  background-position: bottom 0px left -455px, top center;
  background-size: 891px 122px, 100%;
  border-bottom: 40px solid var(--color-secondary-light); /* 2 */
  box-sizing: border-box;
}
@media screen and (min-width: 432px) {
.Landing {
  background-position: bottom center, top center;
  background-size: auto, auto;
  border-bottom: 0; /* 2 */
}
}

.Landing-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

/*
 * 1. Height of pattern-hills.svg background
 */
.Landing-social {
  --Landing-socialDistance: 32px;
  --Landing-socialCount: 3;
  --Landing-socialIconWidth: 24px;
  width: calc(
    (
      var(--Landing-socialCount) *
        (var(--Landing-socialIconWidth) + var(--Landing-socialDistance))
    )
  );
  height: 197px; /* 1 */
  flex: 0 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/*
 * 1. Bump icons down slightly to match design.
 * 2. Make icons more clickable.
 */
.Landing-social > * {
  margin-top: 160px; /* 1 */
  width: calc(
    (var(--Landing-socialIconWidth) + var(--Landing-socialDistance) / 2)
  ); /* 2 */
  height: calc(
    (var(--Landing-socialIconWidth) + var(--Landing-socialDistance) / 2)
  ); /* 2 */
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 432px) {
.Landing-social > * {
  margin-top: 60px; /* 1 */
}
}

.LaunchCountdown {
  display: flex;
  justify-content: space-between;
  max-width: calc((4 * var(--FlipDigit-width)) + (3 * 30px));
  min-width: 300px;
  width: 88vw;
  margin: 0 auto;
}
@media screen and (min-width: 1440px) {
.LaunchCountdown {
  transform: scale(1);
}
}

.FlipDigit {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  max-width: var(--FlipDigit-width);
  min-width: 70px;
  width: 19.2vw;
  position: relative;
}
.FlipDigit::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  height: calc((17.943vw / 2) - 2px);
  pointer-events: none;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  background-color: rgba(0, 0, 0, 0.2);
  border-bottom: 2px double rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 792px) {
.FlipDigit::after {
  height: calc((var(--FlipDigit-height) / 2) - 2px);
}
}

.FlipDigit-value {
  --FlipDigit-dotSize: 1.3rem;
  background-color: var(--designtoken-BackgroundColor-surface);
  color: var(--designtoken-TextColor-primary);
  font-size: 9.595vw;
  max-width: var(--FlipDigit-width);
  min-width: 70px;
  width: 19.2vw;
  max-height: var(--FlipDigit-height);
  min-height: 70px;
  height: 17.943vw;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1rem;
  box-shadow: 0 10px 0px 0px var(--color-secondary-dark);
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 792px) {
.FlipDigit-value {
  font-size: var(--FlipDigit-fontSize);
}
}

.FlipDigit-value::before {
  content: "";
  position: absolute;
  width: var(--FlipDigit-dotSize);
  height: var(--FlipDigit-dotSize);
  border-radius: 50%;
  background-color: var(--color-secondary-dark);
  top: calc(50% - var(--FlipDigit-dotSize) / 2));
  left: calc((var(--FlipDigit-dotSize) / 2) * -1);
}
.FlipDigit-value::after {
  content: "";
  position: absolute;
  width: var(--FlipDigit-dotSize);
  height: var(--FlipDigit-dotSize);
  border-radius: 50%;
  background-color: var(--color-secondary-dark);
  top: calc(50% - var(--FlipDigit-dotSize) / 2));
  right: calc((var(--FlipDigit-dotSize) / 2) * -1);
}
.FlipDigit-label {
  line-height: 1;
  text-transform: uppercase;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  letter-spacing: 0.45em;
}
@media screen and (min-width: 792px) {
.FlipDigit-label {
}
}

/** Utilities **/

/**
 * Completely remove from the flow but leave available to screen readers.
 */
.u-hiddenVisually {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}