/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* FULLSCREEN BLACK BACKGROUND */
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* No scrolling */
  background: #000;
  font-family: 'Poppins', sans-serif;
}

/* CONTAINER FOR THE DONUT */
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; /* ← stack vertically */
  justify-content: center;
  align-items: center;
  position: relative;
}

/* DOT-GRID CANVAS (Background) */
#dot-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* SVG DONUT STYLING */
.donut {
  width: 80vmin; /* 80% of the smaller screen dimension */
  height: 80vmin;
}

/* DONUT PROGRESS CIRCLE */
.donut-progress {
  fill: none;
  stroke-width: 30px;
  stroke-linecap: round;
  stroke-dasharray: 1006; /* circumference approximated to 1006 */
  stroke-dashoffset: 2012; /* start at 100% "empty" */
  transform: rotate(-90deg);
  transform-origin: 50% 50%; /* Start at the top (12 o’clock) */
  transition: stroke-dashoffset 1s ease; /* fallback transition */
}

/* DONUT TEXT (NUMBER) */
.donut-text {
  fill: #fff;
  font-size: 6rem;
  font-weight: 700;
  dominant-baseline: middle;
}

@media (min-width: 768px) {
  .donut-text {
    font-size: 8rem;
  }
}

.remaining-days {
  position: absolute;
  bottom: 5px;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 1.5rem;
  font-family: 'Poppins', sans-serif;
}

/* overall SVG text container */
.donut-text {
  fill: #fff;
  font-family: 'Poppins', sans-serif;
}

/* large but smaller than before */
.percent-line {
  font-size: 4rem;
  font-weight: 700;
}

/* little caption below */
.value-line {
  font-size: 1.5rem;
  fill: #ccc; /* or whatever accent color */
  font-weight: 400;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
  .remaining-days {
    bottom: 40px;
  }
}