html {
    height: 100vh;
}
html[data-player="1"] {
    background: linear-gradient(0deg, #58c63a40, transparent 26%, transparent);
}
html[data-player="2"] {
    background: linear-gradient(0deg, #e6565640, transparent 26%, transparent);
}


body {
	font-family: sans-serif;
	margin: 0;
	padding: 1em;
}

#board {
    position: fixed;
    top: 13em;
    left: 50%;
    margin: 0 0 0 -10em;
}


#message_turn {
    font-size: 1.2em;
}

.cell {
    display: inline-block;
    width: 2em;
    height: 2em;
    /* background: #00a8eb; */
    border-radius: 100%;
    border: 3px solid #00a8eb;
}
.cell-holder {
    display: inline-block;
    width: 2em;
    height: 2em;
}

[data-player="1"] {
    background: hsl(119deg 55% 50%);
    border-color: #00000078;
}
[data-player="2"] {
    background: hsl(0deg 74% 62%);
    border-color: #00000078;
}

.arrow, .actina {
    cursor: pointer;
}

.arrow {
	display: inline-block;
	width: 0.5em;
	height: 3em;
	/* background: #00a8eb; */
	/* border-radius: 100%; */
	border: 3px solid #00a8eb;
	border-width: 0 3px;
	margin: -.5em 1.2em;
}

.actina {
	display: inline-block;
	width: 5em;
	height: .5em;
	/* background: #00a8eb; */
	/* border-radius: 100%; */
	border: 3px solid #00a8eb;
	border-width: 3px 0;
	margin: 0.75em 0;
}

.line {
    display: flex;
    width: 20em;
    position: absolute;
    justify-content: space-between;
}

.actina:hover, 
.arrow:hover, 
.actina.high, 
.arrow.high, 
.cell[data-object^="cell"][data-player="0"]:hover {
	cursor: pointer;
    border-color: #096c93;
    background: #096c9330;
}


.button {
    font-variant: all-small-caps;
    text-align: center;
    padding: .1em .5em;
    background: #00a8eb;
    color: #ffffff;
    border: 1px solid #767676;
    border-radius: .2em;
    box-shadow: inset 0px 1px 2px 0 #ffffff;
    margin-bottom: .3em;
    cursor: pointer;
}
.button:hover, .button:active {
	background: #1096cb;
}



#chat {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 40%;
    max-height: 50%;
    max-width: 25em;
    z-index: -1;
    display: flex;
    flex-direction: column;
    padding: .5em;
}

#chatbox {
    width: 100%;
    padding: .4em;
    box-sizing: border-box;
    font-size: inherit;
}

#messages {
    overflow-y: auto;
    overflow-x: hidden;
    word-break: break-all;
}

.message {
    padding: .2em;
}
.message.self {
    opacity: .5;
    padding-left: 1em;
}