* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* primary color for summary category */
  --reaction: hsl(0, 100%, 67%);
  --memory: hsl(39, 100%, 56%);
  --verbal: hsl(166, 100%, 37%);
  --visual: hsl(234, 85%, 45%);

  /* primary color for summary category */
  --bg-reaction: hsla(0, 100%, 67%, 0.05);
  --bg-memory: hsla(39, 100%, 56%, 0.05);
  --bg-verbal: hsla(166, 100%, 37%, 0.05);
  --bg-visual: hsla(234, 85%, 45%, 0.05);

  /* Neutral color for general use  */
  --textcolor-lg-and-card-bg: hsl(0, 0%, 100%);
  --textcolor-sm: hsl(241, 100%, 89%);
  --summary-text-btn: hsl(224, 30%, 27%);
  --body-bg: hsl(221, 100%, 96%);
  --text-color-mark: hsl(0, 1%, 72%);
  /* gradients */
  --bg-gradient-start: hsl(252, 100%, 67%);
  --bg-gradient-end: hsl(241, 81%, 54%);
  --circle-gradient-start: hsla(256, 72%, 46%, 1);
  --circle-gradient-end: hsla(241, 72%, 46%, 0);
}
body{  
  background: var(--body-bg);
  overflow-x: hidden;
}
main {
  width: 100vw;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 320px) {
  /* Card styles  */
  .card {
    width: 100vw;
    height: auto;
    background: var(--textcolor-lg-and-card-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  /* result section styles  */
  .result {
    width: 100%;
    height: auto;
    padding-inline: 30px;
    padding-block: 35px;
    background: linear-gradient(
      to bottom right,
      var(--bg-gradient-start),
      var(--bg-gradient-end)
    );
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 35px;
  }
  .result > p:first-child {
    color: var(--textcolor-sm);
    font-size: 23px;
  }
  .result > p:nth-child(3) {
    color: var(--textcolor-lg-and-card-bg);
    font-size: 30px;
  }
  .result > p:nth-child(4) {
    color: var(--textcolor-sm);
    text-align: center;
    padding-inline: 10px;
    line-height: 25px;
    font-size: 18px;
  }
  .circle {
    height: 185px;
    width: 185px;
    border-radius: 50%;
    background: linear-gradient(
      to bottom right,
      var(--circle-gradient-start),
      var(--circle-gradient-end)
    );
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
  }
  .circle h1 {
    font-size: 70px;
    color: var(--textcolor-lg-and-card-bg);
  }
  .circle p {
    color: var(--textcolor-sm);
  }

  /* Summary section styles  */
  .summary {
    width: 100%;
    height: auto;
    padding-block: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 25px;
  }
  .title {
    display: flex;
    width: 85%;
    justify-content: flex-start;
  }
  .title p {
    font-size: 23px;
    color: var(--summary-text-btn);
  }
  .rate {
    width: 85%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
  }
  .catagory {
    width: 100%;
    height: 80px;
    border-radius: 15px;
    padding-inline: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .catagory1 {
    background: var(--bg-reaction);
  }
  .catagory2 {
    background: var(--bg-memory);
  }
  .catagory3 {
    background: var(--bg-verbal);
  }
  .catagory4 {
    background: var(--bg-visual);
  }
  .cattype {
    width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
  }
  .icon {
    height: 30px;
  }
  .typename {
    font-size: 22px;
  }
  .typename1 {
    color: var(--reaction);
  }
  .typename2 {
    color: var(--memory);
  }
  .typename3 {
    color: var(--verbal);
  }
  .typename4 {
    color: var(--visual);
  }
  .mark {
    width: 40%;
  }
  .btn {
    width: 85%;
  }
  .continue {
    width: 100%;
    padding: 25px;
    border: none;
    border-radius: 50px;
    font-size: 23px;
    color: var(--textcolor-lg-and-card-bg);
    background: var(--summary-text-btn);
    cursor: pointer;
  }
  .continue:hover {
    background: linear-gradient(
      to bottom right,
      var(--bg-gradient-start),
      var(--bg-gradient-end)
    );
  }
  .mark {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .obtained {
    font-size: 23px;
    color: var(--summary-text-btn);
  }
  .total {
    font-size: 23px;
    color: var(--text-color-mark);
  }
}
@media screen and (min-width: 800px) {
    main{
        height: 100vh;
    }
  /* Card styles  */
  .card {
    width: 60vw;
    border-radius: 30px ;
  }

  /* result section styles  */
  .result {
    border-radius: 30px;
  }
}
@media screen and (min-width: 1000px) {
  /* Card styles  */
  .card {
    width: 800px;
    height: 500px;
    flex-direction: row;
  }

  /* result section styles  */
  .result {
    width: 50%;
    height:100%;
    padding-inline: 70px;
    gap: 45px;
  }
  .result > p:first-child {
    color: var(--textcolor-sm);
    font-size: 23px;
  }
  .result > p:nth-child(3) {
    color: var(--textcolor-lg-and-card-bg);
    font-size: 28px;
  }
  .result > p:nth-child(4) {
    color: var(--textcolor-sm);
    text-align: center;
    padding-inline: 5px;
    line-height: 30px;
    font-size: 18px;
  }
  .circle {
    height: 160px;
    width: 160px;
  }
  .circle h1 {
    font-size: 65px;
  }
  .circle p {
    font-size: 18px;
  }

  /* Summary section styles  */
  .summary {
    width: 50%;
    height: 100%;
    padding-block: 30px;
    gap: 25px;
  }
  
  .title p {
    font-size: 23px;
  }
  .rate {
    gap: 15px;
  }
  
  .catagory {
    height: 60px;
  }
  .cattype {
    width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
  }
  .icon{
    height: 25px;
  }
  .typename{
    font-size: 20px;
  }
  .continue {
    font-size: 18px;
    padding: 20px;
  }
  .obtained {
    font-size: 20px;
  }
  .total {
    font-size: 20px;
  }

}