body {
    font-family: "Dejavu Sans";
    background-color: 222252;
    color: #dddddd;
}


#playfield{
    float: left;
    left:10px;
    top:10px;
    margin: 20px;
}

#board{
    display: grid;
    margin: 10px;
    padding: 10px;
    background-color: #e2ac6c;
    grid-template-columns: repeat(9, auto);

}

.caps {
    width: 100%;
    height: 64px;
    border: 1px solid white;
}

.cell {
    float: left;
    height: 64px;
    width: 64px;
    display: table-cell;
    border: 1px solid black;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 50px;
    background-color: #e2ac6c;
}

#sidebar{
    padding: 20px;
    float:left;
}

.red{
    background-color: #e88;
}

.green {
    background-color: #1e1;
}

.blue {
    background-color: #88e;
}

.black.blue.green{
    background-color: #3ee;
}

.white.blue.green{
    background-color: #8ee;
}