48 lines
891 B
CSS
48 lines
891 B
CSS
:root {
|
|
--cell-size: 4rem;
|
|
--light-color: white;
|
|
--dark-color: black;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
justify-content: center; /* horizontal centering */
|
|
align-items: center; /* vertical centering */
|
|
height: 100vh; /* make body full height */
|
|
margin: 0; /* remove default margin */
|
|
}
|
|
|
|
#board {
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: repeat(5, var(--cell-size));
|
|
grid-template-rows: repeat(5, var(--cell-size));
|
|
}
|
|
|
|
.token {
|
|
background-color: orange;
|
|
width: 60%;
|
|
height: 60%;
|
|
border-radius: 50%;
|
|
margin: auto;
|
|
position: relative;
|
|
top: 20%;
|
|
}
|
|
|
|
#player-token {
|
|
background-color: darkkhaki;
|
|
cursor: grab;
|
|
}
|
|
|
|
.cell {
|
|
width: var(--cell-size);
|
|
height: var(--cell-size);
|
|
}
|
|
|
|
.dark {
|
|
background-color: var(--dark-color);
|
|
}
|
|
|
|
.light {
|
|
background-color: var(--light-color);
|
|
} |