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

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

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

.oponent-name {
    font-weight: bold;
    font-size: 1.5em;
    margin-bottom: 1rem;
    text-align: center;
    float:right;
    margin-right:5%;
}

.user_avatar{width:2vw;height:2vw;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;

}


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

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

#stack {
    right:5%;
    top:15%;
    position:absolute;
}

#stack .letter{
    background-color:#DEDE41;
    padding:1vw;
    border-radius:10%;
    box-shadow: 0 0 15px #000000, 0 1px 0 #000000, 0 2px 0 #000000, 0 2px 3px #333;
    margin-bottom:0.5vw;
    
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    font-weight:bold;
    cursor:pointer;
    user-select:none;
}

#stack .letter_to_change{
    background-color: #CE946E;
}




* {
  margin: 0;
  padding: 0;
  border: none;
  position: relative;
}


#js-board {
  aspect-ratio : 1 / 1;
  width: 85vh;
  height: 85vh;
  border: outset green 10px;
  margin: auto;
}
#js-board .board {
  background-color: green;
  width:100%;
  height:100%;
}
#js-board .board .row {
  height: 6.65%
}
#js-board .board .row .tile {
  width: 6.4%;
  height: 100%;
  background-color: #DEDE41;
  
  display: inline-block;
  font: bold 70%/1.5 "Open Sans", sans-serif;
  color: rgba(0, 0, 0, 0.6);
  
  border-radius:10%;
  box-shadow: 0 0 15px #000000, 0 1px 0 #000000, 0 2px 0 #000000, 0 2px 3px #333;
}

#js-board .board .row .tile .after {
  width: 33%;
  height: 33%;
  background-color: transparent;
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 100%;
  line-height: 140%;
  text-align: right;
  z-index: 999;
}

#js-board .board .row .tile.tile-ct {
  background-color: pink;
}
#js-board .board .row .tile.tile-ct .decal::before, #js-board .board .row .tile.tile-ct input::before {
  content: "★";
  font-size: 200%;
}
#js-board .board .row .tile.tile-dl .decal::before, #js-board .board .row .tile.tile-dl input::before, #js-board .board .row .tile.tile-dl .decal::after, #js-board .board .row .tile.tile-dl input::after, #js-board .board .row .tile.tile-dw .decal::before, #js-board .board .row .tile.tile-dw input::before, #js-board .board .row .tile.tile-dw .decal::after, #js-board .board .row .tile.tile-dw input::after, #js-board .board .row .tile.tile-tw .decal::before, #js-board .board .row .tile.tile-tw input::before, #js-board .board .row .tile.tile-tw .decal::after, #js-board .board .row .tile.tile-tw input::after, #js-board .board .row .tile.tile-tl .decal::before, #js-board .board .row .tile.tile-tl input::before, #js-board .board .row .tile.tile-tl .decal::after, #js-board .board .row .tile.tile-tl input::after {
  content: "";
  position: absolute;
  top: -4px;
  height: calc(100% + 2px * 4);
  z-index: 999;
  transform: scaleX(0.7);
}
#js-board .board .row .tile.tile-dl .decal::after, #js-board .board .row .tile.tile-dl input::after, #js-board .board .row .tile.tile-dw .decal::after, #js-board .board .row .tile.tile-dw input::after, #js-board .board .row .tile.tile-tw .decal::after, #js-board .board .row .tile.tile-tw input::after, #js-board .board .row .tile.tile-tl .decal::after, #js-board .board .row .tile.tile-tl input::after {
  transform: scaleY(0.7) rotate(90deg);
}
#js-board .board .row .tile.tile-dl {
  background-color: #DB2F52;
}

#js-board .board .row .tile.tile-dw {
  background-color: #25DC49;
}

#js-board .board .row .tile.tile-tw {
  background-color: #00A220;
}

#js-board .board .row .tile.tile-tl {
  background-color: #A20020;
}

#js-board .board .row .tile .decal, #js-board .board .row .tile input {
  width: 100%;
  height: 100%;
  background-color: transparent;
  position: absolute;
  text-align: center;
  line-height: 32px;
  text-transform: uppercase;
  border-radius: 12%;
  overflow: visible;
  cursor: pointer;
}
#js-board .board .row .tile input {
  font-size: 150%;
  text-align: left;
  text-indent: 25%;
  z-index: 999;
  color: transparent;
}
#js-board .board .row .tile input:focus {
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 10px, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0) 20px);
}
#js-board .board .row .tile input.filled {
  background-color: #FFD700;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.6);
}




#sendturn {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 20px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  top:15%;
  left:1%;
  position:absolute;
}

#sendturn span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

#sendturn span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

#sendturn:hover span {
  padding-right: 25px;
}

#sendturn:hover span:after {
  opacity: 1;
  right: 0;
}