.medium-img {
    max-width: 122px;
    max-height: 122px;
}

h1 {
    text-align: center;
    color: #d4d4d4;
  }
  
  .rings {
    display: flex;
    flex-direction: row;
    margin-left: 490px;
  }
  
  .percent1, .percent2, svg, circle {
    width: 200px;
    height: 200px;
  }
  
  circle {
    position: absolute;
    fill: none;
    stroke-width: 10;
    transform: translate(10px, 10px);
    stroke-dasharray: 440;
    stroke-linecap: round;
  }
  
  circle:nth-child(1) {
    stroke-dashoffset: 0;
    stroke: #424242;
  }
  
  .success-challenge circle:nth-child(2) {
    stroke-dashoffset: calc(440 - (440 * 75) / 100);
    stroke: gold;
    animation: percent 1.5s linear;
    animation-delay: 1s;
  }
  
  .failure-challenge circle:nth-child(2) {
    stroke-dashoffset: calc(440 - (440 * 33) / 100);
    stroke: salmon;
    animation: percent 1.8s linear;
    animation-delay: 1.2s;
  }
  
  .number {
    position: relative;
    bottom: 190px;
    right: -50px;
    color: #fff;
  }
  
  h2 {
    font-size: 48px;
  }
  
  span {
    font-size: 24px;
    opacity: .7;
  }
  
  .percent1 span {
    color: gold;
  }
  
  .percent2 span {
    color: salmon;
  }
  
  @keyframes percent {
    0% {
      stroke-dashoffset: 0;
      stroke-width: 0;
    }
  }