:root {
  --progress-bar-width: 200px;
  --progress-bar-height: 200px;
  --data-bg-color: rgb(99, 148, 245);
  --progressColor: rgb(99, 148, 245);
  --font-size: 2rem;
}	

.circular-progress {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index:999;
  position:relative;
}
.inner-circle {
  position: absolute;
  width: calc(var(--progress-bar-width) - 30px);
  height: calc(var(--progress-bar-height) - 30px);
  border-radius: 50%;
  background-color: lightgrey;
}

.percentage {
  position: relative;
  font-size: var(--font-size);
  color: rgb(99, 148, 245, 0.8);
}

@media screen and (max-width: 800px) {
  :root {
    --progress-bar-width: 150px;
    --progress-bar-height: 150px;
    --font-size: 1.3rem;
  }
}

@media screen and (max-width: 500px) {
  :root {
    --progress-bar-width: 120px;
    --progress-bar-height: 120px;
    --font-size: 1rem;
  }
  
.inner-circle {
  position: absolute;
  width: calc(var(--progress-bar-width) - 2px);
  height: calc(var(--progress-bar-height) - 2px);
  border-radius: 50%;
  background-color: lightgrey;
}  
  
}