circle {
	r:5;
	fill: black;
	transition: r 0.5s linear, fill 0.5s linear; /* add this transition to original code */

}
#container {
	overflow:visible;
	margin-bottom: 50px;
}
body {
	margin: 20px 40px;
}
table, th, td {
	border: 1px solid black;
}
th, td {
	padding:10px;
	text-align: center;
}
/* add this css for the hover state */
circle:hover {
	r:10;
	fill: blue;
}
circle:active {
	fill: red;
}