/*** page ***/
	html {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	body {
		position: absolute;
		top: 0px;
		left: 0px;
		overflow: hidden;
		width: 100%;
		height: 100%;
		background-color: #333333;
		margin: 0px;
		padding: 0px;
		border: 0px;
	}

/*** title ***/
	#title {
		position: absolute;
		top: 50%;
		left: 50%;
		font-family: monospace;
		color: white;
		transform: translateX(-50%) translateY(-50%);
		text-align: center;
		font-size: 35px;
		font-weight: bold;
	}

	@media screen and (max-width: 600px) {
		#title {
			top: 15%;
		}
	}

/*** form ***/
	#form {
		position: absolute;
		top: 50%;
		left: 50%;
		height: 80vw;
		width: 80vw;
		max-height: 80vh;
		max-width: 80vh;
		transform: translateX(-50%) translateY(-50%);
		box-shadow: 0px 0px 20px #dddddd;
		border-radius: 100%;
		cursor: none;
		overflow: hidden;
	}

	/* buttons */
		#createGame {
			position: absolute;
			left: 0px;
			top: 50%;
			transform: translateX(-50%) translateY(-50%);
			border: 0px;
			border-radius: 100%;
			font-family: monospace;
			color: white;
			box-shadow: 0px 0px 10px red;
			text-align: right;
			background-color: red;
			font-size: 30px;
			height: 50%;
			width: 50%;
			padding: 0px 10px 0px 0px;
			cursor: pointer;
			user-select: none;
			outline: none;
		}

		#joinGame {
			position: absolute;
			right: 0px;
			top: 50%;
			transform: translateX(50%) translateY(-50%);
			border: 0px;
			border-radius: 100%;
			font-family: monospace;
			color: white;
			box-shadow: 0px 0px 10px blue;
			text-align: left;
			background-color: blue;
			font-size: 30px;
			height: 50%;
			width: 50%;
			padding: 0px 0px 0px 10px;
			cursor: pointer;
			user-select: none;
			outline: none;
		}

		#gameCode {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			border-radius: 10px;
			border: 0px;
			color: blue;
			font-family: monospace;
			font-weight: bold;
			text-align: center;
			font-size: 30px;
			padding: 5px;
			cursor: pointer;
			outline: none;
			margin-top: 10px;
			width: 100px;
		}

		#createGame:hover, #createGame:focus, #joinGame:hover, #joinGame:focus, #gameCode:hover, #gameCode:focus {
			box-shadow: 0px 0px 20px #dddddd;
		}

		@media screen and (max-width: 600px) {
			#createGame, #joinGame {
				height: 75%;
				width: 75%;
			}
		}

	/* message */
		#message {
			position: absolute;
			top: 65%;
			left: 50%;
			text-align: center;
			transform: translateX(-50%) translateY(-50%);
			max-width: 40%;
			max-height: 10%;
			font-family: monospace;
			color: white;
			font-size: 25px;
		}

		@media screen and (max-width: 600px) {
			#message {
				top: 50%;
				font-size: 15px;
				max-width: 20%;
				max-height: 100%;
			}
		}

/*** j-logo ***/
	#j-logo {
		position: absolute;
		top: 14px;
		right: 8px;
		background-color: transparent;
		background-image: url("/main/j.png");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		height: 32px;
		width: 32px;
		cursor: pointer;
		z-index: 1000;
		outline: none;
		filter: drop-shadow(0px 0px 5px #333333);
	}

	#j-logo:hover, #j-logo:focus {
		filter: drop-shadow(0px 0px 10px #dddddd);
	}