html, body {
	margin: 0px;
}
.home-input {
	border: 5px solid black;
	border-radius: 5px;
	width: 55vw;
	text-align: center;
	margin: 5px;
	padding: 10px;
	font-size: 20px;
	background-color: white;
	color: black;
	box-sizing: border-box;
	text-transform:uppercase
}
.home-input:focus {
	outline: 0;
}

.home-button {
	border: 5px solid black;
	border-radius: 5px;
	width: 55vw;
	text-align: center;
	margin: 5px;
	padding: 10px;
	font-size: 20px;
	background-color: white;
	color: black;
	box-sizing: border-box;
	cursor: pointer;
	text-transform:uppercase
}
.home-button:focus {
	outline: 0;
}
.home-button:disabled {
	cursor: not-allowed;
	background-color: lightgrey;
}
.statusdiv {
	display: inline-block;
	width: calc(100vw - 45px);
	height: calc(10vh - 10px);
	border: 5px solid black;
	box-sizing: border-box;
	margin: 10px;
	margin-bottom: 0px;
	padding: 5px;
}
.roomsdiv {
	display: inline-block;
	width: calc(25vw - 20px);
	height: calc(90vh - 25px);
	border: 5px solid black;
	box-sizing: border-box;
	margin: 10px;
	padding: 5px;
	transform: translate(0px, -10px);
}
.gamediv {
	display: inline-block;
	width: calc(75vw - 40px);
	height: calc(90vh - 25px);
	border: 5px solid black;
	box-sizing: border-box;
	margin: 10px;
	margin-left: 0px;
	padding: 5px;
	transform: translate(0px, -10px);
	vertical-align: top;
}
.vr {
	display: inline-block;
	width: 0px;
	height: calc(100% + 10px);
	border: 2.5px solid black;
	transform: translate(0px, -10px);
	margin: 0px;
}
.area {
    display: inline-block;
	border: 5px solid black;
	box-sizing: border-box;
	margin: 10px;
	margin-top: 0px;
	padding: 5px;
	cursor: pointer;
	width: calc(25vw - 70px);
	height: calc(25vw - 70px);
}
.active-area {
	border: 5px solid #2f98fa;
}
.grid-container {
	display: grid;
	grid-template-columns: auto auto auto auto auto auto auto auto;
	width: calc(90vh - 65px);
}
.checkerbox {
	border: 1px solid white;
	cursor: pointer;
	box-sizing: border-box;
	padding: 10%;
}

.checkerbox-black {
	background-color: #444343;
}
.checkerbox-red {
	background-color: #f36363;
}
.checkerpiece {
	width: calc(100%);
	height: calc(100%);
	border-radius: 50%;
}
.checkerpiece-red {
	background-color: black;
}
.checkerpiece-black {
	background-color: red;
}