.overscreen {
    padding: 50px;
    text-align: center;
}
.d-online-btn, .d-offline-btn {
    height: 120px;
    display: block;
    margin-top: 40px;
}
.d-offline-btn {
    background: url('images/iconfinder.png') no-repeat center top;
}
.d-online-btn {
    background: url('images/iconfinder2.png') no-repeat center top;
}
.d-online-btn:hover, .d-offline-btn:hover {
    text-decoration: underline;
}

.color a {
    margin-top: 64px;
    padding-top: 95px;
}

.color a[data-color="W"] {
    background: url('images/W_pawn.png') no-repeat center top;
}
.color a[data-color="B"] {
    background: url('images/B_pawn.png') no-repeat center top;
}
.color a[data-color="U"] {
    background: url('images/dice.png') no-repeat center top;
}

.chessboard div {
    position: relative;
}
.chessboard div[data-y="7"][data-x="0"]:before,
.chessboard div[data-y="7"][data-x="1"]:before,
.chessboard div[data-y="7"][data-x="2"]:before,
.chessboard div[data-y="7"][data-x="3"]:before,
.chessboard div[data-y="7"][data-x="4"]:before,
.chessboard div[data-y="7"][data-x="5"]:before,
.chessboard div[data-y="7"][data-x="6"]:before,
.chessboard div[data-y="7"][data-x="7"]:before {
    position: absolute;
    bottom: 0;
    right: 5px;
    color: white;
}
.chessboard div[data-y="7"][data-x="0"]:before {
    content: 'A';
}
.chessboard div[data-y="7"][data-x="1"]:before {
    content: 'B';
}
.chessboard div[data-y="7"][data-x="2"]:before {
    content: 'C';
}
.chessboard div[data-y="7"][data-x="3"]:before {
    content: 'D';
}
.chessboard div[data-y="7"][data-x="4"]:before {
    content: 'E';
}
.chessboard div[data-y="7"][data-x="5"]:before {
    content: 'F';
}
.chessboard div[data-y="7"][data-x="6"]:before {
    content: 'G';
}
.chessboard div[data-y="7"][data-x="7"]:before {
    content: 'H';
}

.chessboard div[data-y="0"][data-x="0"]:after,
.chessboard div[data-y="1"][data-x="0"]:after,
.chessboard div[data-y="2"][data-x="0"]:after,
.chessboard div[data-y="3"][data-x="0"]:after,
.chessboard div[data-y="4"][data-x="0"]:after,
.chessboard div[data-y="5"][data-x="0"]:after,
.chessboard div[data-y="6"][data-x="0"]:after,
.chessboard div[data-y="7"][data-x="0"]:after {
    position: absolute;
    top: 5px;
    left: 5px;
    color: white;
}
.chessboard div[data-y="0"][data-x="0"]:after {
    content: '8';
}
.chessboard div[data-y="1"][data-x="0"]:after {
    content: '7';
}
.chessboard div[data-y="2"][data-x="0"]:after {
    content: '6';
}
.chessboard div[data-y="3"][data-x="0"]:after {
    content: '5';
}
.chessboard div[data-y="4"][data-x="0"]:after {
    content: '4';
}
.chessboard div[data-y="5"][data-x="0"]:after {
    content: '3';
}
.chessboard div[data-y="6"][data-x="0"]:after {
    content: '2';
}
.chessboard div[data-y="7"][data-x="0"]:after {
    content: '1';
}
.main-header {
    text-align: center;
    margin-top: 20px;
}