@font-face {
  font-family: "remixicon";
  src: url("../fonts/rimixicon/remixicon.woff2") format("woff2"),
       url("../fonts/rimixicon/remixicon.woff") format("woff"),
       url("../fonts/rimixicon/remixicon.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}


:root {
  --progress-bar-width: 151px;
  --progress-bar-height: 151px;
}

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

.percentage {
  position: relative;
}

@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;
  }
}