.board{
    display: inline-block;
    background-color: #4761d4;
}
.placement,.boardpiece,.token1,.token2,.htoken1,.htoken2,.rtoken1,.rtoken2{
    width: 36px;
    height: 36px;
    text-align: center;
    border-radius: 50%;
    margin: 2px;
}
.boardpiece,.token1,.token2,.htoken1,.htoken2,.rtoken1,.rtoken2{
    position: relative;
    display: inline-block;
}
.placement{
    position: relative;
    top: 0px;
    left: 0px;
}
.boardpiece{
    background-color: #ffffff;
}
.token1{
    background-color: #dac863;
}
.htoken1{
    background-color: #fff4b7;
}
.token2{
    background-color: #ce6363;
}
.htoken2{
    background-color: #ffaeae;
}
.rtoken1{
    background-color: #756b2e;
}
.rtoken2{
    background-color: #812f2f;
}

.symbol{
    position: relative;
    image-rendering: optimizeSpeed;
    image-rendering: pixelated;    
    opacity: 0.2;
    width: 100%;
    height: 100%;
}
.notile{
    display: none;
}

.wintext,.losetext{
    border: none;
    margin: 0%;
    padding: 0%;
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 35px; 
}
.wintext{
    color: #dac863;
}
.losetext{
    color: #ce6363;
}

.btn{
    position: relative;
    display: inline-block;
    margin: 0%;
    padding: 0%;
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 15px; 
    background-color: #4761d4;
    color: #ffffff;
}