:root {
  /* primary colors */
  --light-red: hsl(0, 100%, 67%);
  --orangey-yellow: hsl(39, 100%, 56%);
  --green-teal: hsl(166, 100%, 37%);
  --cobalt-blue: hsl(234, 85%, 45%);

  /* gradients */
  --gr-light-slate-blue: hsl(252, 100%, 67%);
  --gr-light-royal-blue: hsl(241, 81%, 54%);
  --gr-violet-blue: hsl(256, 72%, 46%, 1);
  --gr-persian-blue: hsla(241, 72%, 46%, 0);

  /* neutral colors */
  --white: hsl(0, 0%, 100%);
  --pale-blue: hsl(221, 100%, 96%);
  --light-lavender: hsl(241, 100%, 89%);
  --dark-gray-blue: hsl(224, 30%, 27%);

  /* background-colors */

  /* component background */
  /* gradients */
  --blue-gradient-background: linear-gradient(
    var(--gr-light-slate-blue),
    var(--gr-light-royal-blue)
  );
  --circle-gradient-background: linear-gradient(
    var(--gr-violet-blue),
    hsla(241, 72%, 46%, 0)
  );

  /* solid colors */
  --light-red-background: hsla(0, 100%, 67%, 0.059);
  --orangey-yellow-background: hsla(39, 100%, 56%, 0.059);
  --green-teal-background: hsla(166, 100%, 37%, 0.059);
  --cobalt-blue-background: hsla(234, 85%, 45%, 0.059);

  /* text colors */
  --light-text: hsla(0, 0%, 0%, 0.471);
  --attribution-a-text: hsl(228, 45%, 44%);

  /* page background */
  --desktop-background: #ecf2ff;
  --mobile-background: #f3f6fd;
  --desktop-foreground: #f8fafe;

  /* shadows */
  --container-shadow: 12px 12px 50px 3px hsla(244, 66%, 15%, 0.142);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Hanken Grotesk", sans-serif, Arial;
  background: var(--mobile-background);
}

.container {
  box-shadow: none;
}

.full-screen {
  height: 100%;
}

.contains {
  width: 100%;
}

.blue-section {
  color: white;
  text-align: center;
  padding: 0.3em min(4em, 20vw) 2em min(4em, 20vw);
  margin: 0;
  background: var(--blue-gradient-background);
  border-radius: 0 0 2rem 2rem;
}

.result-title {
  opacity: 0.7;
}

.hundred {
  font-size: clamp(0.92em, 1vw + 1em, 1.04em);
  opacity: 0.5;
  font-weight: 700;
}

.circle {
  margin: 1em auto;
  aspect-ratio: 1 / 1;
  width: min(60%, 12em);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 100%;
  background: var(--circle-gradient-background);
}

.number {
  font-size: 4em;
  font-weight: 800;
}

.great {
  font-size: clamp(1.7rem, 1vw + 1em, 1.8rem);
  font-weight: 700;
  padding: 0;
  opacity: 0.9;
}

.paragraph {
  font-size: 1.015em;
  font-weight: 500;
  opacity: 0.7;
  padding: 0.5em 0;
}

button {
  color: white;
  padding: 1em;
  border-radius: 100em;
  font-weight: 700;
  margin: 0 auto;
  border: none;
  width: 100%;
  font-size: 1em;
  cursor: pointer;
  background-color: var(--dark-gray-blue);
  transition: opacity 0.3s ease-in-out, outline ease 0.1s;
}

button:hover {
  background-color: var(--dark-gray-blue);
  opacity: 0.9;
}

button:active {
  background: var(--gr-light-royal-blue);
}

button:focus {
  outline: 3px solid var(--gr-light-royal-blue);
  outline-offset: 1px;
}

.center {
  background: transparent;
  padding: 0 2.1em;
}

.text-lg {
  font-weight: 700;
  padding: 1.4em 0 1em 0;
  font-size: clamp(1.2rem, 1vw + 1em, 1.4rem);
}

.text-accent {
  color: var(--dark-gray-blue);
}

.cards {
  padding: 0.9em 1em;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cards + .cards {
  margin: 1.3em 0 0 0;
}

.reaction {
  background-color: var(--light-red-background);
}

.memory {
  background-color: var(--orangey-yellow-background);
}

.verbal {
  background-color: var(--green-teal-background);
}

.visual {
  background-color: var(--cobalt-blue-background);
}

.stat-flex {
  display: flex;
  gap: 0.6em;
  font-weight: 700;
}

.red {
  color: var(--light-red);
}

.yellow {
  color: var(--orangey-yellow);
}

.green {
  color: var(--green-teal);
}

.blue {
  color: var(--cobalt-blue);
}

.light-text {
  color: var(--light-text);
  font-weight: 500;
}

.strong-text {
  color: black;
}

.button-area {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.6em 0;
  margin: 0.8em 0 1em 0;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.h-full {
  height: auto;
}

.attribution {
  font-size: 0.6875rem;
  text-align: center;
  background: none;
  margin: 0.5em;
}

.attribution a {
  color: var(--attribution-a-text);
}

@media (min-width: 43.75em) {
  body {
    background: var(--desktop-background);
  }

  .blue-section {
    border-radius: 2rem;
  }

  .circle {
    width: 80%;
  }

  .contains {
    width: 21.875em;
  }

  .full-screen {
    height: auto;
  }

  .container {
    background: var(--desktop-foreground);
    border-radius: 2rem;
    box-shadow: var(--container-shadow);
  }

  .h-full {
    min-height: 100vh;
  }

  .center {
    border-radius: 0 2rem 2rem 0;
  }

  .great {
    padding: 0.4em 0 0.2em 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
  }
}