html, body {
    height: 100%;
    margin: 0;
    background-image: url("../assets/background/sprinkle-5.svg");
    background-size: cover;
}

#chess-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grave-container {
    height: 80vh;
    width: calc(80vh / 4);

    /* border: 5px solid black; */
    display: grid;
    /*grid-column-gap: 10px;*/
    /*grid-row-gap: 10px;*/
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(8, 1fr);
}

.grave-container .piece {
    transform: none !important;
}

.gravestone {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.spawn-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(1, 1fr);
    position: absolute;
    width: fit-content;
    background-color: #ffc900;
    visibility: hidden;
    align-items: center;
    justify-items: center;
    z-index: 200;
}

.spawn-container * {
    height: 100%;
}

.visible {
    visibility: visible;
}
.spawn-piece {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20vw;
    max-width: 180px;
    height: 20vw;
    max-height: 180px;


}


#chess-board {
    border: 5px solid black;
    width: 80vh;
    max-width: 90%;
    aspect-ratio: 1;
    display: grid;
    /*grid-column-gap: 10px;*/
    /*grid-row-gap: 10px;*/
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    grid-template-areas:
            "a8 b8 b8 d8 e8 f8 g8 h8"
            "a7 b7 b7 d7 e7 f7 g7 h7"
            "a6 b6 b6 d6 e6 f6 g6 h6"
            "a5 b5 b5 d5 e5 f5 g5 h5"
            "a4 b4 b4 d4 e4 f4 g4 h4"
            "a3 b3 b3 d3 e3 f3 g3 h3"
            "a2 b2 b2 d2 e2 f2 g2 h2"
            "a1 b1 b1 d1 e1 f1 g1 h1";
}

#chess-board .plane {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #faebd7;
}

#chess-board > .plane-row {
    display: contents;
}

#chess-board > .plane-row:nth-child(odd) > .plane:nth-child(even) {
    background-color: black;
}

#chess-board > .plane-row:nth-child(even) > .plane:nth-child(odd) {
    background-color: black;
}

#back-arrow {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 120px;
    opacity: 0.6;
    cursor: pointer;
}

#back-arrow.disabled {
    pointer-events: none;
    opacity: 0.6;
}

#back-arrow:hover {
    opacity: 1;
}

.piece::after {
    position: absolute;
    font-size: 72px;
    inset: 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    line-height: 72px;

    background-size: 100%;
    background-size: contain;
    height: 100%;
    background-repeat: no-repeat;
    margin: 10px;
}

@media screen and (max-width: 900px) {
    #chess-container {
        flex-direction: column;
    }

    #chess-board {
        width: 85%;
    }

    .grave-container {
        height: auto;
        width: 85%;
        /*grid-column-gap: 10px;*/
        /*grid-row-gap: 10px;*/
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    /* trick to make height of grave field same as width */
    .grave-container::after {
        content: ' ';
        display: block;
        width: 100%;
        padding-top: 100%
    }

    .piece::after {
        margin: 3px;
    }

}

@media screen and (max-width: 450px) {
    #chess-board {
        width: 90%;
    }

    #back-arrow {
        bottom: 10px;
        left: 10px;
        width: 70px;
    }

}

.piece.white {
    background-color: #bbb;
}

.piece.black {
    background-color: #595959;
    /* default none and after first turn it changes automatically */
    pointer-events: none;
}

.piece {
    display: block;
    height: 60%;
    width: 60%;
    border-radius: 50%;
    transition: transform .5s ease-in-out;
    position: absolute;
    z-index: 100;
}

.notransition {
    transition: all 0s;
}

.piece.black {
    color: black;
}

.piece.white {
    color: white;
}

.active {
    border: 4px solid #ffc900;
}

/* ##################### */
/*         Pawn          */
/* ##################### */

.pawn.black::after {
    /* content: "♟︎"; */
    content: "";
    background-image: url("../assets/pieces/draw/pawn-black.png");
}

.pawn.white::after {
    /* content: "♟︎"; */
    content: "";
    background-image: url("../assets/pieces/draw/pawn-white.png");
}

/* ##################### */
/*         Tower         */
/* ##################### */

.tower.black::after {
    /* content: "♜"; */
    content: "";
    background-image: url("../assets/pieces/draw/tower-black.png");
}

.tower.white::after {
    /* content: "♜"; */
    content: "";
    background-image: url("../assets/pieces/draw/tower-white.png");
}

/* ##################### */
/*         Bishop        */
/* ##################### */

.bishop.black::after {
    /* content: "♝"; */
    content: "";
    background-image: url("../assets/pieces/draw/bishop-black.png");
}

.bishop.white::after {
    /* content: "♝"; */
    content: "";
    background-image: url("../assets/pieces/draw/bishop-white.png");
}

/* ##################### */
/*         Knight        */
/* ##################### */

.knight.black::after {
    /* content: "♞"; */
    content: "";
    background-image: url("../assets/pieces/draw/knight-black.png");
}

.knight.white::after {
    /* content: "♞"; */
    content: "";
    background-image: url("../assets/pieces/draw/knight-white.png");
}

/* ##################### */
/*         Queen         */
/* ##################### */

.queen.black::after {
    /* content: "♛"; */
    content: "";
    background-image: url("../assets/pieces/draw/queen-black.png");
}

.queen.white::after {
    /* content: "♛"; */
    content: "";
    background-image: url("../assets/pieces/draw/queen-white.png");
}

/* ##################### */
/*         King          */
/* ##################### */

.king.black::after {
    /* content: "♚"; */
    content: "";
    background-image: url("../assets/pieces/draw/king-black.png");
}

.king.white::after {
    /* content: "♚"; */
    content: "";
    background-image: url("../assets/pieces/draw/king-white.png");
}