:root {
  --countdown-bg: #222;
  --countdown-text-color: #fff;
  --countdown-font: "Helvetica Neue", Arial, sans-serif;
  --countdown-title-size: clamp(2.25rem, 7vw, 5rem);
  --countdown-value-size: clamp(1.5rem, 4.5vw, 3rem);
  --countdown-block-padding: 0.5em;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  min-height: 100vh;
  min-width: 100vw;
  background: var(--countdown-bg);
  color: var(--countdown-text-color);
  font-family: var(--countdown-font);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background 250ms ease;
  user-select: none;
  -webkit-user-select: none;
}

.countdown-card {
  padding: var(--countdown-block-padding);
  margin: 0 auto;
}

.countdown-title {
  margin: 0;
  padding: var(--countdown-block-padding);
  font-size: var(--countdown-title-size);
  line-height: 1.1;
  color: inherit;
  font-weight: 600;
}

[data-countdown-value],
.countdown-value {
  margin: 0;
  padding: var(--countdown-block-padding);
  font-size: var(--countdown-value-size);
  line-height: 1.2;
  word-break: break-word;
}

body[data-theme="baus"] {
  --countdown-bg: #f08080;
  --countdown-title-size: clamp(3rem, 11vw, 6rem);
  --countdown-value-size: clamp(1.8rem, 6vw, 3.6rem);
}

body[data-theme="eliana_bday"] {
  --countdown-bg: #7e07a5;
  --countdown-title-size: clamp(2.8rem, 10vw, 5.5rem);
  --countdown-value-size: clamp(1.7rem, 5.5vw, 3.4rem);
}

body[data-theme="joe_bday"] {
  --countdown-bg: #0d4e9e;
  --countdown-title-size: clamp(2.8rem, 10vw, 5.5rem);
  --countdown-value-size: clamp(1.7rem, 5.5vw, 3.4rem);
}

body[data-theme="school_end"] {
  --countdown-bg: #cde433;
  --countdown-text-color: #000;
  --countdown-title-size: clamp(2.8rem, 10vw, 5.5rem);
  --countdown-value-size: clamp(1.7rem, 5.5vw, 3.4rem);
}

body[data-theme="luna_bday"] {
  --countdown-bg: #cb22a9;
  --countdown-title-size: clamp(2.8rem, 10vw, 5.5rem);
  --countdown-value-size: clamp(1.7rem, 5.5vw, 3.4rem);
}

body[data-theme="mal_bday"] {
  --countdown-bg: #bf6f08;
  --countdown-title-size: clamp(2.8rem, 10vw, 5.5rem);
  --countdown-value-size: clamp(1.7rem, 5.5vw, 3.4rem);
}

body[data-theme="christmas"] {
  --countdown-bg: #006417;
  --countdown-title-size: clamp(2.8rem, 10vw, 5.5rem);
  --countdown-value-size: clamp(1.7rem, 5.5vw, 3.4rem);
}

body[data-theme="home"] {
  --countdown-bg: #3114c1;
  --countdown-text-color: #fff;
  --countdown-title-size: clamp(2.8rem, 10vw, 5.5rem);
  --countdown-value-size: clamp(1.7rem, 5.5vw, 3.4rem);
}

body[data-theme="trump"] {
  --countdown-bg: transparent;
  --countdown-text-color: #000;
  --countdown-title-size: clamp(2.8rem, 10vw, 5.5rem);
  --countdown-value-size: clamp(1.7rem, 5.5vw, 3.4rem);
  position: relative;
  z-index: 0;
}

body[data-theme="trump"] .countdown-title,
body[data-theme="trump"] .countdown-value {
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9),
    0 0 14px rgba(255, 255, 255, 0.7);
}

body[data-theme="trump"]::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background: url('../img/FlagDistress.webp') center center / cover no-repeat;
  opacity: 0.2;
  pointer-events: none;
}

@media (max-width: 600px) {
  body {
    justify-content: flex-start;
  }

  .countdown-card {
    padding-top: 1.5rem;
  }
}