@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
:root 
{
  --secondsCircleDiameter: 1030; 
  --minutesCircleDiameter: 780; 
  --hoursCircleDiameter: 580;
  --daysCircleDiameter: 380;
  --monthsCircleDiameter: 180;
}

.yearHolder 
{
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  /* text-shadow: 0 0 5px #fff; */
}

.secondsCircleContainer,
.minutesCircleContainer,
.hoursCircleContainer,
.daysCircleContainer,
.monthsCircleContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
  transform-origin: center center;
}
.secondsCircleContainer 
{
  transform: translateY(-300px);
}
.minutesCircleContainer 
{
  transform: translateY(-300px);
}
.hoursCircleContainer 
{
  transform: translateY(-300px);
}
.daysCircleContainer 
{
  transform: translateY(-330px);
}
.monthsCircleContainer 
{
  transform: translateY(-330px);
}

.secondsOuterCircle,
.minutesOuterCircle,
.secondsInnerCircle,
.minutesInnerCircle,
.hoursOuterCircle,
.hoursInnerCircle,
.daysOuterCircle,
.daysInnerCircle,
.monthsOuterCircle,
.monthsInnerCircle {
  position: absolute;
  border-radius: 50%;
  border: 2px solid #444;
}

.secondsInnerCircle,
.minutesInnerCircle,
.hoursInnerCircle,
.daysInnerCircle,
.monthsInnerCircle {
  border-style: dotted;
}

.secondsOuterCircle {
  width: calc(var(--secondsCircleDiameter) * 1px);
  height: calc(var(--secondsCircleDiameter) * 1px);
}

.minutesOuterCircle {
  width: calc(var(--minutesCircleDiameter) * 1px);
  height: calc(var(--minutesCircleDiameter) * 1px);
}

.hoursOuterCircle {
  width: calc(var(--hoursCircleDiameter) * 1px);
  height: calc(var(--hoursCircleDiameter) * 1px);
}

.daysOuterCircle {
  width: calc(var(--daysCircleDiameter) * 1px);
  height: calc(var(--daysCircleDiameter) * 1px);
}

.monthsOuterCircle {
  width: calc(var(--monthsCircleDiameter) * 1px);
  height: calc(var(--monthsCircleDiameter) * 1px);
}

.secondsInnerCircle {
  width: calc(var(--secondsCircleDiameter) * 1px - 20px);
  height: calc(var(--secondsCircleDiameter) * 1px - 20px);
}


.minutesInnerCircle {
  width: calc(var(--minutesCircleDiameter) * 1px - 20px);
  height: calc(var(--minutesCircleDiameter) * 1px - 20px);
}

.hoursInnerCircle {
  width: calc(var(--hoursCircleDiameter) * 1px - 20px);
  height: calc(var(--hoursCircleDiameter) * 1px - 20px);
}

.daysInnerCircle {
  width: calc(var(--daysCircleDiameter) * 1px - 20px);
  height: calc(var(--daysCircleDiameter) * 1px - 20px);
}

.monthsInnerCircle {
  width: calc(var(--monthsCircleDiameter) * 1px - 20px);
  height: calc(var(--monthsCircleDiameter) * 1px - 20px);
}



  .secondsNumber,
  .minutesNumber,
  .hoursNumber,
  .daysNumber,
  .monthsNumber {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
    font-size: 20px;
    color: #555;
    transition: color 0.5s;
    font-family: "Montserrat", sans-serif;
  }

  .minutesNumber {
    font-size: 15px;
  }
  .hoursNumber {
    font-size: 15px;
  }
  .monthsNumber {
    font-size: 15px;
  }
  .secondsSegment,
  .minutesSegment,
  .hoursSegment,
  .daysSegment,
  .monthsSegment {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 10px; 
    background: #555;
    transform-origin: 0 0;
    transition: background 0.2s ease, filter 0.2s ease;
  }


  @media (max-width: 768px) {
    
    :root {
      --secondsCircleDiameter: 1000;
      --minutesCircleDiameter: 750;
      --hoursCircleDiameter: 580;
      --daysCircleDiameter: 400;
      --monthsCircleDiameter: 200;
    }
    .secondsCircleContainer,
    .minutesCircleContainer,
    .hoursCircleContainer,
    .daysCircleContainer
    {
      transform: translateY(-200px);
    }
    .daysNumber {
      font-size: 15px;
    }
  
    .yearHolder {
      font-size: 18px;
    }
  }