td {
    width: 50px;
    height: 50px;
    text-align: center;
}

.td-clickable {
    /* intentionally left blank. This is used for events. */
}

.hydrogen {
    background-color: gray;
}

.nobel-gasses {
    background-color: cornflowerblue;
}

.alkali-metals {
    background-color: orange;
}

.alkaline-earth-metals {
    background-color: yellow;
}

.metalloids {
    background-color: greenyellow;
}

.non-metals {
    background-color: green;
}

.halogens {
    background-color: tan;
}

.poor-metals {
    background-color: aquamarine;
}

.transition-elements {
    background-color: blueviolet;
}

.lanthanoids {
    background-color: coral;
}

.actinoids {
    background-color: orchid;
}

.popup-quiz {
    outline: outset 5px navy;
    width: 200px;
    height: 150px;
    position: fixed;
    top: 40%;
    left: 40%;
    background: lightblue;
    padding: 3px
}

.error-field {
    background-color: red;
}

.less-padding {
    margin-top: 4px;
    margin-bottom: 12px;
}