body {
    background-color: #f0f8ff;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    color: #333333;
}

h1, h2, h3 {
    color: #0b3d91;
}

a {
    color: #1e90ff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.chessboard {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    width: 400px;
    height: 400px;
    background-color: #f2f2f2;
    border: 1px solid #808080;
    margin: 20px auto;
}

.square {
    width: 50px;
    height: 50px;
}

.square.light {
    background-color: #e6e6e6;
}

.square.dark {
    background-color: #4d4d4d;
}

.piece {
    width: 100%;
    height: 100%;
}

@media (max-width: 600px) {
    .chessboard {
        width: 90%;
        height: auto;
    }
    .square {
        height: auto;
    }
}