#menu{
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    h1{
        text-align: center;
        font-size: 50px;
        margin: 10px;
        color: rgb(97, 47, 0);
    }
    .box{
    
        background: rgb(180, 124, 52);
        box-shadow: 0 0 70px rgba(0,0,0,0.7);
        padding: 10px 25px;
        padding-bottom: 25px;
        border-radius: 8px;
        display: box;
        input{
            display:block;
            margin: 15px;
            padding: 10px 0px;
            font-size: 22px;
            width: 250px !important;
            margin-left: auto;
            margin-right:  auto;
        }
        button{
            display:block;
            margin: 15px;
            padding: 10px 20px;
            font-size: 22px;
            width: 250px;
            margin-left: auto;
            margin-right:  auto;
        }
        h2{
            color: wheat;
            font-size: 30px;
            text-align: center;
        }
        p{
            padding: 15px;
            width: 220px;
            max-height: 100px;
            margin-left: auto;
            margin-right: auto;
            overflow-y: auto;
            background: rgba(0,0,0,0.1);
            color: rgb(255, 255, 255);
            border-radius: 10px;
            border: 2px solid rgba(0,0,0,0.7);
        }

    }
}

#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) }
  }