@keyframes rotate90 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(90deg);
    }
}


@keyframes whiteSquareToCheckMatedColour {
    from {
        background-color: #fefee2b2;
    }
    to {
        background-color: #b7000096;
    }
}

@keyframes blackSquareToCheckMatedColour {
    from {
        background-color: #0000004d;
    }
    to {
        background-color: #b7000096;
    }
}

body {
    background-image: url("../assets/wood-texture.svg");
    background-size: cover;
    background-color: #a69d6f;
}

main {
    display: inline-flex;
}

#board {
    display: grid;
    grid-template-columns: repeat(9, auto);
    grid-template-rows: repeat(9, auto);
    width: min(90vh, 90vw);
    height: min(90vh, 90vw);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.square, .coordinate {
    height: min(10vh, 10vw);
    width: min(10vh, 10vw);
}

.square.white {
    background-color: #fefee2b2;
}

.square.black {
    background-color: #0000004d;
}

.square.selected {
    background-color: #ffff0061;
    box-shadow: inset 1px 1px 5px 1px;
}

#board .square.white.checkmated {
    animation: whiteSquareToCheckMatedColour 0.8s forwards;
}

#board .square.black.checkmated {
    animation: blackSquareToCheckMatedColour 0.8s forwards;
}

#board .square.checkmated img {
    animation: rotate90 0.8s forwards;
}

.coordinate {
    text-align: center;
    font-family: Consolas,Menlo,"courier new",monospace;
    align-content: center;
}

#board .piece, #piece-picker .piece {
    height: 80%;
    width: 80%;
    margin: 10%;
}

#board .piece img, #piece-picker .piece img {
    height: 80px;
    width: 80px;
}

#piece-picker {
    align-content: space-around;
    position: absolute;
    left: 75%;
    top: 50%;
    transform: translate(-50%, -50%);
}