body {
  background-color: lightblue;
  color: black;
  font: 14px sans-serif;
  text-align: center;
}

h1 {
  color: navy;
}

div {
  text-align: center;
}

.button {
  padding: 16px 32px;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.on {
  background-color: green;
  color: white;
  border: 2px solid green;
}

.on:hover {
  background-color: white; 
  color: black; 
  border: 2px solid green;
}


.off {
  background-color: red;
  color: white;
  border: 2px solid red;
}

.off:hover {
  background-color: white; 
  color: black; 
  border: 2px solid red;
}

table {
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
}

.table > tbody > tr > th {
  border-top: 1px solid black;
}

table, th, td {
  border: 1px solid black;
  text-align: center;
}

tr:nth-child(odd) {
  background-color: #86c5da;
}

th {
  background-color: #4ba9c8
}