body {
  background-color: #fff;
  color: #333;
  font-size:16px;
}
div.demo-container {
  font-family: sans-serif;
  background-color: #dfd;
  color: black;
  display: block;
  padding: 2em;
  width: 80%;
  height: 60px;
  margin: 1em;
}
input[type=checkbox] {
  margin-left: 2em;
  display: block;
	font-size:15px;
	line-height:15px;
}
input[type=checkbox]:after {
  content: attr(id) ": " attr(data-value) ";";
  font-family: monospace;
  color: #333;
  display: block;
  position: relative;
  width: 25em;
  left: 1.5em;
}
input[type=checkbox]#border:checked ~ div .button {border:0;}
input[type=checkbox]#border-radius:checked ~ div .button {border-radius:0.25rem;}
input[type=checkbox]#background:checked ~ div .button {background:#1E88E5;}
input[type=checkbox]#color:checked ~ div .button {color:white;}
input[type=checkbox]#font-family:checked ~ div .button {font-family:system-ui, sans-serif;}
input[type=checkbox]#font-size:checked ~ div .button {font-size:1rem;}
input[type=checkbox]#line-height:checked ~ div .button {line-height:1.2;}
input[type=checkbox]#white-space:checked ~ div .button {white-space:nowrap;}
input[type=checkbox]#text-decoration:checked ~ div .button {text-decoration:none;}
input[type=checkbox]#padding:checked ~ div .button {padding:0.25rem 0.5rem;}
input[type=checkbox]#margin:checked ~ div .button {margin:0.25rem;}
input[type=checkbox]#cursor:checked ~ div .button {cursor:pointer;}