html, body {
background: black;
}

table {
margin-left: auto;
margin-right: auto;
}

td.spacer {
height: 1em;
width: 1em;
}

td.spacer-two {
height: 1.65em;
}

td.noble-gas {
background: #0c9125;
color: white;
}

td.reactive-nonmetal {
background: #50b95a;
color: white;
}

td.metalloid {
background: #93e09d;
color: black;
}

td.post-transition-metal {
background: #c1f2ca;
color: black;
}

td.alkali-metal {
background: #492aa5;
color: white;
}

td.alkaline-earth-metal {
background: #7f66d0;
color: white;
}

td.unknown-chemical-properties {
background: #c3b0fb;
color: black;
}

td.actinide {
background: #f07406;
color: white;
}

td.lanthanide {
background: #f59f63;
color: white;
}

td.transition-metal {
background: #f6c9a0;
color: black;
}

td {
border: 1px solid black;
height: 3em;
width: 3.5em;
}

td:hover {
background-color: black;
}

td.metalloid:hover, td.post-transition-metal:hover, td.unknown-chemical-properties:hover, td.transition-metal:hover {
color: white;
}

h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: .5em;
line-height: 0;
}

h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.65em;
line-height: 0;
text-align: center;
}

h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: .5em;
line-height: 0;
text-align: center;
}