/* https://css-tricks.com/snippets/css/complete-guide-grid/ */
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
:root {
	--action-color: #ffffff;
	--action-background-color: #ff7700;
}

body {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	background-color: #111111;
	color: #bcbcbc;
	font-family: verdana;
	height: 100%;
}

form {
	height: 100%;
}

.main {
	display: grid;
	width: 100%;
	height: 100%;
	grid-template-columns: 100%;
	grid-template-rows: min-content minmax(0, 1fr) min-content min-content;
}

.header {
	background-color: #222222;
}

.title {
	font-size: 2em;
	text-align: center;
}

.gamestatus-solution {
	font-size: 2em;
	text-align: center;
}

.gamestatus-info{
	font-size: 1.5em;
	text-align: center;
}

.body {
	background-color: #000000;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.body-room {
	background-color: #000000;
	display: grid;
	width: 100%;
	height: 100%;
	grid-template-columns: 100%;
	grid-template-rows: auto min-content;
}

.actionbar {
	background-color: #222222;
	display: flex;
	flex-direction: row;
}

.menu {
	background-color: #222222;
	display: flex;
	flex-direction: row;
}

input {
	border-radius: 1em;
	font-size: 1.5em;
	text-align: center;
	padding: 0.2em;
	margin: 0.2em;
}

.label {
	text-align: center;
	font-size: 1.5em;
	padding: 0.2em;
	margin: 0.2em;
}

.button {
	text-align: center;
	font-size: 1.5em;
	color: var(--action-color);
	background-color: var(--action-background-color);
	padding: 0.4em;
	margin: 0.2em;
	border-radius: 1em;
}

.icon {
	flex-grow: 1;
	text-align: center;
	font-size: 1.5em;
	color: var(--action-color);
	background-color: var(--action-background-color);
	padding: 0.4em;
	margin: 0.2em;
	border-radius: 1em;
}

.chat {
	overflow: auto;
}

.chat-wrapper {
	padding: 0.5em;
	background-color: #666666;
	border-radius: 1em 1em 1em 0;
	margin: 0.5em;
}

.chat-name {
	font-size: 0.75em;
	color: #dddddd;
}

.chat-content {
	font-size: 1em;
	color: #eeeeee;
}

.chat-timestamp {
	text-align: right;
	font-size: 0.75em;
	color: #dddddd;
}

.question-open {
	background-color: #000077;
}

.question-yes {
	background-color: #007700;
}

.question-no {
	background-color: #770000;
}

.question-error {
	background-color: #444444;
}

.chat-round-started {
	text-align: center;
	font-size: 1em;
	color: #ffffff;
	background-color: #000000;
}

.chat-message {
	text-align: center;
	font-size: 1em;
	color: #ffffff;
	background-color: #000000;
}

.chat-join {
	text-align: center;
	font-size: 0.75em;
}

.guess-success {
	background-color: #00AA00;
}

.guess-fail {
	background-color: #AA0000;
}