@media all and (max-width: 900px) {
	html {
		font-size: .9em;
	}
	.sidebox {
		width: 75vw;
	}
	#gui-points {
		font-size: 1.5em;
	}
	#gui-points th {
		width: 80px;
	}
	#gui-stamina {
		top: 44px;
		width: 120px;
	}
	#gui-health {
		top: 14px;
	}
	#gui-controls li img {
		width: 65px;
		height: 65px;
	}
	#chat-input-container {
		width: calc(100vw - 340px);
	}
	#gui-minimap-canvas {
		top: 6px;
		transform-origin: top right;
		transform: scale(.75);
	}
	#gui-chat {
		left: 12px;
		top: 107px;
		width: 250px;
		height: calc(100vh - 4vh - 205px);
	}
	#gui-options {
		top: 64px;
		left: 6px;
		right: initial;
		/* right attribute needs to be reset, otherwise div would be stretched all over the screen, eventhough this isn't
		visible to the viewer, it prevents from shooting in case the mouse cursor is over the div's area */
	}
	#lobby-table th:last-child {
		width: 6em;
	}
	#info-button {
		display: none;
	}
	#menu-box {
		flex-direction: column;
	}
	#sidebar {
		order: -1;
		min-width: none;
	}
	#sidebar > div { display: inline-block; }
}
@media all and (max-width: 640px) {
	html {
		font-size: .8em;
	}
	button {
		min-width: 74px;
		padding: 3px;
	}
	.sidebox {
		max-width: initial;
		width: 100vw;
	}
	#gui-warmup {
		font-size: 1.8em;
		padding-left: 5%;
		padding-right: 5%;
	}
	#gui-points {
		font-size: 1.25em;
	}
	#gui-chat {
		top: 95px;
		height: calc(100vh - 4vh - 193px);
	}
	#gui-points th {
		width: 40px;
	}
	#gui-controls li img {
		width: 50px;
		height: 50px;
	}
	#gui-chat-input-container {
		width: calc(100vw - 270px);
	}
	#gui-minimap-canvas {
		transform: scale(.6);
	}
	#gui-options {
		top: 60px;
	}
	#lobby-table th:last-child {
		width: 5.2em;
	}
}