/* General body styling */
body {
  position: relative; /* Ensures the body is positioned relative to its normal flow */
  display: flex; /* Enables flexbox layout */
  justify-content: center; /* Centers content horizontally */
  min-height: 100vh; /* Ensures the body takes up at least the full viewport height */
  font-family: "Hanken Grotesk", sans-serif;
  font-style: normal;
  line-height: normal;
  background: hsl(234, 71%, 97%);
  font-feature-settings: "liga" off, "clig" off;
}

/* Media query for screens with a width of up to 375px */
@media screen and (max-width: 23.4375rem) {
  body {
    min-height: 100%; /* Ensures the body takes up at least the full height of its parent container */
  }
}
.d-none {
  display: none;
}

.d-flex {
  display: flex;
}

button {
  border: none;
  background: none;
}
button:hover {
  cursor: pointer;
}

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
}

main.container {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}
main.container .score-card {
  border-radius: 0 0 2rem 2rem;
  background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 2rem;
  padding-block: 2rem;
  padding-inline: 3.59375rem;
}
main.container .score-card__title {
  color: hsl(241, 100%, 89%);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 130%;
}
main.container .score-card__circle {
  border-radius: 4.375rem;
  background: linear-gradient(180deg, #4d21c9 0%, rgba(37, 33, 201, 0) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 8.75rem;
  height: 8.75rem;
}
main.container .score-card__circle__score {
  color: #ffffff;
  font-weight: 800;
  font-size: 3.5rem;
  line-height: 100%;
}
main.container .score-card__circle__of {
  color: hsl(241, 100%, 89%);
  font-size: 1rem;
  font-weight: 700;
  line-height: 130%;
}
main.container .score-card__details {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 0.5rem;
}
main.container .score-card__details__great {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 130%;
}
main.container .score-card__details__info {
  color: hsl(241, 100%, 89%);
  font-size: 1rem;
  font-weight: 500;
  line-height: 130%;
}
main.container .score-summary {
  display: flex;
  flex-direction: column;
  padding-inline: 1.875rem;
  margin-bottom: 1.875rem;
  row-gap: 1.5rem;
}
main.container .score-summary__title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 130%;
}
main.container .score-summary__results {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
main.container .score-summary__results > .item {
  border-radius: 0.75rem;
  display: flex;
  justify-content: space-between;
  padding-inline: 1rem;
  padding-block: 1.09375rem;
}
main.container .score-summary__results > .item .img-category-wrapper {
  display: flex;
  column-gap: 1rem;
}
main.container .score-summary__results > .item .img-category-wrapper .result__category {
  font-size: 1rem;
  font-weight: 500;
  line-height: 130%;
}
main.container .score-summary__results > .item .result__score {
  color: hsl(224, 30%, 27%);
  font-size: 1rem;
  font-weight: 700;
  line-height: 130%;
}
main.container .score-summary__results > .item .result__score span {
  opacity: 0.5;
}
main.container .score-summary__results .reaction {
  background-color: hsl(0, 100%, 98%);
}
main.container .score-summary__results .reaction .img-category-wrapper .result__category {
  color: hsl(0, 100%, 67%);
}
main.container .score-summary__results .memory {
  background-color: hsl(38, 100%, 98%);
}
main.container .score-summary__results .memory .img-category-wrapper .result__category {
  color: hsl(39, 100%, 56%);
}
main.container .score-summary__results .verbal {
  background-color: hsl(166, 100%, 97%);
}
main.container .score-summary__results .verbal .img-category-wrapper .result__category {
  color: hsl(166, 100%, 37%);
}
main.container .score-summary__results .visual {
  background-color: hsl(234, 71%, 97%);
}
main.container .score-summary__results .visual .img-category-wrapper .result__category {
  color: hsl(234, 85%, 45%);
}
main.container .score-summary__button {
  border-radius: 8rem;
  background-color: hsl(224, 30%, 27%);
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 130%;
  padding-block: 0.96875rem;
}
main.container .score-summary__button:hover {
  background: linear-gradient(180deg, #75f 0%, #2f2ce9 100%);
  cursor: pointer;
}

@media screen and (min-width: 48rem) {
  main.container {
    border-radius: 2rem;
    box-shadow: 0 2.25rem 3.75rem 0 rgba(61, 108, 236, 0.15);
    align-self: center;
    justify-content: center;
    flex-direction: row;
    max-height: 32rem;
    max-width: 42.875rem;
  }
  main.container .score-card {
    border-radius: 2rem;
    padding-block: 2.78125rem;
    padding-inline: 4.3125rem;
    width: 21.125rem;
  }
  main.container .score-card__title {
    font-size: 1.5rem;
  }
  main.container .score-card__circle {
    border-radius: 100%;
    width: 12.5rem;
    height: 12.5rem;
  }
  main.container .score-card__circle__score {
    font-size: 4.5rem;
  }
  main.container .score-card__circle__of {
    font-size: 1.125rem;
  }
  main.container .score-card__details {
    row-gap: 1rem;
  }
  main.container .score-card__details__great {
    font-size: 2rem;
  }
  main.container .score-card__details__info {
    font-size: 1.125rem;
    text-align: center;
  }
  main.container .score-summary {
    padding-block: 2.78125rem;
    padding-inline: 2.46875rem;
    row-gap: 2rem;
    margin-bottom: 0;
    width: 21.75rem;
  }
  main.container .score-summary__title {
    font-size: 1.5rem;
  }
  main.container .score-summary__results > .item {
    padding-inline: 1rem;
    padding-block: 1.03125rem;
  }
  main.container .score-summary__results > .item .img-category-wrapper .result__category {
    font-size: 1.125rem;
  }
  main.container .score-summary__results > .item .result__score {
    font-size: 1.125rem;
  }
}
@media screen and (min-width: 64rem) {
  main.container {
    max-width: 46rem;
  }
  main.container .score-card {
    padding-inline: 3.8rem;
    width: 23rem;
  }
  main.container .score-summary {
    width: 23rem;
  }
}

/*# sourceMappingURL=styles.css.map */