@property --percent {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
.progress{
	
	
	  /*   border: 5px outset red; /*temporary line to add red border to progress pie*/
  
  	
	
	
  --fill-neutral: hsl(0 0% 25%);
  --fill-from: hsl(0 100% 50%);
  --fill-to: hsl(100 100% 50%);
  --part-count: 20;
  --part-spacing: 1deg;
  --part-width: 10%;
  --animation-duration: 2s;
  font-size: 1.5rem;
  width: 4em;
  aspect-ratio: 1/1;
  font-family: system-ui, sans-serif;
  color: hsl(0 0% 95%);
  display: grid;
  place-items: center;
  position: relative;
  &::before {
    content: "";
    inset: 0;
    position: absolute;
    border-radius: 50%;
    background-image: 
      conic-gradient(transparent var(--percent), var(--fill-neutral) var(--percent)),
      conic-gradient(var(--fill-from), var(--fill-to));
    --part-size: calc(360deg / var(--part-count) - var(--part-spacing));
    mask-image: 
      repeating-conic-gradient(
        transparent 0 calc(var(--part-spacing) / 2), 
        black calc(var(--part-spacing) / 2 + .25deg) calc(var(--part-spacing) / 2 + var(--part-size) - .25deg),
        transparent calc(var(--part-spacing) + var(--part-size) / 2) calc(var(--part-size) + var(--part-spacing))
      ),
      radial-gradient(
        100% 100%, 
        black calc(50% - var(--part-width) - 1px), 
        transparent calc(50% - var(--part-width))
      );
    mask-composite: subtract, add;
    animation: progress-fill var(--animation-duration) linear forwards; 
  }
}
@keyframes progress-fill { from { --percent: 0% } }

*, *::before, *::after { box-sizing: border-box }

/*

**** This body section is commented, so it does not interfere with the body section of the "main.css" file of the main HTML page
****

body {
  background-color: hsl(0 0% 5%);
  margin: 0;
  padding: 2rem;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-content: center;
}

*/