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

ul {
  list-style: none;
}

:root {
  --fs-0: 1.6rem;
  --fs-1: 1.8rem;
  --fs-2: 2.4rem;
  --fs-3: 5.8rem;
  --fs-4: 7.5rem;

  --fs-summary: 2rem;

  --s-1: 1.2rem;
  --s-2: 2.4rem;
  --s-3: 3.0rem;
  --s-4: 3.6rem;
  --s-5: 4.5rem;

  --s-detail: 2rem;
  --s-summary-button: 2rem;

  --br-0: 1rem;
  --br-1: 2rem;
  --br-2: 3.5rem;
}

@media only screen and (min-width: 992px) {
  :root {
    --fs-0: 2rem;
    --fs-1: 2rem;
    --fs-2: 3.4rem;
    --fs-3: 5.8rem;

    --s-5: 5.5rem;
  }
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Hanken Grotesk", sans-serif;
  background-color: hsl(221, 100%, 96%);
}

main {
  text-align: center;
  background-color: #fff;
}

@media screen and (min-width: 992px) {
  body {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
  }

  main {
    display: flex;
    border-radius: var(--br-1);
    max-width: 736px;
  }

  main > * {
    flex: 1;
    min-width: 0;
  }
}

/* RESULT */

.result {
  background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));
  color: white;
  padding: var(--s-5);
  padding-top: var(--s-3);
  padding-bottom: var(--s-5);
  border-bottom-left-radius: var(--br-2);
  border-bottom-right-radius: var(--br-2);
}

.result > * + * {
  margin-top: var(--s-1);
}

.result h1 {
  font-size: var(--fs-1);
  margin-bottom: var(--s-2);
}

.result h2 {
  font-size: var(--fs-2);
  margin-top: var(--s-2);
}

.result p {
  font-size: var(--fs-0);
}

.result .score {
  width: 140px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#4121CA, #2421CA30);
}

.result .score .scored {
  font-size: var(--fs-3);
  line-height: 1;
  font-weight: bolder;
}

.result .score .out-of {
  font-size: var(--fs-1);
  opacity: 0.4;
}

.result .explanation {
    opacity: 0.8;
}

@media only screen and (min-width: 992px) {
  .result {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-radius: var(--br-2);
    padding: var(--s-5);
    padding-top: var(--s-4);
  }

  .result > * + * {
    margin-top: var(--s-1);
  }
  
  .result > h1 {
    font-size: var(--fs-summary);
  }

  .result .score {
    width: 206px;
  }

  .result .score .scored {
    font-size: var(--fs-4);
  }

  .result .explanation {
    font-size: var(--fs-0);
  }
}

/* SUMMARY */

.summary {
  padding: var(--s-2);
  padding-inline: var(--s-4);
}

.summary > * + * {
  margin-top: var(--s-2);
}

.summary h2 {
  text-align: left;
  font-size: var(--fs-summary);
}

/* .details-list {
  padding: var(--s-1);
} */

.details-list > * + * {
  margin-top: var(--s-detail);
}

.details-list .detail {
  background-color: hsla(12, 20%, 95%, 0.514);
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-1);
  padding: var(--s-detail);
  border-radius: var(--br-0);
}

.summary button {
  width: 100%;
  padding: var(--s-summary-button);
  border-radius: var(--br-2);
  background-color: hsl(233, 39%, 22%);
  color: white;
  font-weight: bold;
  font-size: var(--fs-1);
}

@media only screen and (min-width: 992px) {
  :root {
    --fs-summary: 2.5rem;
  }

  .summary {
    padding: var(--s-4);
    
    padding-top: var(--s-4);
  }

  .summary > * + * {
    margin-top: var(--s-3);
  }

  .summary .details-list > * + * {
    margin-top: var(--s-1)
  }
}

/* UTILITY CLASSES */

.red {
  color: hsl(0, 100%, 67%);
}

.yellow {
  color: hsl(39, 100%, 56%);
}

.green {
  color: hsl(166, 100%, 37%);
}

.blue {
  color: hsl(234, 85%, 45%);
}

.icon {
  width: var(--fs-1);
  height: var(--fs-1);
}