/* || Universal Styling */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 18px;
}

/* Colours */

:root {
  --White: #fff;
  --Black: #000;
  --Grey: #777;
  --Navy950: #303b59;
  --Navy200: #cac9ff;
  --Shadow: #a5a5c5;
  --Navy50: #ecf2ff;
  --Blue800: #1125d6;
  --Blue50: #f3f4fd;
  --Yellow400: #ffb21e;
  --Yellow50: #fffbf4;
  --Red400: #ff5555;
  --Red50: #fff6f6;
  --Green500: #00bb8f;
  --Green50: #f2fcf9;
  --Gradient1: linear-gradient(#4d21c9, hsla(241, 72%, 46%, 0));
  --Gradient2: linear-gradient(#7755ff, #2f2ce9);
}

/* Fonts */

@font-face {
  font-family: "Hanken Grotesk Bold";
  src: url(./assets/fonts/static/HankenGrotesk-Bold.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Hanken Grotesk Extra Bold";
  src: url(./assets/fonts/static/HankenGrotesk-ExtraBold.ttf) format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Hanken Grotesk Normal";
  src: url(./assets/fonts/static/HankenGrotesk-Medium.ttf) format("truetype");
  font-weight: 500;
  font-style: normal;
}

/* ... */

/* || Main Styles */

/* Mobile view */

main {
  width: 100%;
  height: 100vh;
}

.card {
  width: 100%;
  height: 100%;
}

.totals-section {
  width: 100%;
  height: auto;
  background-image: var(--Gradient2);
  border-bottom-right-radius: 2.5em;
  border-bottom-left-radius: 2.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2em 0;
}

.out-of,
.score-word,
h1,
h2 {
  font-family: "Hanken Grotesk Bold", sans-serif, serif;
}

h1 {
  font-size: 1.2em;
  color: var(--Navy200);
  margin-bottom: 1.5em;
}

.total-score {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: var(--Gradient1);
  margin-bottom: 1.2em;
}

.main-score {
  font-family: "Hanken Grotesk Extra Bold", sans-serif, serif;
  color: var(--White);
  font-size: 3.2em;
}

.out-of {
  color: var(--Navy200);
}

.score-word {
  font-size: 1.8em;
  color: var(--White);
  margin-bottom: 0.5em;
}

p,
.score-message {
  font-family: "Hanken Grotesk Normal", sans-serif, serif;
}

.score-message {
  color: var(--Navy200);
  font-size: 1.05em;
  width: 70%;
  text-align: center;
}

.summary-section {
  padding: 2em 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 1em;
}

.summary-section h2 {
  text-align: left;
  width: 100%;
  font-size: 1em;
}

.stats {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 2em;
  border-radius: 1em;
}

.topic {
  display: flex;
}

.topic img {
  margin-right: 1em;
}

.reaction {
  background-color: var(--Red50);
  color: var(--Red400);
}

.memory {
  background-color: var(--Yellow50);
  color: var(--Yellow400);
}

.verbal {
  background-color: var(--Green50);
  color: var(--Green500);
}

.visual {
  background-color: var(--Blue50);
  color: var(--Blue800);
  margin-bottom: 1em;
}

.actual-value {
  color: var(--Black);
}

.score-value {
  color: var(--Grey);
}

button {
  width: 100%;
  padding: 1.2em 1em;
  border-radius: 4em;
  border: none;
  background-color: var(--Navy950);
  color: var(--White);
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

button:hover {
  background-image: var(--Gradient2);
}

/* Tablet View */

@media screen and (min-width: 51.25em) {
  main {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--Navy50);
  }

  .card {
    max-width: 40em;
    max-height: 26em;
    display: flex;
    background-color: var(--White);
    box-shadow: 2em 2em 5em var(--Shadow);
    border-radius: 3em;
  }

  .totals-section {
    border-top-left-radius: 2em;
    border-top-right-radius: 2em;
  }

  .visual {
    margin-bottom: 0.2em;
  }

  button {
    padding: 0.8em;
  }
}

/* ... */