body{
    background-color: #e0b786b6;
}

:root{
    --boardSize:400px;
    --squareSize:50px;
}
#chessboard{
    width: 100%;
    height: 500px;
    border: #000000 2px solid;
    display: grid;
    place-items: center;
}

#board{
    width: 480px;
    height: 480px;
    border: black 2px solid;
    box-sizing:content-box;
}

.square{
    /* background-color: red; */
    /* border-width: 1px;
    border-color: black;
    border-style: solid; */
    width: 60px;
    height: 60px;
    float: left;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: grid;
    justify-content: center;
    align-items: center;
    cursor: grab;
}
.white{
    background-color: #f5eac6;
}
.black{
    background-color: #a37d44;
}

.notation{
    font-size:16px;
}

.numeric{
    position: absolute;
    top:3px;
    left:3px;
}
.alpha{
    position: absolute;
    bottom:1px;
    right:2px;
}
.d{
    color: #a37d44;
}
.l{
    color: #f5eac6;
}
.piece
{
    z-index: 1;
    width: 60px;
    height: 60px;
    position: relative;
    cursor:grab;
}
.float{
    z-index: 2;
    width: 70px;
    height: 70px;
    position: absolute;
}
.over{
    box-shadow:  inset #00ffffc4 0 0 20px 10px;
}


.inCheck{
    box-shadow:  inset #ff0000c4 0 0 20px 10px;
}

#choosePromo{
    z-index: 3;
    position: absolute;
    width: var(--squareSize);
    height: 200px;
    background-color: #14004d93;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.promo{
    z-index: 4;
    border: solid #00000091 1px;
    width: var(--squareSize);
    height: var(--squareSize);
}