body {
    text-align: center;
    font-family: sans-serif;
    background-color: hsl(39, 77%, 83%, 0.5)
}

#grid {
    margin: 1em auto;
    border-collapse: collapse;
}

    #grid td {
        border: 1px solid gray;
        padding: 0;
    }

    #grid input[type=checkbox] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        display: block;
        height: 20px;
        width: 20px;
        margin: 0;
        background: white;
    }

        #grid input[type=checkbox]:checked {
            background: black;
        }

    @keyframes birth {
        from {background: white;}
        50% {background: rgba(0, 128, 0, 0.5);}
        to {background: black;}
    }

    @keyframes death {
        from {background: black;}
        50% {background: rgba(128, 0, 0, 0.5);}
        to {background: white;}
    }

    #grid.animatable input[type=checkbox].changed {
        animation: death 500ms;
    }

        #grid.animatable input[type=checkbox].changed:checked {
            animation: birth 500ms;
        }

button,
.button {
    margin: auto 0.8em;
	padding: .4em .6em;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: .3em;
	box-shadow: 0 1px 0 hsla(0,0%,100%,.7) inset, 0 .15em .1em -.1em rgba(0,0,0,.3);
	background: linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,0)) hsl(211,80%,45%);
	outline: none;
	font: inherit;
	font-weight: bold;
	color: white;
	text-shadow: 0 -.05em .05em rgba(0,0,0,.3);
	cursor: pointer;
}

#checkbox-play {
    /* hides the element */
	position: absolute;
	clip-path: circle(0%);
}

button:enabled:active,
.button:active,
input[type="checkbox"]:checked + label.button {
	background-image: none;
	box-shadow: 0 .1em .3em rgba(0,0,0,.5) inset;
}

button:disabled {
	background-color: hsl(211,30%,35%);
	cursor: not-allowed;
}

h1 {
    margin-bottom: 1em;
}