#pieces-area{
    
    
    width: 100%;
    height: 100%;
    position: absolute;
    
    >div{
        width: 80px;
        position: absolute;
        aspect-ratio: 1;
        background-position: center;
        background-size: 70px;
        background-repeat: no-repeat;
        transition-duration: 0.5s;
        transition-property: top, left;
        transition-timing-function: cubic-bezier(0.620, 0.055, 0.280, 0.965);
        z-index: 1;
        border-radius: 6px;
        
        cursor: pointer;
        &.selected{
            box-shadow: 0 0 15px rgb(0, 255, 242, 1);
            transition-property: top, left, box-shadow;
        }
        &.white{
            &.basic{
                background-image: url("../resources/pieces/white-basic.svg");
            }
            &.queen{
                background-image: url("../resources/pieces/white-queen.svg");
            }            
        }

        &.black{
            &.basic{
                background-image: url("../resources/pieces/black-basic.svg");
            }
            &.queen{
                background-image: url("../resources/pieces/black-queen.svg");
            }
        }
    }
}

#game{
    #playfield{
        background: rgb(180, 124, 52);
        display: flex;
        box-shadow: 0 0 100px rgba(0,0,0,0.7);
        padding: 5px;
        border-radius: 8px;
        width: fit-content;
        position: relative;
        .row{
            display: inline-block   ;
            .tile{
                border-radius: 6px;
                margin: 2px;
                margin-bottom: 2px;
                margin-top: 4px;
                width: 80px;
                aspect-ratio: 1;
                background: black;

                &:nth-child(odd){
                    background: white;
                    box-shadow: -10px -10px 25px inset rgba(0,0,0,0.4);
                }
            }
            &:nth-child(odd){
                .tile{
                    background: white;
                    box-shadow: -10px -10px 25px inset rgba(0,0,0,0.4);

                &:nth-child(odd){
                    background: black;

                } 
                }
            }
        }
    }
}

@keyframes invalid-move-animation {
    0% { transform: translateX(0) }
    25% { transform: translateX(5px) }
    50% { transform: translateX(-5px) }
    75% { transform: translateX(5px) }
    100% { transform: translateX(0) }
  }