/*** variables ***/
	:root {
		--font: "Cherry Swash", fantasy;
		--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;
		--race-d: var(--yellow-3);
		--race-e: var(--cerulean-2);
		--race-f: var(--red-1);
		--race-g: var(--purple-1);
		--race-l: var(--greengray-3);
		--agency-s: var(--blue-3);
		--agency-r: var(--green-3);
		--agency-t: var(--orange-3);
		--agency-m: var(--red-3);
	}

/*** main ***/
	/* elements */
		body {
			position: fixed;
			top: 0px;
			left: 0px;
			height: 100vh;
			width: 100vw;
			padding: 0px;
			margin: 0px;
			border: 0px;
			overflow: hidden;
			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;
			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-3);
			background-color: var(--white-4);
			padding: 0px;
			box-shadow: 0px 0px 10px var(--black-2);
		}

		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 20px 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 */
		#message {
			position: fixed;
			top: 2%;
			left: 50%;
			transform: translateX(-50%);
			width: 80vw;
			z-index: 100;
			padding: 10px;
			box-shadow: 0px 0px 20px var(--black-4);
			background-color: var(--black-1);
			opacity: 0;
			color: var(--black-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;
			line-height: 1.25;
			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%;
	}

	/* 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;
		}

/*** form ***/
	/* title */
		#title-outer {
			top: 5vh;
			left: 5vh;
			background-color: var(--white-4);
		}

		#title {
			height: 40vh;
			width: 60vh;
			max-height: 50vw;
			max-width: 75vw;
			background-color: var(--cerulean-3);
			user-select: none;
			cursor: pointer;
			text-shadow: 0px 0px 10px var(--black-4);
			box-shadow: 0px 0px 10px var(--black-2);
			background-image: url("banner.png");
			background-position: center center;
			background-size: cover;
			background-repeat: no-repeat;
		}

		#title-inner {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			width: 80%;
			color: var(--white-4);
			font-size: 0%;
			text-align: center;
		}

		#title:hover, #title:focus {
			box-shadow: 0px 0px 20px var(--black-4);
		}

	/* creator */
		#creator-outer {
			top: 20px;
			right: 100px;
		}

		#creator {
			background-color: var(--black-3);
			background-image: url("j.png");
			background-position: center center;
			background-size: contain;
			background-repeat: no-repeat;
			left: -10px;
			height: 60px;
			width: 90px;
			border-radius: var(--borderRadius) 0px 0px var(--borderRadius);
			box-shadow: 0px 0px 10px var(--black-2);
		}

		#creator-outer .flag-pole {
			left: 80px;
		}

		#creator:hover, #creator:focus {
			box-shadow: 0px 0px 20px var(--black-4);
		}	

	/* new */
		#new-outer {
			position: absolute;
			top: calc(50vh);
			left: 15vw;
		}

		#createGame {
			position: absolute;
			top: 0px;
			left: 0px;
			width: calc(30vw + 15px);
			height: 135px;
			float: left;
			text-align: center;
			line-height: 1;
			font-size: 100%;
			padding: 5px 5px 5px 0px;
			border-radius: 0px var(--borderRadius) var(--borderRadius) 0px;
			border: 0px;
			background-color: var(--green-2);
		}

	/* join */
		#join-outer {
			position: absolute;
			top: calc(50vh - 150px);
			right: 40vw;
		}

		#name {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 30vw;
			height: 40px;
			padding: 5px;
			text-align: center;
			line-height: 1;
			font-size: 100%;
			border-radius: 0px var(--borderRadius) var(--borderRadius) 0px;
			border-width: 5px 5px 5px 0px;
			background-color: var(--red-0);
		}
		
		#gameCode {
			position: absolute;
			top: 70px;
			left: 0px;
			width: 30vw;
			height: 40px;
			padding: 5px;
			text-align: center;
			line-height: 1;
			font-size: 100%;
			border-radius: 0px var(--borderRadius) var(--borderRadius) 0px;
			border-width: 5px 5px 5px 0px;
			background-color: var(--yellow-0);
		}

		#joinGame {
			position: absolute;
			top: 140px;
			left: 0px;
			width: calc(30vw + 15px);
			height: 60px;
			text-align: center;
			line-height: 1;
			font-size: 100%;
			padding: 5px 5px 5px 0px;
			border-radius: 0px var(--borderRadius) var(--borderRadius) 0px;
			border: 0px;
			background-color: var(--blue-2);
		}

/*** flags ***/
	#flags-background {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: -1;
		filter: blur(1.5px);
	}

	#flags-background .flag-outer {
		position: absolute;
	}

	#flags-background .flag {
		width: 150px;
		height: 100px;
	}

	/* components */
		.flag-outer {
			position: absolute;
			height: auto;
			width: auto;
		}

		.flag-pole {
			position: absolute;
			left: -10px;
			top: -5px;
			width: 10px;
			border-radius: 5px;
			background-color: var(--black-4);
			height: 150vh;
			box-shadow: 0px 0px 10px var(--black-4);
		}

		.flag {
			position: absolute;
			top: 0px;
			left: 0px;
			background-color: var(--black-4);
			border-radius: 0px var(--borderRadius) var(--borderRadius) 0px;
			pointer-events: initial;
		}

/*** mobile ***/
	@media screen and (max-width: 800px) {
		#creator-outer {
			top: 10px;
			right: 90px;
		}

		#new-outer {
			top: 50vh;
		}

		#join-outer {
			top: calc(50vh - 65px);
			right: 42vw;
		}
	}