body{
  font-family: Calibri, sans-serif;
}
/* label style */
.key-wrap label{
  display: inline-block;
  border: 1px solid black;
  width: 25px;
  text-align: center;
  padding: 5px 5px;
  cursor: pointer;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 1px;
  visibility: hidden;
}
input[type="radio"]{
  display: none;
}

/* the texts displayed below */
.text{
  display: none;
  margin-left: 5px;
  position: absolute;
  margin-top: 20px;
  font-size: 18px;
  padding-bottom: 3px;
  padding-top: 3px;
  border-bottom: 5px solid ;
  border-top: 5px solid ;
}

.key-wrap label:active{opacity: .5}
 
.score0-key:checked ~ .score0-text, .score1-key:checked ~ .score1-text, .score2-key:checked ~ .score2-text, 
.score3-key:checked ~ .score3-text, .score4-key:checked ~ .score4-text, .score5-key:checked ~ .score5-text, 
.score6-key:checked ~ .score6-text, .score7-key:checked ~ .score7-text, .score8-key:checked ~ .score8-text, 
.score9-key:checked ~ .score9-text, .score10-key:checked ~ .score10-text, .score11-key:checked ~ .score11-text, 
.score12-key:checked ~ .score12-text, .score13-key:checked ~ .score13-text, .score14-key:checked ~ .score14-text, 
.score15-key:checked ~ .score15-text, .score16-key:checked ~ .score16-text
{
display: block;
}

.score0-text{border-color: white}
.score1-text{border-color: black}
.score2-text{border-color: lightgreen}
.score3-text{border-color: tan}
.score4-text{border-color: lightskyblue}
.score5-text{border-color: purple}
.score6-text{border-color: green}
.score7-text{border-color: yellow}
.score8-text{border-color: red}
.score9-text{border-color: blue}
.score10-text{border-color: orange}
.score11-text{border-color: brown}
.score12-text{border-color: pink}
.score13-text{border-color: lightyellow}
.score14-text{border-color: lavender}
.score15-text{border-color: wheat}
.score16-text{border-color: gray}

/* animation styles */
@keyframes pie-size {
  from{width:0px}
  to{
    margin-top: 5px;
    width: 360px;
    height: 360px;
  }
}

@keyframes display-key {
  from{visibility: hidden}
  to{visibility: visible}
}