body{
  background-color: hsl(217, 54%, 11%);
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height:100vh;
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
}
h3{
color:white;
}
span,p{
  color:hsl(215, 51%, 70%);
}
hr{
  border-top:0;
  border-color: hsl(215, 32%, 27%);
}
.box{
  width:20%;
  background-color: hsl(216, 50%, 16%);
  padding:20px 20px 0 20px;
}
.equilibrium{
  width:100%;
  height:52%;
}
.avatar{
  width:10%;
  border:1px solid;
  border-radius:50%;
  border-color: white;
  margin-right: 15px;
}
.creation{
  padding:7px;
  margin-top: 3px;
}
.box, .equilibrium{
  border-radius: 10px;
}
.attribution { font-size: 11px; text-align: center; margin-top: 30px;}
.attribution a { color: hsl(228, 45%, 44%); }
#name{
  color:white;
}
#sen, #rate, #spacing{
vertical-align:super;
margin-right: 5px;
}
#rate{
  margin-right:80px;
  color:hsl(178, 100%, 50%);
}
h3:hover, #name:hover{
  color: hsl(178, 100%, 50%);
}
.equilibrium:hover{
  opacity: 0.3; 
}