.gauge {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ddd;
}

.gauge::before,
.gauge::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.gauge::before {
  background-color: #0f0;
  transform: rotate(135deg);
  transform-origin: center;
}

.gauge::after {
  background-color: #00008B; /* Update the color to dark blue */
  transform: rotate(45deg);
  transform-origin: center;
}

.gauge-score {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  background-color: #00008B; /* Update the color to dark blue */
  color: #fff; /* Add a text color */
}

.grade-percentage {
  width: 75%; /* Set the width to 75% */
}

.grade-percentage {
  background-color: #000099; /* Update the color to dark blue */
  color: #fff; /* Add a text color */
}