backgammon.css

.main {
    height: 700px;
    width: 900px;
}

.board {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row;
}

.homeParent {
    width: 16.667%;
    height: 100%;
    background-color: silver;
    display: flex;
    flex-flow: column;
}

.home {
    width: 100%;
    height: 50%;
}

.halfboard {
    position: relative;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
}

.quarterboard {
    width: 100%;
    height: 50%;
    display: flex;
    flex-flow: row;
}

.hidden {
    display: none;
}

.bar {
    width: 16.667%;
    height: 100%;
    background-color: brown;
}

.point {
    width: 16.667%;
    height: 100%;
    display: flex;
    flex-flow: column-reverse;
    align-items: center;
}

.point.dark {
    background-image: url("point_bot_dark.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.point.light {
    /*background-color: blanchedalmond;*/
    color: green;
    fill: currentColor;
    background-image: url("point_bot_light.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.top>.point {
    transform: rotate(180deg);
}

.pip {
    background-repeat: no-repeat;
    background-position: center center;
    height: 45px;
    width: 45px;
}

.pip.black {
    background-image: url("pip_black.svg");
}

.pip.white {
    background-image: url("pip_white.svg");
}