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

.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: 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 {
    position:relative;
    height:90vh;
    width:70vw;
    padding:0;

}

.game-board canvas{
    margin-top:0;
    padding-top:0;
}

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


#sentence-holder{
    width:70vw;
    /*height:20vh*/
    background-color:white;
    position:absolute;
    top:0;
}

#sentence-holder #sentence-type{
    width:100%;
    text-align:center;
    background-color:black;
    color:white;
    padding-top:1em;
    padding-bottom:1em;
}

#sentence-holder #sentence-text{
    margin:3vmin;
    text-align:center;
}

#sentence-holder #sentence-text .ltr{
    display:inline-block;
    width:2vw;
    height:2vw;
    font-size:1vw;
    text-align:center;
    line-height:2vw;
    background: rgb(131,131,131);
    background: linear-gradient(135deg, rgba(131,131,131,1) 0%, rgba(200,200,200,1) 100%);
    border-radius:0.5em;
    font-weight:bold;
    margin-bottom:1.5vh;
}

.highlightedltr{
    background: rgb(58,200,222)!important;
    background: linear-gradient(195deg, rgba(58,200,222,1) 0%, rgba(59,226,217,1) 100%)!important;
}

.word{word-break: keep-all;white-space:nowrap;}

#sentence-holder #sentence-text .space{background:transparent;}

#sentence-author{text-align:center;margin-bottom:2vh;font-weight:bold;}

.score{
    position:absolute;
    color:#F5DF54;
    font-size:8vh;
    font-weight:bold;
    bottom:2vh;
     -webkit-text-stroke: 0.2vh white;
}

#my-score{left:2vw;}
#oponent-score{right:2vw;}


.score-update{
    display:none;
    position:absolute;
    font-size:8vh;
    font-weight:bold;
    bottom:10vh;
     -webkit-text-stroke: 0.2vh white;
}

.score-update.negative{color:red;}
.score-update.positive{color:green;}

#my-score-update{left:2vw;}
#oponent-score-update{right:2vw;}


.score-selected-letter{
    display:none;
    position:absolute;
    background: rgb(222,202,58);
    background: linear-gradient(223deg, rgba(222,202,58,1) 0%, rgba(226,153,59,1) 100%);
    border:solid black 4px;
    border-radius:50%;
    width:7vh;
    line-height:7vh;
    height:7vh;
    text-align:center;
    font-size:4vh;
    font-weight:bold;
    bottom:18vh;
    /* -webkit-text-stroke: 0.2vh white; */
}

#my-selected-letter{left:2vw;}
#oponent-selected-letter{right:2vw;}


.score-selected-letter #my-selected-letter-points{font-size:2vh;}
.score-selected-letter #oponent-selected-letter-points{font-size:2vh;}


.interactor{
    display:none!important;
    border-radius:2%;
    position:absolute;
    width:40%;
    left:30%;
    bottom:4%;
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;
    
}

.interactor-opened{
    display:grid!important;
}

.interactor-rectangle{
    background-color:#AAA;
    border-radius:5%;
    margin:4%;
    display:block;
    vertical-align: baseline;
    font-size:2em;
    line-height:2em;
    text-align:center;
    color:white!important;
    cursor:pointer;
}

.interactor-rectangle sub{
    font-size:0.5em;
}

#time-left{
    font-weight:bold;
    font-size:2em;
    margin-top:5%;
    display:block;
}

#time-left{
    background-color:#666;
}