.pie-div {
  background-color: white;
  width: fit-content;
  padding: 2rem 1rem;
}

.pie-div {
  display: flex;
  align-items: center;
}

.pieChart {
  background: conic-gradient(
    rgb(0, 162, 255) 45deg,
    rgb(51, 2, 62) 45deg 90deg,
    rgb(0, 255, 38) 90deg 135deg,
    rgb(85, 128, 0) 135deg 180deg,
    rgb(218, 228, 79) 180deg 225deg,
    rgb(128, 36, 0) 225deg 270deg,
    rgb(128, 0, 96) 270deg 315deg,
    rgb(0, 107, 128) 315deg 360deg
  );
  height: 20rem;
  width: 20rem;
  margin: 0 auto;
  border-radius: 100%;
  background-size: cover;
  display: flex;
  color: white;
  justify-content: center;
  font-size: 0.8rem;
  align-items: center;
  position: relative;
  list-style: none;
}

.pieChart > li:nth-child(1) {
  position: absolute;
  top: 2rem;
  left: 12rem;
}
.pieChart > li:nth-child(2) {
  position: absolute;
  top: 7rem;
  left: 16rem;
}
.pieChart > li:nth-child(3) {
  position: absolute;
  top: 12rem;
  left: 16rem;
}
.pieChart > li:nth-child(4) {
  position: absolute;
  top: 17rem;
  left: 11.5rem;
}
.pieChart > li:nth-child(5) {
  position: absolute;
  top: 17rem;
  left: 5.5rem;
}
.pieChart > li:nth-child(6) {
  position: absolute;
  top: 12rem;
  left: 1.5rem;
}
.pieChart > li:nth-child(7) {
  position: absolute;
  top: 7rem;
  left: 1.5rem;
}
.pieChart > li:nth-child(8) {
  position: absolute;
  top: 2rem;
  left: 5.5rem;
}

.pieChart2 {
  background: radial-gradient(white 40%, transparent 41%),
    conic-gradient(
      rgb(0, 162, 255) 45deg,
      rgb(51, 2, 62) 45deg 90deg,
      rgb(0, 255, 38) 90deg 135deg,
      rgb(85, 128, 0) 135deg 180deg,
      rgb(218, 228, 79) 180deg 225deg,
      rgb(128, 36, 0) 225deg 270deg,
      rgb(128, 0, 96) 270deg 315deg,
      rgb(0, 107, 128) 315deg 360deg
    );
  height: 25rem;
  width: 25rem;
  margin: 0 auto;
  border-radius: 100%;
  background-size: cover;
  display: flex;
  color: white;
  justify-content: center;
  align-items: center;
  position: relative;
  list-style: none;
}

.pieChart2 > li:nth-child(1) {
  position: absolute;
  top: 2rem;
  left: 14rem;
}
.pieChart2 > li:nth-child(2) {
  position: absolute;
  top: 8rem;
  left: 20rem;
}
.pieChart2 > li:nth-child(3) {
  position: absolute;
  top: 15rem;
  left: 20rem;
}
.pieChart2 > li:nth-child(4) {
  position: absolute;
  top: 21rem;
  left: 15rem;
}
.pieChart2 > li:nth-child(5) {
  position: absolute;
  top: 21rem;
  left: 8rem;
}
.pieChart2 > li:nth-child(6) {
  position: absolute;
  top: 15rem;
  left: 3rem;
}
.pieChart2 > li:nth-child(7) {
  position: absolute;
  top: 8rem;
  left: 3rem;
}
.pieChart2 > li:nth-child(8) {
  position: absolute;
  top: 2rem;
  left: 9rem;
}

.container {
  /* float: left; */
  display: inline-block;
  margin: 10px;
}

.donut {
  width: 300px;
  height: 300px;
  background: radial-gradient(white 40%, transparent 41%),
    conic-gradient(
      rgb(0, 162, 255) 45deg,
      rgb(51, 2, 62) 45deg 90deg,
      rgb(0, 255, 38) 90deg 135deg,
      rgb(85, 128, 0) 135deg 180deg,
      rgb(218, 228, 79) 180deg 225deg,
      rgb(128, 36, 0) 225deg 270deg,
      rgb(128, 0, 96) 270deg 315deg,
      rgb(0, 107, 128) 315deg 360deg
    );
  margin: 10px;
  display: inline-block;
  border-radius: 50%;
}

.pieFig {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.pieFig figcaption {
  font-size: smaller;
  text-align: start;
}

.pieFig span:after {
  display: inline-block;
  content: "";
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.4em;
  margin-right: 1rem;
  height: 0.8em;
  border-radius: 0.2em;
  background: currentColor;
}