Responsive page using flexbox and starting with mobile workflow first

Good effort, I took a look at your page and I have a few suggestions

• Avoid using % or vh for cards width and height. This will do more damage than good. For cards width and height use rem, em or px.
• Your css is kind of all over the place, it was a bit hard for me to figure out what was wrong with it. When writing css try to go from top to bottom, just like you structure your html.

I've made some changes in your css (see below)

## Lines with /**/ are the ones I modified
## Lines that are commented out can be removed

  body { /* right now you have it inside the media query, move it to here */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
  }

.container { /* this rule is new */
  width: 370px;
  height: auto;
}

.result-side {
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  background-image: linear-gradient(var(--lightslateblue) .1%, var(--lightroyalblue));
/*   height: 100%; */
  text-align: center;
  display: flex; /**/
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
}

#title {
  font-size: 1.063rem;
  font-weight: 600;
  color: var(--lightlavender);
/*   padding: 22px; */
}

#total-score {
/*   margin: auto; */
  color: var(--lightlavender);
  border-radius: 50%;
  width: 200px; /**/
  height: 200px;/**/
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-image: linear-gradient(to bottom, var(--violetblue), var(--persianblue));
  margin: 20px 0; /**/
}

#great {
  font-size: 1.375rem;
  color: var(--white);
  font-weight: 700;
/*   padding-top: 22px; */
/*   padding-bottom: 10px; */
}

#comment {
  font-size: 0.938rem;
  color: var(--lightlavender);
  font-weight: 500;
/*   padding: 0 50px 35px;   */
}

@media screen and (min-width: 650px) {
/*   body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
  } */
  
  .container {
    display: flex;
    width: 610px; /**/
/*     margin: 75px auto; */
    box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
    border-radius: 30px;
  }

  .result-side {
    border-radius: 35px;
    width: 110%;
  }

  #title {
    font-size: 1.375rem;
    font-weight: 600;
    padding: 30px;
  }

  #total-score {
    font-size: 1.25rem;
    font-weight: 600;
/*     border-radius: 50%; */
/*     max-width: 60%; */
/*     min-height: 28vh; */
  }

  #yourscore {
    font-size: 5rem;
  }

  #outof {
    font-size: 1.063rem;
  }

  #great {
    font-size: 1.875rem;
    padding-top: 25px;
    padding-bottom: 15px;
  }

  #comment {
    font-size: 1.063rem;  
  }

  .summary-side {
    font-size: 1.375rem;
    padding: 30px 35px;
  }

  .summary-side ul {
    font-size: 1.125rem;
    margin-top: 25px;
  }

  .summary-side ul li {
    margin-bottom: 20px;
  }

  .continue-button {
    margin-top: 20px;
    padding: 18px;
    font-size: 1.063rem;
    border-radius: 40px;
  }
}

Nice work; But I noticed that the Circle where you have the 76. Is more Oval than circle. That must be an error from your CSS sizing or border-radius.

You can utilize the deign guide dimensions sent to you by Frontend Mentor.