@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,500;0,700;0,800;1,500;1,700;1,800&display=swap');

/*<<-----------------------SETTINGS FOR DESKTOP--------------------->>*/
body {
  font-family: 'Hanken Grotesk';
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}

.main-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.secondary-container {
  display: flex;
  margin-top: 20%;
  margin-bottom: 20%;
  width: 680px;
  height: 500px;
  background-color: white;
  border-radius: 40px;
  box-shadow: 10px 30px 40px 20px hsl(241, 81%, 54%, 0.1);
}

.container.a {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(hsla(252, 100%, 67%, 1), hsla(241, 81%, 54%, 1));
  border-radius: 40px;
  z-index: 2;
}

h2.result-heading {
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 35px 0;
  color: hsl(241, 100%, 89%);
}

.circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(hsla(256, 72%, 46%, 2), hsla(241, 72%, 46%, 0.1));
  width: 190px;
  height: 190px;
  border-radius: 50%;
}

.circle > .your-score {
  color: white;
  display: flex;
  flex: 2;
  flex-direction: column;
  justify-content: end;
  font-size: 70px;
  font-weight: 800;
}

.circle > .fraction {
  color: hsl(252, 100%, 67%);
  font-weight: 700;
  display: flex;
  flex: 1;
}

.comment{
  color: white;
  margin-top: 0px;
  margin-bottom: 0.5em;
  font-size: 30px;
  font-weight: 700;
}

.percent {
  color: hsl(241, 100%, 89%);
  width: 75%;
  font-size: 18px;
  text-align: center;
  margin-top: 0px;
}

.container.b {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: hsl(0, 0%, 100%);
  border-radius: 40px;
  z-index: 1;
}

h2.summary-heading {
  font-size: 24px;
  font-weight: 700;
  align-content: flex-start;
  color: black;
  width: 75%;
  margin: 0 0 20px 0;
}

.score-box {
  display: flex;
  flex-direction: row;
  flex: 0 1 2em;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 800;
  align-items: center ;
  margin-bottom: 1em;
  margin-top: 0;
  width: 70%;
  border-radius: 10px;
  border: none;
  padding: 10px;
}

.score-box.reaction {
  background-color: hsl(0, 100%, 67%, 0.1);
  color: hsl(0, 100%, 67%);
}

.score-box.memory {
  background-color: hsl(39, 100%, 56%, 0.1);
  color: hsl(39, 100%, 56%);
}
.score-box.verbal {
  background-color: hsl(166, 100%, 37%, 0.1);
  color: hsl(166, 100%, 37%);
}
.score-box.visual {
  background-color: hsl(232, 85%, 45%, 0.1);
  color: hsl(232, 85%, 45%);
}

.score-box .icon {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 3%;
  margin-right: 10px;
  margin-left: 5px;
}

.label {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 50%;
}

.score {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 10%;
}

.fraction {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 15%;
}

.score-box .fraction {
  color: gray;
}

.score-box .score {
  margin-right: 5px;
  color: black;
}

.btn-rounded {
  color: white;
  font-weight: 700;
  font-size: 15px;
  background-color: hsl(224, 30%, 27%);
  padding: 18px 20px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  width: 75%;
  margin-top: 20px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-rounded:hover {
  background-color: hsl(241, 72%, 46%);
}

/*<<-----------------------MEDIA QUERY SETTINGS FOR MOBILE DEVICE--------------------->>*/

@media (max-width: 375px) {

  .secondary-container {
    display: flex;
    flex-direction: column;
    align-content: space-between;
    margin: 0;
  }

  .container.a {
    margin-bottom: 20px;
    border-radius: 0 0 40px 40px;
    height: 400px;
  }

  h2.result-heading {
    font-size: 20px;
    margin: 20px 0;
  }

  .circle {
    width: 150px;
    height: 150px;
  }

  .circle > .your-score {
    font-size: 65px;
    font-weight: 700;
  }

  p.comment {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 16px;
  }

  p.percent {
    font-size: 16px;
    margin-bottom: 40px;
  }

  h2.summary-heading {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .score-box {
    font-size: 18px;
    font-weight: 700;
  }

  .score-box.visual {
    margin-bottom: 10px;
  }

  .btn-rounded {
    margin-bottom: 30px;
  }
}