body {
    background-color: whitesmoke;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.container {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.board {
    width: 253px;
    height: 252px;
    position: relative;
    background-image: url('images/board.jpg');
    background-size: cover;
    background-position: center;
    border: 2px solid #333; 
}

.o {
    position: absolute;
    width: 42px;
    height: 42px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.x {
    position: absolute;
    width: 32px;
    height: 46px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


.board:nth-child(1) .x.top-left { top: 20px; left: 20px; }
.board:nth-child(1) .o.center { top: 110px; left: 110px; }
.board:nth-child(1) .x.bottom-right { top: 200px; left: 200px; }


.board:nth-child(2) .o.top-right { top: 20px; right: 20px; }
.board:nth-child(2) .o.middle-left { top: 110px; left: 20px; }
.board:nth-child(2) .x.center { top: 110px; left: 110px; }
.board:nth-child(2) .x.bottom-left { top: 200px; left: 20px; }
.board:nth-child(2) .o.bottom-center { top: 200px; left: 110px; }


.board:nth-child(3) .x.top-left { top: 20px; left: 20px; }
.board:nth-child(3) .o.middle-left { top: 110px; left: 20px; }
.board:nth-child(3) .o.middle-center { top: 110px; left: 110px; }
.board:nth-child(3) .x.bottom-left { top: 200px; left: 20px; }
.board:nth-child(3) .o.bottom-right { top: 200px; right: 20px; }


.board:nth-child(4) .o.top-left { top: 20px; left: 20px; }
.board:nth-child(4) .o.top-center { top: 20px; left: 110px; }
.board:nth-child(4) .o.top-right { top: 20px; right: 20px; }
.board:nth-child(4) .x.center { top: 110px; left: 110px; }
.board:nth-child(4) .o.middle-right { top: 110px; right: 20px; }
.board:nth-child(4) .x.bottom-left { top: 200px; left: 20px; }
.board:nth-child(4) .o.bottom-center { top: 200px; left: 110px; }
.board:nth-child(4) .x.bottom-right { top: 200px; right: 20px; }





.x {
    background-image: url('images/x.png');
}

.o {
    background-image: url('images/o.png');
}