body{
    background-color: #DEDEDE;
    font-family: Sans-Serif;	
    margin:0;
    padding:0;
    height:100%;
    overflow-y:hidden;
}

#main-container{
    background-color: #FFF;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.user_avatar{width:10vw;height:10vw;position:relative;margin:auto;}
.user_avatar img{width:100%;height:100%;position:absolute;top:0;left:0;}

.game {
    height:100%;
    width:70%;
    position:relative;
    float:left;
}

.game-info {
    width:100%;
    background-color: rgb(3,143,191);
    height:7%;
    padding-top:1%;
}

.active-player{
    color:white;
}

.name {
    font-weight: bold;
    font-size: 2rem;
    margin-bottom: 1rem;
    float:left;
}

.playerinfo{
    padding-bottom:20px;
    width:35%;
}

.myblock{float:left;}
.oponentblock{float:right;}
#oponentball{float:right;margin-left:1em;}
#myball{margin-left:1em;}

.players-name {
    font-weight: bold;
    font-size: 2rem;
    margin-bottom: 1rem;
    text-align: center;
}

.oponent-name {
    font-weight: bold;
    font-size: 2rem;
    margin-bottom: 1rem;
    text-align: right;
    float:right;
}

.user_avatar{width:3vw;height:3vw;position:relative;margin:auto;float:left;padding:0 1vw 0 1vw;}
.user_avatar img{width:100%;height:100%;position:absolute;top:0;left:0;}
.oponent-avatar{float:right;}

.game-board {
    width:90vh;
    margin-top:0.5%;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto;
    margin-left:auto;
    margin-right:auto;

}
.game-board__cell {
    background-size:contain;
    aspect-ratio: 1;
}


.cell-black{
    background-color:black;
}

.cell-white{
    background-color:#DDD;
}

.cell-black.available-move{
    background-color:#445118;
}

.cell-white.available-move{
    background-color:#ECFFA9;
}

#chat{
    position:relative;
    width:30%;
    height:100%;
    float:left;
}

#oponentball,#myball{
    float:left;
    font-size:2em;
}

.timeleft{position:relative;display:inline-block;float:right;}
#oponenttimeleft{margin-right:2em;float:left;}