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;
}

.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;
}

.myblock{float:left;}
.oponentblock{float:right;}

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

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

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


.sign{margin:auto;width:2vw;display:inline;float:left;padding:0 1vw 0 1vw;}
.oponent-sign{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 {
    position:relative;
    margin-top:1%;
    width:  90vh;
    height: 90vh;
    background-color:#EFE996;
    margin:auto;
}
.game-board__cell {
    border: 1px solid #5F90A8;
}

.game-board__cell--red {
    /*background: red*/
    background-image: url(../img/krizek.png);
    background-size:contain;
}

.game-board__cell--blue {
    /*background: blue;*/
    background-image: url(../img/kolecko.png);
    background-size:contain;
}

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

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

.last_turn{
    background-color:#FF6666;
}