*{
	box-sizing: border-box;
}
:root {
  /*color-scheme: light dark;*/

  --bg-dark: rgb(11, 11, 11);
  --bg-light: rgb(248, 244, 238);
  --txt-light: rgb(10, 10, 10);
  --txt-dark: rgb(245, 245, 245);
  --line-light: rgba(0 0 0 / .25);
  --line-dark: rgba(255 255 255 / .25);

  --clr-bg: light-dark(var(--bg-light), var(--bg-dark));
  --clr-txt: light-dark(var(--txt-light), var(--txt-dark));
  --clr-lines: light-dark(var(--line-light), var(--line-dark));
  --clr-accent: dodgerblue;

}

strong{
	font-weight:700;
	color: red;
}
.countdown {
  --numbers-clr: black;
  --number-font-size: 2rem;
  --numbers-not-active-opacity: .25;
  --box-border-clr: var(--clr-lines);
  --box-bg-clr: transparent;

  --trans-duration: 300ms;
  --trans-easing: linear(0, 0.845 47.4%, 1 57.7%, 0.935 64.9%, 0.92 68.4%, 0.915 71.9%, 0.927 77.9%, 0.989 91.9%, 1);
  
 display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: .5rem;
  place-content: center;

}

.unit {
  text-align: center;
  color: black;
  position: relative;
  display: grid;
  gap: .5rem;
}

.ring {
  position: relative;
  border: 1px solid var(--box-border-clr);
  padding: 1rem 1rem 1.5rem 1rem;
  background-color: white;

  & > .label{
    position: absolute;
    left: 50%;
    bottom:0;
    translate: -50% -.5rem;
    margin: 0;
    /*background-color: var(--clr-bg);*/
     z-index: 2;
     display: block;
    
    font-size: .6rem;
    opacity: .8;
     text-align: center;
    
  }
  
  &:has(.reached) {
    opacity: .5;
  }
}

.numbers {
  display: grid;
  place-items: center;
  width: 30px;
  aspect-ratio: 1;
}

.number {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: var(--number-font-size);
    font-weight: bold;
    transform: translateX(-0.1em);
/*
  position: static;
  font-size: var(--number-font-size);
  color: var(--numbers-clr);
  font-weight: bold;*/
}
  
}