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;
    }
}