html {
  font-family: "Hanken Grotesk";
}

.attribution {
  margin-top: 60px;
  font-size: 11px;
  text-align: center;
}
.attribution a {
  color: hsl(228, 45%, 44%);
}

.row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  align-content: center;
  align-items: baseline;
}

.col-3 {
  width: 25%;
}

.col-6 {
  width: 50%;
}

.col-12 {
  width: 100%;
}

.main-content {
  width: 50%;
  margin: 10% 25%;
  border-radius: 25px;
  box-shadow: 5px 15px 20px 10px hsl(221, 100%, 96%);
  font-size: 1rem;
}
.main-content p {
  display: inline;
  font-weight: 500;
}
.main-content .left-content {
  padding-bottom: 3%;
  background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));
  border-radius: 25px;
  color: hsl(241, 100%, 89%);
}
.main-content .left-content h1 {
  padding: 5% 5% 0;
}
.main-content .left-content .circle {
  border-radius: 50%;
  background: linear-gradient(hsl(256, 72%, 46%), hsla(241, 72%, 46%, 0));
  width: 50%;
  margin: 0 25% 5%;
  aspect-ratio: 2/1;
  padding: 12.5% 0;
}
.main-content .left-content .circle .large-text {
  color: hsl(0, 0%, 100%);
  font-size: 4rem;
  font-weight: 800;
}
.main-content .left-content .below-circle h1 {
  color: hsl(0, 0%, 100%);
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  padding: 0;
}
.main-content .left-content .below-circle p {
  margin: 0 20% 5%;
  padding: 5%;
  display: inline-block;
  font-size: 18px;
}
.main-content .right-content {
  width: 70%;
  margin: 4% 15%;
}
.main-content .right-content p {
  font-size: 18px;
}
.main-content .right-content h1 {
  text-align: left;
}
.main-content .right-content .reaction {
  display: flexbox;
  background: hsla(0, 100%, 67%, 0.07);
  color: hsl(0, 100%, 67%);
  text-align: left;
  border-radius: 10px;
  margin: 4% 0;
  padding: 5% 0;
}
.main-content .right-content .reaction p {
  vertical-align: middle;
  padding-left: 10%;
}
.main-content .right-content .reaction img {
  padding: 4px;
  align-items: center;
  vertical-align: middle;
}
.main-content .right-content .reaction .result-total {
  text-align: right;
}
.main-content .right-content .reaction .result-total .result {
  color: hsl(224, 30%, 27%);
}
.main-content .right-content .reaction .result-total .total {
  color: hsla(224, 30%, 27%, 0.5);
  padding-right: 10%;
}
.main-content .right-content .memory {
  display: flexbox;
  background: hsla(39, 100%, 56%, 0.07);
  color: hsl(39, 100%, 56%);
  text-align: left;
  border-radius: 10px;
  margin: 4% 0;
  padding: 5% 0;
}
.main-content .right-content .memory p {
  vertical-align: middle;
  padding-left: 10%;
}
.main-content .right-content .memory img {
  padding: 4px;
  align-items: center;
  vertical-align: middle;
}
.main-content .right-content .memory .result-total {
  text-align: right;
}
.main-content .right-content .memory .result-total .result {
  color: hsl(224, 30%, 27%);
}
.main-content .right-content .memory .result-total .total {
  color: hsla(224, 30%, 27%, 0.5);
  padding-right: 10%;
}
.main-content .right-content .verbal {
  display: flexbox;
  background: hsla(166, 100%, 37%, 0.07);
  color: hsl(166, 100%, 37%);
  text-align: left;
  border-radius: 10px;
  margin: 4% 0;
  padding: 5% 0;
}
.main-content .right-content .verbal p {
  vertical-align: middle;
  padding-left: 10%;
}
.main-content .right-content .verbal img {
  padding: 4px;
  align-items: center;
  vertical-align: middle;
}
.main-content .right-content .verbal .result-total {
  text-align: right;
}
.main-content .right-content .verbal .result-total .result {
  color: hsl(224, 30%, 27%);
}
.main-content .right-content .verbal .result-total .total {
  color: hsla(224, 30%, 27%, 0.5);
  padding-right: 10%;
}
.main-content .right-content .visual {
  display: flexbox;
  background: hsla(234, 85%, 45%, 0.07);
  color: hsl(234, 85%, 45%);
  text-align: left;
  border-radius: 10px;
  margin: 4% 0;
  padding: 5% 0;
}
.main-content .right-content .visual p {
  vertical-align: middle;
  padding-left: 10%;
}
.main-content .right-content .visual img {
  padding: 4px;
  align-items: center;
  vertical-align: middle;
}
.main-content .right-content .visual .result-total {
  text-align: right;
}
.main-content .right-content .visual .result-total .result {
  color: hsl(224, 30%, 27%);
}
.main-content .right-content .visual .result-total .total {
  color: hsla(224, 30%, 27%, 0.5);
  padding-right: 10%;
}
.main-content .right-content button {
  background: hsl(224, 30%, 27%);
  border-style: none;
  margin-top: 8%;
  width: 100%;
  border-radius: 50px;
  padding: 5%;
  color: hsl(0, 0%, 100%);
  font-size: 18px;
  font-weight: 700;
}
.main-content .right-content button:hover {
  cursor: pointer;
  background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));
}

@media screen and (max-width: 1500px) {
  .main-content {
    width: 75%;
    margin: 6% 12.5%;
  }
}
@media screen and (max-width: 700px) {
  body {
    margin: 0;
  }
  .col-6 {
    width: 100%;
  }
  .main-content {
    width: 100%;
    margin: 0;
    box-shadow: none;
  }
  .main-content .left-content {
    margin-top: -25px;
    padding-top: 10%;
  }
  .main-content .right-content h1 {
    margin-top: 5%;
  }
  .main-content .right-content .col-6 {
    width: 50%;
  }
}/*# sourceMappingURL=styles.css.map */