* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    user-select: none;
}

.white {
    background-color: #f9f6ee;
}
.black {
    background-color: #63462d;
}

.chessBord,
.char {
    /* width: 5vw; */
    height: 5vw;
    aspect-ratio: 1 / 1;
}

#root {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100vh;
}

#bord {
    padding-top: 2vw;
    background-color: #bc8250;
    display: grid;
    grid-template-areas:
        "numArea boardArea"
        "numArea letterArea";
    width: 44vw;
    aspect-ratio: 1 / 1;
    margin-top: 100px;
}

#mainBord {
    position: relative;

    width: 40vw;
    aspect-ratio: 1 / 1;
    display: grid;
    grid-area: boardArea;
    grid-template-areas: "a a a a a a a a";
    gap: 0;
}
h1 {
    padding-top: 30px;
}

#divForNumber {
    grid-area: numArea;
    height: 40vw;
}

#divForLetters {
    display: grid;
    grid-template-areas: " a a a a a a a a";
    grid-area: letterArea;
    width: 40vw;
}

#divForLetters :first-child {
    border-left: solid black 2px;
}
#divForLetters :last-child {
    border-right: solid black 2px;
}

#divForNumber :first-child {
    border-top: solid black 2px;
}
#divForNumber :last-child {
    border-bottom: solid black 2px;
}
.numItem {
    height: 5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2vw;
    border-bottom: solid black 1px;
    border-top: solid black 1px;
}
.letterItem {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2vw;
    border-left: solid black 1px;
    border-right: solid black 1px;
 }

/* ////////////////////////////////////// */

.charHover:hover {
    background-color: rgb(149, 254, 254);
    transition: 0.5s;
}

/* =========================================== */

.checked {
    background-color: chartreuse;
}
.checked:hover {
    background-color: rgb(157, 255, 0);
}

.edible {
    background-color: rgb(255, 20, 20);
}

.edible:hover {
    background-color: rgb(255, 51, 51);
}
.castling {
    background-color: rgb(255, 216, 20);
}

.toCastlWith {
    position: absolute;
    right: -65px;
    border: #63462d solid 2px;
    width: 50px;
    height: 200px;
}
/* ===================================== */

.kingChax {
    animation: kingChax 0.2s 5 alternate;
}

@keyframes kingChax {
    0% {
        background-color: red;
    }
    100% {
        background-color: aqua;
    }
}