body{
  text-align: center;
  font-family: sans-serif;
}
h2{
  text-transform: uppercase;
  margin: 4rem 0 2rem 0;
}







// HERE !

input[type="checkbox"]{
  display: none;
}
input[type="checkbox"]+label{
  transition: all 300ms ease;
  font-size: 2rem;
  cursor: pointer;
  border-radius: 0.3rem;
  background-color: #ecf0f1;
  padding: 0.5rem 1rem;
  display: inline-block;
  
  // Suggested by @zizzo to prevent text selection
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  // ------------------------
  
  i{
    color: #bdc3c7;
  }
}
input[type="checkbox"]:checked+label{
  transition: all 300ms ease;
  background-color: #2ecc71;
  
  i{
    color: white;
    animation: check 1s;
  }
}


#myCheckbox2{
  display: inline;
}