/** Adding Fonts**/
@font face{
  font-family:"HankenGrotesk-Bold";
  src: url(HankenGrotesk-Bold)
  format:("truetonefont");
}

@font face{
  font-family:"HankenGrotesk-ExtraBold";
  src: url(HankenGrotesk-ExtraBold)
  format:("truetonefont");
}

@font face{
  font-family:"HankenGrotesk-Medium";
  src: url(HankenGrotesk-Medium)
  format:("truetonefont");
}


/** Universal **/ 
*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

/** Main Container **/
.mc{
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: hsl(221, 100%, 96%);
}
/** Result Section**/
.result{
  padding: 20px;
  min-height: 30vh;
  border-radius: 25px;
  width: 90%;
  max-width: 700px;
  background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.name{
  text-align: center;
  margin-bottom: 20px;
  font-size: 0.85rem;
  color: hsl(221, 100%, 96%);
}

/** Sroce Section**/
.score{
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background: linear-gradient(hsla(256, 72%, 46%, 1), hsla(241, 72%, 46%, 0));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.score p{
  font-size: 2rem;
  font-family: Comic Sans MS;
  font-weight: 800;
  color: white;
}
.score span{
  color: hsl(221, 100%, 96%);
  font-size: 0.6rem;
}

/** Comment Section **/
.comment{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.comment p{
  font-size: 2rem;
  font-family: Comic Sans MS;
  font-weight: 800;
  color: white;
}

pre{
  font-family: Georgia;
  color: hsl(221, 100%, 96%);
}


/** Summary **/
.summary{
  padding: 20px;
  width: 90%;
  max-width: 700px;
  border-radius: 25px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.context p{
  font-size: 1.5rem;
  color: hsl(241, 100%, 75%);
  font-weight: 700;
}

/** Points **/
.points{
height: 60px;
padding: 10px;
border-radius: 10px;
width: 90%;
display: flex;
margin: 10px;
align-items: center;
justify-content: space-around;
background-color: grey;
}

.R{
  background-color:  hsla(0, 100%, 67%, 0.1);
  font-size: 1.2rem;
  font-weight: 600;
  color: hsl(0, 100%, 67%);
}

.Y{
  background-color:  hsla(39, 100%, 56%, 0.1);
  font-size: 1.2rem;
  font-weight: 600;
  color: hsl(39, 100%, 56%);
}

.G{
  background-color:  hsla(166, 100%, 37%, 0.1);
  font-size: 1.2rem;
  font-weight: 600;
  color: hsl(166, 100%, 37%);
}

.B{
  background-color:  hsla(234, 85%, 45%, 0.1);
  font-size: 1.2rem;
  font-weight: 600;
  color: hsl(234, 85%, 45%);
}


/** Button Section **/
.con{
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.con button{
  border: transparent;
  color: white;
  background-color: hsl(224, 30%, 27%);
  font-size: 1.5rem;
  height: 50px;
  width: 330px;
  border-radius: 50px;
  font-weight: 700;
  transition: background 0.3 ease;
}
.con button:hover{
  background-color: hsl(252, 100%, 67%);
}