@font-face {
    font-family: PixelsFont;
    src: url(../../../fonts/pixels-font.otf);
    font-display: swap;
}


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:20%;
}

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

.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: center;
    float:right;
    margin-right:5%;
}

.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:100%;
    height:100%;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto;
    margin-left:auto;
    margin-right:auto;
    image-rendering: pixelated;

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


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


#battle{
    background-color:white;
    width:192px;
    height:128px;
    position:absolute;
    left:50%;
    top:50%;
    z-index:500;
    overflow:hidden;
    display:none;
}

#battle .main_animation{
    width:100%;
    height:100%;
}

#battle .animation_weapon{
    position:absolute;
    top:50%;
    height:40%;
}

#battle #p1weapon{
    right:100%;
}

#battle #p2weapon{
    left:100%;
}


#weapon_choser{
    background-color:white;
    width:192px;
    height:80px;
    position:absolute;
    left:50%;
    top:50%;
    z-index:500;
    overflow:hidden;
    display:none;
}

#weapon_choser .weapon_choser_item{
    width:30%;
}













.sidebar {
  height: 100%;
  width: 0;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #C5C5C5;
  overflow-x: hidden;
  transition: 0.5s;

}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

.sidebar .color_select_btn{
    width: 60px;
    height: 60px;
    margin-left:auto;
    margin-right:auto;
    display: block;
    transition: 0.3s;
    border-radius:10px;
    border: solid white 2px;
    margin-bottom:5px;
}

.sidebar .color_select_btn:first-child{
    margin-top:60px;
}

.sidebar .color_select_btn:last-child{
    margin-bottom:60px;
}

#timeleft{
  background-color:orange;
  font-size:1.3em;
  color:white;
  width:6em;
  position:absolute;
  bottom:0;
  left:50%;
  text-align:center;
  padding-top:0.7em;
  padding-bottom:0.7em;
  font-family:PixelsFont;
}