body{
    padding-top:33px;
    margin:0;
    display:flex;
    height:100vh;
    width:100%;
    align-items:center;
    justify-content:center;
    zoom:90%;
    background-image: url('image.jpg');
}
.board{
    height:640px;
    width:640px;
    
    background-color:black;
    display:flex;
    flex-wrap:wrap;
    border:2px solid black;
    justify-content:space-evenly;
    margin:40px;
}
.block{
    height:80px;
    width:80px;
    display:flex;
    justify-content:center;
    align-items:center;
    border: 2px solid black;  
    box-sizing: border-box; 
    background-color: lightgrey; 
}
.black-block{
    background-color:rgb(148, 59, 59);
}
.white-block{
    background-color:rgb(223, 146, 96);
}
.piece{
    height:90%;
    width:90%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.piece i{
    font-size: 60px;
}
.whitePiece{
    color:white;
}
.blackPiece{
    color:black;
}
.highLight{
    border: 6px solid black;  
    box-sizing: border-box; 
    
}
.side-div {
    width: calc((100% - 640px) / 2.5); 
    height: 640px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:rgba(87, 108, 136,0.5);
    
}
.right{
    
    display:flex;
    flex-direction:column;
    
}
.playerToggle{
    display:flex;
    flex-direction:column;
    
    
}
.playerToggle div{
    padding:0.2rem;
    margin:0.5rem;
    height:3rem;
    width:5rem;
   
    background-color:rgb(108, 177, 160);
    border-radius:.2rem;
    text-align:center;
    display:flex;
    flex-direction:column;
}
.playerToggle div p{
    font-size:1.2rem;
    text-align:center;
    text-decoration: solid;
    
}

.playerToggle .currentPlayer{
    
    background-color:rgb(165, 65, 65);
    border:2px solid rgb(156, 39, 39);
    box-shadow: 10px 10px 5px 1px rgb(79, 160, 120);
 }
 .modal {
    visibility:hidden; 
    position: fixed; 
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(168, 72, 72); 
    background-color: rgba(100, 10, 10, 0.4); 
    display:flex;
    justify-content:center;
    align-items:center;
}
.modal div{
    visibility:hidden;
    height:400px;
    width:400px;
    background-color:white;
    border-radius:10%;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    font-size:3rem;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.model div button{
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color:rgb(16, 63, 102);
    color:white;
    margin-top:2px;
}

.side-div .battle{
    position: absolute; 
    top: 0;
    font-size:3rem;
    font-style:oblique;
    font-weight: bolder;
    font-family :Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}