.CardTable {
    position: relative;
    width: 100vw;
    height: 100vh;

    overflow: hidden;


    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    padding:0.5vw;


    background: no-repeat url('../images/Background/chess4.jpg');
     /*background: no-repeat url('/images/Background/Tkantable2.jpg');*/

    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;




}















.SouthHand {
    position: absolute;
    height: 22.0vh;
    /*width :70vh;*/
    width: 100%;
    bottom: 2%;
    left: 50%;
    transform: translate(-50%,0);
    /**/
   /* background-color: aquamarine;*/
}












.EastHand {
    position: absolute;
    top: 0%;
    right: 9.0vw;
    /*  right: 0%;*/
}


.SouthWraper {
    position: absolute;
    height: 22.0vh;
    /*width :70vh;*/
    width: 100%;
    bottom: 2%;
    left: 50%;
    transform: translate(-50%,0);
    /*background-color: lightpink;*/
}





.WestHand {
    position: absolute;
    left: 9.16vw;
    top: 0%;
    left: 9.0vw;
    
}




.NorthHand {
    position: absolute;
    height: 22.0vh;
    width: 50vh;
    top: 50%;
    left: 1%;
   
}





.EastWraper {
    position: absolute;
    top: 1%;
    right: 1%;
    /*background-color: azure;*/
   
}


.InfoGame {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*justify-content: space-around;*/
    justify-content: center;
    /* justify-content: space-between;*/
    background-color: burlywood;
    font-family: "BestFont";
    background: no-repeat url('../images/Frame/Ramka.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    /* width: 4.5vh;
    height: 4.5vh;*/


    pointer-events: none; /* запрет кликов по блоку */
}



.EastInfoGame {
    position: absolute;
    top: 0%;
    right: 0%;
    width: 9.16vw;
    height: 13.31vw;
    /* padding:0.5vw;*/


    /*background-color: burlywood;*/
    /* z-index: 100000;*/

    border-style:solid;
}


.WestWraper {
    position: absolute;
    top: 1%;
    left: 1%;
    background-color: azure;
    
}


.WestInfoGame {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 9.16vw;
    height: 13.31vw;
   
    border-style: solid;
}



.SouthInfoGame {
    position: absolute;
    bottom: 2%;
    left: 1%;
    border-style: solid;
   /* background-color: blueviolet;*/
}




@media (min-aspect-ratio: 16/10) {
    .EastInfoGame, .WestInfoGame, .SouthInfoGame {
       

      

        width: 8.549vw;
        height: 12.43vw;
    }

    .EastHand {
        right: 8.3vw;
    }

    .WestHand {
        /*left: 9.16vw;*/
        left: 8.3vw;
    }


}

@media (min-aspect-ratio: 16/9) {
    .EastInfoGame, .WestInfoGame, .SouthInfoGame {
       
      

        width: 8.549vw;
        height: 12.43vw;
    }

    .EastHand {
        right: 8.3vw;
    }

    .WestHand {
        left: 8.3vw;
    }

}


@media (min-aspect-ratio: 21/9) {
    .EastInfoGame, .WestInfoGame, .SouthInfoGame {
      


        width: 7.21vw;
        height: 10.3vw;
    }



    .EastHand {
        right: 7.0vw;
    }

    .WestHand {
        left: 7.0vw;
    }

}
























.bulletCanvas {
    /*width: 50vw;
    height: 50vh;*/

    width: 50vw;
    height: 50vh;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    /* border-style: solid;*/
    /* border-color: red;*/
}




/*.RotationClass {
    animation: 3s linear infinite rotate;
}

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

    to {
        transform: rotate(360deg);
    }
}

*/