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

@font-face {
  font-family: "HankenGrotesk-ExtraBold";
  src: url("./assets/fonts/static/HankenGrotesk-ExtraBold.ttf")
    format("truetype");
}

@font-face {
  font-family: "HankenGrotesk-Medium";
  src: url("./assets/fonts/static/HankenGrotesk-Medium.ttf") format("truetype");
}

* {
  margin: 0%;
  padding: 0%;
  font-family: "HankenGrotesk-Medium";
  text-align: center;
}

#container {
  background-color: white;
  border-radius: 20px;
  margin-inline: auto;
  margin-top: 5%;
  margin-bottom: 5%;
  text-align: center;
  box-shadow: 0 0 10px hsl(224, 30%, 27%);
}

#result-container {
  background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));
  border-radius: 20px;
  padding-top: 5%;
  padding-bottom: 5%;
}

#result-heading {
  font-family: "HankenGrotesk-ExtraBold";
  color: hsl(241, 100%, 89%);
  font-size: 20px;
}

#result-score-circle {
  background: linear-gradient(hsla(256, 72%, 46%, 1), hsla(241, 72%, 46%, 0));
  border-radius: 50%;
  width: 200px;
  height: 200px;
  margin-inline: auto;
  margin-top: 30px;
  margin-bottom: 30px;
}

#score {
  font-family: "HankenGrotesk-ExtraBold";
  color: white;
  font-size: 72px;
  padding-top: 20%;
}

#total {
  font-family: "HankenGrotesk-Medium";
  color: hsl(241, 100%, 89%);
}

#greeting {
  font-family: "HankenGrotesk-Bold";
  color: white;
  font-size: 30px;
  padding-bottom: 15px;
}

#comment {
  font-family: "HankenGrotesk-Medium";
  color: hsl(241, 100%, 89%);
  font-size: 14px;
  padding-inline: 20%;
}

#summary-container {
  background-color: white;
  border-radius: 20px;
  padding-top: 5%;
  padding-bottom: 10%;
}

#summary-heading {
  margin-left: 10%;
  font-family: "HankenGrotesk-Bold";
  text-align: left;
  font-size: 20px;
}

.tabs {
  display: flex;
  margin-inline: 10%;
  margin-top: 5%;
  margin-bottom: 5%;
  border-radius: 10px;
  padding-top: 5%;
  padding-bottom: 5%;
}

.tab-heading,
.tab-score,
.tab-total {
  font-family: "HankenGrotesk-Bold";
}

.tab-heading {
  width: 60%;
  text-align: left;
}

.score-tab-icons {
  padding-inline: 5%;
}

.tab-total {
  padding-left: 5%;
  color: hsl(220, 8%, 72%);
}

#reaction {
  background: hsla(0, 100%, 67%, 0.05);
}

#memory {
  background: hsla(39, 100%, 56%, 0.05);
}

#verbal {
  background: hsla(166, 100%, 37%, 0.05);
}

#visual {
  background: hsla(234, 85%, 45%, 0.05);
}

#btn {
  background: hsl(224, 30%, 27%);
  color: white;
  padding-top: 3%;
  padding-bottom: 3%;
  margin-top: 10%;
  margin-inline: 10%;
  border-radius: 30px;
}

#btn:hover {
  background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));
  cursor: pointer;
}

@media (min-width: 900px) {
  #container {
    width: 50%;
    display: flex;
  }

  #summary-container,
  #result-container {
    width: 50%;
  }

  .tab-heading {
    width: 40%;
  }

}

@media (min-width: 1100px){
    .tab-heading {
        width: 50%;
    }
}