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

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

.pieChart {
  background: radial-gradient(white 15%, transparent 15%),
    conic-gradient(#4e79a7 180deg, #f28e2c 180deg 180deg);
  height: 14rem;
  width: 12rem;
  margin: 0 auto;
  border-radius: 100%;
  background-size: cover;
  display: flex;
  color: black;
  justify-content: center;
  font-size: 0.8rem;
  align-items: center;
  position: relative;
  list-style: none;
}

.pieChart > li:nth-child(1) {
  position: absolute;
  top: 6.5rem;
  left: 11rem;
}
.pieChart > li:nth-child(2) {
  position: absolute;
  top: 6.5rem;
  left: 2rem;
}

.pieChart2 {
  background: radial-gradient(white 50%, transparent 50%),
    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: 14rem;
  width: 12rem;
  margin: 0 auto;
  border-radius: 100%;
  background-size: cover;
  display: flex;
  color: white;
  font-size: 0.7rem;
  justify-content: center;
  align-items: center;
  position: relative;
  list-style: none;
}

.pieChart2 > li:nth-child(1) {
  position: absolute;
  top: 1rem;
  left: 8rem;
}
.pieChart2 > li:nth-child(2) {
  position: absolute;
  top: 4rem;
  left: 12rem;
}
.pieChart2 > li:nth-child(3) {
  position: absolute;
  top: 8.5rem;
  left: 11.5rem;
}
.pieChart2 > li:nth-child(4) {
  position: absolute;
  top: 12rem;
  left: 8rem;
}
.pieChart2 > li:nth-child(5) {
  position: absolute;
  top: 12rem;
  left: 4rem;
}
.pieChart2 > li:nth-child(6) {
  position: absolute;
  top: 8.5rem;
  left: 1rem;
}
.pieChart2 > li:nth-child(7) {
  position: absolute;
  top: 4rem;
  left: 1rem;
}
.pieChart2 > li:nth-child(8) {
  position: absolute;
  top: 1rem;
  left: 4.5rem;
}

.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: 1rem;
}

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

.pieFig span:after {
  display: inline-block;
  content: "";
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.4em;
  margin-right: 0.3rem;
  border-radius: 100%;
  background: currentColor;
}

.donut-h2 {
  color: rgba(8, 97, 175, 4);
}