body{
    font-family: sans-serif,monospace;
    font-weight: bold;
    text-align: center;
}


#board{
    width: 400px;
    height: 400px;
    border: 10px solid darkgray;
background-color: lightgrey;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}

#board div{
    width: 48px;
    height: 48px;
    border: 1px solid whitesmoke;

/*text*/
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;

}
.title-clicked{
    background-color: darkgray;
}

.x1{
    color: #00f;
}

.x2{
    color:rgb(14, 136, 14) ;
}


.x3{
    color: #f00;
}

.x4{
    color:rgb(39, 4, 121) ;
}
.x5{
    color:rgb(128,0,0) ;
}

.x6{
    color: #1ADBE6;
}
.x7{
    color: #000;
}
.x8{
    color:#767676 ;
}
#flag-button{
    width: 100px;

height: 50px;
font-size: 30px;
background-color:lightgray ;
border: none;



}