.body {
background-color: #7393B3;
color: white;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
/* chess board styling */
#gameboard {
display: grid;
grid-template-columns: 2rem repeat(8, 4rem);
grid-template-rows: repeat(8, 4rem) 2rem;
width: max-content;
}
#spacer {
padding: 2rem 2rem 0 0;
width: max-content;
margin: 0 auto;
border-radius: 6px;
background-color: #E1C16E;
}
.field {
width: 4rem;
height: 4rem;
padding: 0;
clear:none;
}
.dark {
background-color: #CD7F32;
display: inline-block;
}
.light {
background-color: #FFE9C5;
display: inline-block;
}
.piece {
z-index: 5;
}
.row8 {
grid-row: 1;
}
.row7 {
grid-row: 2;
}
.row6 {
grid-row: 3;
}
.row5 {
grid-row: 4;
}
.row4 {
grid-row: 5;
}
.row3 {
grid-row: 6;
}
.row2 {
grid-row: 7;
}
.row1 {
grid-row: 8;
}
.notationRow {
grid-row: 9;
line-height: 2rem;
}
.colA {
grid-column: 2;
}
.colB {
grid-column: 3;
}
.colC {
grid-column: 4;
}
.colD {
grid-column: 5;
}
.colE {
grid-column: 6;
}
.colF {
grid-column: 7;
}
.colG {
grid-column: 8;
}
.colH {
grid-column: 9;
}
.notationCol {
grid-column: 1;
line-height: 4rem;
}
.notation {
text-align: center;
}
/*--------*/
#title {
text-align: center;
}
.marker {
color: #008080;
font-size: xx-large;
text-align: center;
line-height: 4rem;
position: relative;
z-index: 10;
cursor: pointer;
}
p {
width:fit-content;
}
.catch {
background-color: red;
}
#ui {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: auto;
}
.turnIndicatorContainer {
padding: 2rem;
text-align: left;
width: max-content;
background-color: #353535c9;
border-radius: 6px;
margin: 0 auto;
}
#turnIndicator {
margin-top: 0;
}
button {
border: none;
background-color: #4D7EA8;
color: white;
padding: 5px;
border-radius: 6px;
cursor: pointer;
}
button:hover {
background-color: #e68540 !important;
}
#computerMode {
background-color: #e68540;
}
img {
width: 4rem;
height: 4rem;
}
@media only screen and (max-width: 1050px) {
#ui {
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto auto;
}
.turnIndicatorContainer {
margin-bottom: calc(100vw / 18);
padding: calc(100vw / 18);
width: auto;
}
#boardColumn {
grid-row: 2;
}
#prefColumn {
grid-row: 1;
}
img {
width: calc(100vw / 9);
height: calc(100vw / 9);
}
.field {
width: calc(100vw / 9);
height: calc(100vw / 9);
}
.notationCol {
line-height: calc(100vw / 9);
}
.notationRow {
line-height: calc(100vw / 18);
}
#gameboard {
grid-template-columns: calc(100vw / 18) repeat(8, calc(100vw / 9));
grid-template-rows: repeat(8, calc(100vw / 9)) calc(100vw / 18) ;
}
#spacer {
padding: calc(100vw / 18) calc(100vw / 18) 0 0;
width: auto;
}
.marker {
line-height: calc(100vw / 9);
font-size: 70px;
}
button {
font-size: xx-large;
padding: 1rem;
}
#title {
font-size: 60px;
}
}