.pie-chart {
  background:
    radial-gradient(
      circle closest-side,
      white 0,
      white 51.48%,
      transparent 51.48%,
      transparent 66%,
      white 0
    ),
    conic-gradient(
      #59a14f 0,
      #59a14f 70%,
      #d6d7d9 0,
      #d6d7d9 100%
  );
  position: relative;
  width: 250px;
  min-height: 350px;
  margin: 0;
  /*outline: 1px solid #ccc;*/
}
.pie-chart h2 {
  position: absolute;
  margin: 1rem;
}
.pie-chart cite {
  position: absolute;
  bottom: 0;
  font-size: 80%;
  padding: 1rem;
  color: gray;
}
.pie-chart figcaption {
  position: absolute;
  bottom: 1em;
  right: 1em;
  font-size: smaller;
  text-align: right;
}
.pie-chart span:after {
  display: inline-block;
  content: "";
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.4em;
  height: 0.8em;
  border-radius: 0.2em;
  background: currentColor;
}
.pie-chart .number {
  position: absolute;
  /*top:0;
  bottom;
  left:0;
  right:0;*/
}
@media only screen and (max-width:768px) { 
    .pie-chart  {
      width:200px;
    }
    cite  {
      text-align: center;
    }
}