/*** variables ***/
	:root {
		--font: Orbitron, sans-serif;
		--borderRadius: 10px;
		--magenta-0: #ffcce6;
		--magenta-1: #ff66b3;
		--magenta-2: #e60073;
		--magenta-3: #99004d;
		--magenta-4: #33001a;
		--red-0: #fab7b7;
		--red-1: #f66f6f;
		--red-2: #d80e0e;
		--red-3: #7c0808;
		--red-4: #300303;
		--brown-0: #e09b06;
		--brown-1: #ae7804;
		--brown-2: #7c5603;
		--brown-3: #513802;
		--brown-4: #191101;
		--browngray-0: #d5cac3;
		--browngray-1: #b6a196;
		--browngray-2: #a18778;
		--browngray-3: #786154;
		--browngray-4: #4f4037;
		--orange-0: #fde4ce;
		--orange-1: #f9ae6c;
		--orange-2: #f68523;
		--orange-3: #ab5407;
		--orange-4: #442103;
		--beige-0: #f7f4ed;
		--beige-1: #e0d3b8;
		--beige-2: #c1a871;
		--beige-3: #91773f;
		--beige-4: #6a572f;
		--yellow-0: #f6f4d5;
		--yellow-1: #e5dd80;
		--yellow-2: #d8cb41;
		--yellow-3: #beb227;
		--yellow-4: #7f771a;
		--green-0: #a9d3ab;
		--green-1: #539e57;
		--green-2: #1a661e;
		--green-3: #074f0b;
		--green-4: #053007;
		--greengray-0: #d3ded4;
		--greengray-1: #99b29b;
		--greengray-2: #6a8c6c;
		--greengray-3: #4d664e;
		--greengray-4: #374938;
		--cyan-0: #e6ffff;
		--cyan-1: #b3ffff;
		--cyan-2: #33ffff;
		--cyan-3: #00cccc;
		--cyan-4: #008080;
		--cerulean-0: #dae7f1;
		--cerulean-1: #90b8d5;
		--cerulean-2: #4689b9;
		--cerulean-3: #2b5572;
		--cerulean-4: #1c374a;
		--bluegray-0: #dee9ed;
		--bluegray-1: #adc8d2;
		--bluegray-2: #7ba7b7;
		--bluegray-3: #487484;
		--bluegray-4: #2d4852;
		--blue-0: #d0e0fb;
		--blue-1: #7a9bd3;
		--blue-2: #2b76ef;
		--blue-3: #0b3d8e;
		--blue-4: #04142f;
		--purple-0: #dac0f7;
		--purple-1: #b08bda;
		--purple-2: #7b3dc2;
		--purple-3: #4a2574;
		--purple-4: #180c26;
		--black-0: #e4e6e7;
		--black-1: #a2a7a9;
		--black-2: #6e7477;
		--black-3: #3d4142;
		--black-4: #232526;
		--white-0: #c0dee5;
		--white-1: #cee2e8;
		--white-2: #dcf1f7;
		--white-3: #e3f5f9;
		--white-4: #f9fdff;
	}

/*** main ***/
	/* elements */
		body {
			position: fixed;
			top: 0px;
			left: 0px;
			height: 100vh;
			width: 100vw;
			padding: 0px;
			margin: 0px;
			border: 0px;
			overflow: hidden;
			background-color: var(--white-1);
			color: var(--black-4);
			font-family: var(--font);
			font-weight: bold;
			font-size: 30px;
			box-shadow: 0px 0px 25px var(--black-4) inset;
		}

		a, a:visited, a:hover, a:focus {
			text-decoration: none;
			font-weight: bold;
			outline: none;
			cursor: pointer;
			text-transform: uppercase;
			color: var(--blue-2);
		}

		a:hover, a:focus {
			text-shadow: 0px 0px 50px var(--black-4);
		}

		input, button, select, textarea {
			font-weight: bold;
			font-size: 30px;
			font-family: var(--font);
			outline: none;
			cursor: pointer;
			border: 5px solid var(--black-4);
			border-radius: var(--borderRadius);
			-webkit-appearance: none;
			-moz-appearance: none;
			overflow: hidden;
			color: var(--black-4);
			background-color:  var(--white-4);
			padding: 0px;
			text-transform: uppercase;
			box-shadow: 0px 0px 10px var(--black-4);
		}

		input, button, select {
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		button {
			color:  var(--white-4);
			background-color: var(--black-4);
			vertical-align: middle;
		}

		button:hover, button:focus, select:focus, textarea:focus, input:focus {
			box-shadow: 0px 0px 50px var(--black-4);
		}

		select:-moz-focusring {
			color: transparent;
			text-shadow: 0 0 0 var(--black-4);
		}

	/* conditions */
		.hidden {
			display: none;
			pointer-events: none;
		}

		.invisible {
			opacity: 0;
			pointer-events: none;
			transition: 2s;
		}

	/* sections */
		#error {
			position: fixed;
			top: 2%;
			left: 50%;
			transform: translateX(-50%);
			width: 80vw;
			z-index: 5;
			padding: 10px;
			box-shadow: 0px 0px 25px var(--red-3);
			background: linear-gradient(var(--red-3), var(--red-4));		
			opacity: 0;
			color: var(--white-4);
			font-size: 100%;
			text-align: center;
			pointer-events: none;
			border-radius: var(--borderRadius);
		}

/*** vendor prefixes ***/
	/* scrollbars */
		::-webkit-scrollbar {
			width: 0 !important;
			height: 0 !important;
		}

		::-moz-scrollbar {
			width: 0 !important;
			height: 0 !important;
		}

		::-ms-scrollbar {
			width: 0 !important;
			height: 0 !important;
		}

		::-o-scrollbar {
			width: 0 !important;
			height: 0 !important;
		}

	/* placeholders */
		::-webkit-input-placeholder {
			font-weight: bold;
			font-family: var(--font);
			text-align: center;
			color: var(--black-2);
		}

		::-moz-placeholder {
			font-weight: bold;
			font-family: var(--font);
			text-align: center;
			color: var(--black-2);
		
		}

		::-o-input-placeholder {
			font-weight: bold;
			font-family: var(--font);
			text-align: center;
			color: var(--black-2);
		}

		:-ms-input-placeholder {
			font-weight: bold;
			font-family: var(--font);
			text-align: center;
			color: var(--black-2);
		}


/*** page ***/
	html, body {
		width: 100%;
		height: 100%;
		background: linear-gradient(var(--cerulean-3), var(--cerulean-4));
	}

	/* container */
		#container {
			position: absolute;
			height: auto;
			min-width: 50%;
			max-width: 90%;
			top: 50%;
			left: 50%;
			padding: 5%;
			transform: translateX(-50%) translateY(-50%);
			text-align: center;
			z-index: 2;
			background: transparent;
			user-select: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			-o-user-select: none;
		}

		#canvas {
			position: absolute;
			bottom: 0px;
			left: 50%;
			transform: translateX(-50%);
			min-width: 200vh;
			min-height: 100vh;
			width: 100vw;
			height: 50vw;
		}

/*** form ***/
	/* title */
		#title {
			float: left;
			width: 100%;
			text-align: center;
			line-height: 1;
			font-size: 125%;
			text-transform: uppercase;
			cursor: default;
			color: var(--black-4);
		}

	/* links */
		#links {
			float: left;
			width: 100%;
			margin: 5% 0% 5% 0%;
			text-align: center;
			line-height: 1;
			font-size: 65%;
		}

	/* inputs */
		#gameCode {
			float: left;
			width: calc(60% - 10px);
			height: 40px;
			padding: 5px 5px 5px 5px;
			text-align: center;
			line-height: 1;
			font-size: 100%;
			border-radius: var(--borderRadius) 0px 0px var(--borderRadius);
			border: 0px;
		}

	/* buttons */
		#createGame {
			float: left;
			display: block;
			width: 100%;
			height: 50px;
			text-align: center;
			line-height: 1;
			font-size: 100%;
			padding: 5px 5px 5px 5px;
			margin: 5% 0% 5% 0%;
			border-radius: var(--borderRadius);
			border: 0px;
		}

		#joinGame {
			float: left;
			width: 40%;
			text-align: center;
			line-height: 1;
			font-size: 100%;
			height: 50px;
			padding: 5px 5px 5px 5px;
			border-radius: 0px var(--borderRadius) var(--borderRadius) 0px;
			border: 0px;
		}

		@-moz-document url-prefix() {
			#joinGame {
				line-height: 1;
			}
		}

/*** j-logo ***/
	#j-logo {
		position: absolute;
		top: 14px;
		right: 8px;
		background-color: transparent;
		background-image: url("https://jamesmayr.com/resources/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 2px #aaaaaa);
	}

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