@font-face {
  font-family: "HankenGrotesk";
  src: url("../assets/fonts/HankenGrotesk-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}
@font-face {
  font-family: "HankenGrotesk";
  src: url("../assets/fonts/static/HankenGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "HankenGrotesk";
  src: url("../assets/fonts/static/HankenGrotesk-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "HankenGrotesk";
  src: url("../assets/fonts/static/HankenGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "HankenGrotesk", sans-serif;
  font-weight: 500;
  font-size: 18px;
  background-color: hsl(221, 100%, 96%);
  color: lightgrey;
  min-height: 100vh;
  display: grid;
  place-content: center;
}

label {
  color: grey;
}

.label-highlight {
  color: hsl(224, 30%, 27%);
  font-weight: 700;
}

.card {
  border-radius: 2rem;
  max-width: 700px;
}

.card-summary-take,
.card-summary-comment {
  font-size: 3rem;
  font-weight: 700;
}

.card-summary {
  background: linear-gradient(to bottom, hsl(252, 100%, 67%), hsl(241, 81%, 54%));
  border-radius: 2rem;
  padding: 2.7rem;
  gap: 2.4rem;
}

@media (max-width: 601px) {
  .card-summary {
    padding-right: 5rem;
    padding-left: 5rem;
    border-top-left-radius: 0rem;
    border-top-right-radius: 0rem;
    gap: 1.2rem;
  }
}
.card-summary-grade {
  background: linear-gradient(to bottom, hsl(256, 72%, 46%), hsla(241, 72%, 46%, 0));
  line-height: 1.2;
  width: 20vw;
  max-width: 150px;
  aspect-ratio: 1/1;
}

.card-content {
  padding: 2.2rem;
}
.card-content div {
  font-weight: 600;
}

.card-title {
  color: hsl(224, 30%, 27%);
  font-weight: 800;
}

.label-reaction {
  background-color: rgba(255, 87, 87, 0.05);
  border-radius: 0.5rem;
}
.label-reaction div {
  color: hsl(0, 100%, 67%);
}

.label-memory {
  background-color: hsla(39, 100%, 56%, 0.05);
  border-radius: 0.5rem;
}
.label-memory div {
  color: hsl(39, 100%, 56%);
}

.label-verbal {
  background-color: hsla(166, 100%, 37%, 0.05);
  border-radius: 0.5rem;
}
.label-verbal div {
  color: hsl(166, 100%, 37%);
}

.label-visual {
  background-color: hsla(234, 85%, 45%, 0.05);
  border-radius: 0.5rem;
}
.label-visual div {
  color: hsl(234, 85%, 45%);
}

.continue-btn {
  background-color: hsl(224, 30%, 27%);
  font-size: 1.2rem;
  font-weight: 700;
}
.continue-btn:hover {
  background: linear-gradient(to bottom, hsl(252, 100%, 67%), hsl(241, 81%, 54%));
}

.attribution {
  font-size: 11px;
  text-align: center;
  margin-top: 1rem;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}/*# sourceMappingURL=main.css.map */