:root {
  --pink-light: #FFCF71;
  --pink-dark: #FF9D00;
  --white: #B6771D;
  --brown: #7B542F;
}

html,
body {
  height: 100%;
  width: 100%;
  max-width: 100%;
  color: var(--brown);
  overflow: hidden;
}

body {
  display: grid;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: "Nunito", Arial, Helvetica, sans-serif;
  font-weight: 600;
  background-color: var(--pink-light);
}

.contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  visibility: hidden;
}

header {
  text-align: center;
  font-size: min(min(19vw, 30vh), 10rem);
}

h1 {
  margin: 0;
  /* margin-bottom: -.25em; */
  text-align: center;
  font-family: "Cookie", cursive;
  font-weight: 400;
  font-style: normal;
  line-height: .75;
  font-size: 1em;
}

header p {
  text-transform: uppercase;
  font-weight: 800;
  margin: 0;
  font-size: .125em;
  letter-spacing: .5ch;
}

.countdown {
  display: flex;
}

.number-group {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: min(min(13vw, 18vh), 9rem);
}

number-flow,
span {
  font-family: "Nunito", Arial, Helvetica, sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 1000;
}

small {
  margin-top: -.5em;
  font-size: .25em;
}

:is(#colon-one, #colon-two)::part(digit) {
  display: none;
}

.dosis {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.extra-bold {
  font-weight: 1000;
}

#confetti {
  position: absolute;
  z-index: -1;
  opacity: .75;
  mix-blend-mode: overlay;
}

.img {
  position: absolute;
  mix-blend-mode: overlay;
  z-index: -2;
  transform: rotate(20deg);
  user-select: none;
  opacity: .5;
}

.img img {
  width: min(50vw, 50vh);
}

.img.one {
  top: 0;
  left: 0;
}

.img.one img {
  margin-top: -20%;
  margin-left: -20%;
}

.img.two {
  bottom: 0;
  right: 0;
}

.img.two img {
  transform: translate(50%, 10%);
}