body{
    background-color: rgb(0, 0, 0);
}

table{
    margin :100px auto;
    font-size: 10px;
}
td{ width: 50px;
    height: 50px;
    border: 2px solid black;
    text-align: center;
}
.blank{
    border: none;
    color: white;
}
.green{
    color: green;
    border-color: green;
}
.pink{
    color: pink;
    border-color: pink;
}
.red{
    color: red;
    border-color: red;
}
.yellow{
    color: yellow;
    border-color: yellow;
}
.orange{
    color: orange;
    border-color: orange;
}
.purple{
    color: purple;
    border-color: purple;
}
.p{
    font-size: 10px;
}
.lightblue{
    color: lightblue;
    border-color: lightblue;
}
.blue{
    color: rgb(109, 143, 199);
    border-color: rgb(109, 143, 199);
}
#green{
    color: rgb(35, 125, 71);
    border-color: rgb(35, 125, 71);
    
}
.cream{
    color: rgb(198, 195, 162);
    border-color: rgb(198, 195, 162);
}
.aqua{
    color: rgb(78, 198, 184);
    border-color: rgb(78, 198, 184);
}
#periodic{
    text-align: center;
    color: whitesmoke;
    margin: 50px auto;
    font-size: 70px;
    font-weight: bold;
    text-shadow: 2px 5px 0px rgba(187,180,180,0.91);
}
.green:hover{
    background-color: rgb(177, 239, 177);
    color: rgb(0, 0, 0);
}
.pink:hover{
    background-color: rgb(255, 235, 235);
    color: rgb(0, 0, 0);
}
.red:hover{
    background-color: rgb(202, 116, 116);
    color: white;
}
.yellow:hover{
    background-color: rgb(255, 255, 153);
    color: black;
}
.orange:hover{
    background-color: rgb(255, 204, 153);
    color: black;
}
.purple:hover{
    background-color: rgb(204, 153, 255);
    color: white;
}
.lightblue:hover{
    background-color: rgb(204, 255, 255);
    color: black;
}
.blue:hover{
    background-color: rgb(153, 204, 255);
    color: black;
}
.cream:hover{
    background-color: rgb(255, 255, 204);
    color: black;
}
.aqua:hover{
    background-color: rgb(204, 255, 255);
    color: black;
}
#green:hover{
    background-color: rgb(177, 239, 177);
    color: rgb(0, 0, 0);
}