body {
  width: 1440px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  font-family: "Hanken Grotesk", sans-serif;
  font-family: "Kodchasan", sans-serif;
  font-family: "Roboto", sans-serif;
}
.attribution {
  position: absolute;
  bottom: 0px;
  left: 720px;
}
.container {
  display: flex;
  flex-direction: row;
  border: 1px solid #ccc;
  border-radius: 30px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
.box-your-result {
  background-image: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));
  border-radius: 30px;
  width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}
.head-your-result {
  font-size: 20px;
  font-weight: 700;
  color: #c9c5ff;
}
.your-point {
  background-image: linear-gradient(
    hsla(256, 72%, 46%, 1),
    hsla(241, 72%, 46%, 0)
  );
  border-radius: 50%;
  width: 150px;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.point {
  font-weight: 800;
  font-size: 50px;
  color: #fffffd;
  margin: 0px;
  padding: 0px;
}
.point-text {
  font-weight: 700;
  font-size: 16px;
  color: #c9c5ff;
  margin: 0px;
  padding: 0px;
}
.rank {
  font-weight: 700;
  font-size: 20px;
  color: #c9c5ff;
  margin: 0px;
  padding: 0px;
}
.rank-text {
  font-weight: 500;
  font-size: 12px;
  color: #c9c5ff;
  margin: 0px;
  padding: 0px;
}
.box-summary {
  width: 300px;
  display: flex;
  flex-direction: column;
}
.head-summary {
  font-size: 20px;
  color: #353c52;
  padding: 30px 0px 10px 10px;
  margin: 0px;
}
.summary-reaction {
  display: flex;
  font-size: 700;
  color: hsl(0, 100%, 67%);
  background-color: hsl(0, 100%, 85%);
  flex-direction: row;
  justify-content: space-between;
  padding: 0px 10px;
  margin: 5px 10px;
  border-radius: 10px;
}
.summary-memory {
  display: flex;
  font-size: 700;
  color: hsl(39, 100%, 56%);
  background-color: hsl(39, 100%, 85%);
  flex-direction: row;
  justify-content: space-between;
  padding: 0px 10px;
  margin: 5px 10px;
  border-radius: 10px;
}
.summary-verbal {
  display: flex;
  font-size: 700;
  color: hsl(166, 100%, 37%);
  background-color: hsl(166, 100%, 85%);
  flex-direction: row;
  justify-content: space-between;
  padding: 0px 10px;
  margin: 5px 10px;
  border-radius: 10px;
}
.summary-visual {
  display: flex;
  font-size: 700;
  color: hsl(234, 85%, 45%);
  background-color: hsl(234, 85%, 85%);
  flex-direction: row;
  justify-content: space-between;
  padding: 0px 10px;
  margin: 5px 10px;
  border-radius: 10px;
}
.continue {
  font-size: 18px;
  color: white;
  background-color: hsl(224, 30%, 27%);
  padding: 15px 10px;
  margin: 40px 10px;
  border-radius: 100px;
  border: 0px;
}
.continue:hover {
  background-image: linear-gradient(
    hsla(256, 72%, 46%, 1),
    hsla(241, 72%, 46%, 0)
  );
}
@media only screen and (max-width: 600px) {
  .container {
    flex-direction: column;
  }
  body {
    width: 375px;
  }
}