body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}

hr {
width: 500px;
}

#board {
width: 500px;
height: 500px;

background-color: #2E0014; /* board */
border: 5px solid #22011c; /* frame */

margin: 0 auto;
display: flex;
flex-wrap: wrap;
box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.2),
    inset -1px -1px 50px rgba(0, 0, 0, 0)
}

.tile {
border: 5px solid #2E0014; /* board frame */
}

.tile {
width: 90px;
height: 90px;
font-size: 50px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}

.tile {
    position: relative;
    background: #442220; /* tile background */
    display: flex;
    justify-content:center;
    align-items: center;
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0),
    inset 3px 3px 8px rgba(0, 0, 0, 0.5);
}

/* colored tiles */

.x1 {
background-color: #788e41;
color: #0f441f;
}

.x2 {
background-color: #B0CA87;
color: #4c5c48;
}

.x3{
background-color: #d4e587;
color: #6e8a60;
}

.x4{
background-color: #f2f3ae;
color: #716658;
}

.x5{
background-color: #edc67f;
color: #5a654f;
}

.x6{
background-color: #ed9871;
color: #6f4d50;
}

.x7{
background-color: #ee5b82;
color: #602e2e;
}

.x8{
background-color: #ea86c2;
color: #4b3341;
}

.x9{
background-color: #cbaeef;
color: #3a272d;
}

.x10{
background-color: #a86dec;
color: #332d3b;
}

.x12{
background-color: #fe3d3d;
color: white;
}

.x13{
background-color: #ff2020;
color: white;
}