* {
    box-sizing: border-box;
  }

body {
    margin: 0;
    background-color: #000000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='30' viewBox='0 0 1000 120'%3E%3Cg fill='none' stroke='%23222' stroke-width='10' %3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E");

}
.board {
    width: 100%;
    height: 100%;
    display: grid;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(3, auto);
    margin: 120px 0;
}

.cell {
    width: 100px;
    height: 100px;
    border: 3px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.cell:first-child,
.cell:nth-child(2),
.cell:nth-child(3) {
    border-top: none;
}
.cell:nth-child(3n +1) {
    border-left: none;
}
.cell:nth-child(3n +3) {
    border-right: none;
}
.cell:last-child,
.cell:nth-child(8),
.cell:nth-child(7) {
    border-bottom: none;
}

.cell.x::before,
.cell.x::after,
.cell.circle::before {
    background-color: white;

}

/* to create "X" with css*/

.cell.x::before,
.cell.x::after
{
   content: '';
   position: absolute;
   width: 9px;
   height: 90px;
}

.cell.x::before
 {
    transform: rotate(45deg);
}
.cell.x::after
   {
    transform: rotate(-45deg);
   }

/* to create "Circle" with css */

.cell.circle::before,
.cell.circle::after {
   content: '';
   position: absolute;
   border-radius: 50%;
   
}
.cell.circle::before {
    width: 90px;
    height: 90px;
}
.cell.circle::after {
    width: 70px;
    height: 70px;
    background-color: black;
}

.winning-message {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0, 0.9);
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 80px;
    flex-direction: column;
}
.winning-message button {
    font-size: 48px;
    background-color: white;
    border: 1px solid black;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
}
.winning-message button:hover {
    background-color: orange;
    border-color: white;
}
.winning-message.show {
    display: flex;
}
#restartButton1 {
    font-size: 40px;
    background-color: white;
    border: 1px solid black;
    padding: 5px 5px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    border-radius: 5px;

}
.restartGame {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}
#restartButton1:hover {
    background-color: orange;
}