html {
	cursor: url("cursor.png"), default;
	font-family: sans-serif;
}

main {
	position: fixed;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	background: green;
	text-align: center;
	width: 100%;
	height: 100%;
	overflow: auto;
}

main > * {
	text-align: left;
}

#joinForm > div {
	text-align: center;
}

#matches {
	margin: 10px auto;
}

#matches:empty {
	display: none;
}

#joinForm, #matches, #rules > div {
	background: white;
	border: 2px solid gray;
}

#rules {
	margin-top: 10px;
	text-align: center;
}

#rules > div {
	width: 50vw;
	padding: 10px;
	display: inline-block;
	text-align: justify;
}

#rules h3, #rules h4 {
	text-align: center;
	margin: 5px auto;
}

#matches {
	min-width: 250px;
}

#joinForm {
	background: white;
	display: inline-block;
	margin-top: 20px;
	padding: 10px;
}

#joinForm select {
	margin-top: 5px;
}

#matches td {
	width: 0;
}

label {
	padding-right: 5px;
}

#floaters {
	position: fixed;
	top: 10px;
	left: 10px;
	font-size: 14pt;
	text-align: left;
}

#error:not(.visible) {
	display: none;
}

#error:before {
	content: "Error: ";
	color: red;
}

#table-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-block;
}

#before, #after {
	height: 40px;
	padding-left: 7px;
	font: 30px monospace;
	text-align: left;
}

#before span.white, #after span.white {
	color: white;
	text-shadow: 1px 1px 0px black, 1px -1px 0px black, -1px 1px 0px black, -1px -1px 0px black;
}

#before span.black, #after span.black {
	color: black;
	text-shadow: 1px 1px 0px white, 1px -1px 0px white, -1px 1px 0px white, -1px -1px 0px white;
}

#board {
	border-spacing: 0;
	border: 2px solid gray;
	background: gray;
}

/* l m a o */
#board.inverted, #board.inverted td {
	transform: rotate(180deg);
}

#board td {
	text-align: center;
	vertical-align: middle;
	width: 50px;
	height: 50px;
	border: 1px solid gray;
	font: 30px monospace;
	user-select: none;
}

#board:not(.inverted) td.selected-piece {
	transform: scale(0.8);
}

#board.inverted td.selected-piece {
	transform: scale(0.8) rotate(180deg);
}

#board td.white {
	background: white;
}

#board td.black {
	background: black;
}

#board td.white-piece {
	color: white;
	text-shadow: 1px 1px 0px black, 1px -1px 0px black, -1px 1px 0px black, -1px -1px 0px black;
}

#board td.black-piece {
	color: black;
	text-shadow: 1px 1px 0px white, 1px -1px 0px white, -1px 1px 0px white, -1px -1px 0px white;
}

#board td.possible {
	background: #fe1 !important;
}

#board td.only-move {
	background: purple !important;
}

#board td.active-column.black {
	background: #444;
}

#board td.active-column.white {
	background: #bbb;
}

#board td.black.last-move {
	background: #600;
}

#board td.white.last-move {
	background: #600;
	/* background: #b00; */
}

.hidden {
	background: black;
	color: transparent;
}

.hidden:not(:hover) .sep::after {
	color: transparent;
}

.hidden:hover {
	background: rgba(0, 0, 0, 0.2);
	color: inherit;
}

.sep::after {
	content: " / ";
	color: gray;
}