@media only screen and (max-width: 599px)  {
	body {
		flex-direction: column-reverse;
	}

	#lobby {
		height: 30%;
		width: 100%;
	}
}

@media only screen and (min-width: 600px) {
	#lobby {
		height: 100%;
		width: 25%;
	}
}

#lobby {
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 12em;
}

.player {
	display: flex;
	font-size: calc(.5vw + .5vh + .5em);
	justify-content: space-between;
	overflow: hidden;
	padding: calc(.5vw + .5vh);
	text-overflow: ellipsis;
}

.point {
	color: black;
	font-size: calc(.8vw + .8vh + .8em);
	position: absolute;
	transition: transform 0.8s ease-in;
	z-index: 1024;
}

@keyframes scoreHighlight {
	0% { transform: scale(1.0) }
	50% { transform: scale(2.0) }
	100% { transform: scale(1.0) }
}

#chat {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	justify-content: start;
	overflow: hidden;
}

#chatMessages {
	flex-grow: 1;
	font-size: calc(.3vw + .3vh + .5em);
	overflow-x: hidden;
	overflow-y: auto;
}

#chatMessages > * {
	margin: calc(.1vw + .1vh + .1em);
}

#chatForm {
	display: flex;
	margin: 0;
	width: 100%;
}

#chatForm > * {
	margin: 0;
}

#chatInput {
	flex-grow: 1;
	min-width: 0;
}

#gameOptions > * {
	margin: 2vw;
}

.hostHelp, .playerHelp {
	text-align: justify;
}

form {
	align-items: stretch;
}

#gameOptionsForm div {
	margin: 2vh;
}

input[type="number"] {
	width: 3em;
}

#invitation {
	width: 35ch;
}

#invitation, #copyButton {
	font-size: smaller;
}

#running {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}

#headlineContainer {
	height: 40%;
	padding-bottom: 5vh;
	margin-left: 5vw;
	margin-right: 5vw;
	padding-top: 5vh;
}

#timeoutDiv {
	width: 100%;
	height: 2vh;
}

#timeoutBar {
	height: 100%;
}

@keyframes timeout {
	0% { background-color: #11aa11; width: 0% }
	50% { background-color: #11aa11; width: 50% }
	80% { background-color: #bbbb11; width: 80% }
	100% { background-color: #aa1111; width: 100% }
}

#gameOverTable {
	padding: calc(0.4em + 0.4vh + 0.8vw);
}

#gameOverTable td {
	padding: calc(0.2em + 0.2vh + 0.4vw);
}
