/*** elements ***/
	html, body {
		height: 100%;
		width: 100%;
		margin: 0;
		padding: 0;
		background: var(--dark-gray);
		font-size: 0;
		font-family: var(--font-1);
		line-height: var(--line-height);
	}

	section {
		display: block;
		margin: calc(var(--gap-size) * 4) auto;
		box-sizing: border-box;
		max-width: var(--max-content-size);
		text-align: center;
	}

	svg {
		fill: currentColor;
		height: 100%;
		width: auto;
		color: var(--light-gray);
	}

	hr {
		width: 100%;
		max-width: var(--max-content-size);
		border: calc(var(--gap-size) / 2) solid var(--medium-dark-gray);
		border-radius: var(--border-radius);
		box-sizing: border-box;
		margin: calc(var(--gap-size) * 8) auto;
	}

	h1 {
		font-size: calc(5 * var(--font-size));
		font-family: var(--font-0);
		color: var(--medium-red);
		margin: calc(var(--gap-size) * 8) 0 0 0;
		text-align: center;
		user-select: none;
	}

	h2 {
		font-size: calc(3 * var(--font-size));
		font-family: var(--font-0);
		color: var(--medium-red);
		margin: calc(var(--gap-size) * 8) 0 calc(var(--gap-size) * 2) 0;
		text-align: center;
		user-select: none;
	}

	p {
		font-size: calc(var(--font-size) * 2);
		font-family: var(--font-1);
		color: var(--medium-light-gray);
		margin: calc(var(--gap-size) * 2);
		text-align: center;
	}

	ul {
		font-size: calc(var(--font-size) * 2);
		font-family: var(--font-1);
		color: var(--medium-light-gray);
		margin: calc(var(--gap-size) * 2);
		text-align: left;
	}

	button {
		background: var(--medium-dark-gray);
		border-radius: var(--border-radius);
		font-size: calc(2 * var(--font-size));
		font-weight: bold;
		color: var(--light-gray);
		font-family: var(--font-1);
		text-align: center;
		padding: var(--gap-size) calc(var(--gap-size) * 2);
		border: none;
		cursor: pointer;
		user-select: none;
		height: calc(var(--font-size) * 2 + var(--gap-size) * 2);
		width: calc(var(--font-size) * 10 + var(--gap-size) * 4);
		line-height: var(--line-height);
		box-sizing: border-box;
		transition: var(--transition-time);
		outline: none;
		text-transform: uppercase;
		vertical-align: top;
	}

		button:focus, button:hover {
			background: var(--light-blue);
		}

		button span {
			vertical-align: top;
		}

	input {
		background: var(--light-gray);
		border-radius: var(--border-radius);
		font-size: calc(2 * var(--font-size));
		font-weight: bold;
		color: var(--dark-gray);
		font-family: var(--font-1);
		text-align: center;
		padding: var(--gap-size) calc(var(--gap-size) * 2);
		border: none;
		height: calc(var(--font-size) * 2 + var(--gap-size) * 2);
		width: calc(var(--font-size) * 10 + var(--gap-size) * 4);
		line-height: var(--line-height);
		box-sizing: border-box;
		transition: var(--transition-time);
		outline: none;
		text-transform: uppercase;
		vertical-align: top;
	}

		input:focus, input:hover {
			background: var(--light-blue);	
		}

/*** specific elements ***/
	#actions-create-ghost {
		border-radius: var(--border-radius) 0 0 var(--border-radius);
	}

	#actions-create-hunters {
		border-radius: 0 var(--border-radius) var(--border-radius) 0;
	}

	#actions-join-code {
		border-radius: var(--border-radius) 0 0 var(--border-radius);
	}

	#actions-join-submit {
		border-radius: 0 var(--border-radius) var(--border-radius) 0;
	}

	#about {
		padding-bottom: calc(var(--font-size) * 5);
	}

		#about span {
			color: var(--light-blue);	
		}

/*** toast ***/
	#toast {
		position: fixed;
		top: calc(2 * var(--gap-size));
		left: 50%;
		transform: translateX(-50%);
		padding: calc(var(--gap-size) + var(--border-size));
		border-radius: var(--border-radius);
		font-family: var(--font-1);
		font-size: calc(var(--font-size) * 2);
		font-weight: bold;
		line-height: var(--line-height);
		width: calc(100% - 4 * var(--gap-size));
		min-height: calc(var(--font-size) + 2 * var(--gap-size) + 2 * var(--border-size));
		height: auto;
		box-sizing: border-box;
		z-index: 100;
		cursor: default;
		user-select: none;
		box-shadow: 0 0 var(--shadow-size) var(--dark-gray);
		color: var(--light-gray);
		background: var(--dark-gray);
		transition: var(--transition-time);
		opacity: 1;
		text-align: center;
		pointer-events: none;
	}

		#toast[success="true"] {
			color: var(--light-gray);
			background: var(--medium-blue);
		}

		#toast[success="false"] {
			color: var(--dark-gray);
			background: var(--medium-red);
		}

		#toast:not([visibility="true"]) {
			opacity: 0;
		}

/*** j-logo ***/
	#j-logo {
		position: absolute;
		top: 14px;
		right: 7px;
		height: 32px;
		width: 32px;
		cursor: pointer;
		color: var(--light-blue);
		z-index: 1000;
		outline: none;
	}

		#j-logo svg {
			fill: currentColor;
			height: 100%;
			width: auto;
			transition: var(--transition-time);
		}

		#j-logo:hover svg, #j-logo:focus svg {
			color: var(--medium-red);
		}

/*** mobile ***/
	@media screen and (max-width: 800px) and (orientation: portrait) {
		h1 {
			font-size: calc(2 * var(--font-size));
		}

		h2 {
			font-size: calc(2 * var(--font-size));
		}

		p, ul {
			font-size: calc(var(--font-size) * 4 / 3);
		}

		#actions-create-ghost, #actions-join-code {
			border-radius: var(--border-radius) var(--border-radius) 0 0;
			text-align: center;
			display: block;
			margin: auto auto;
		}

		#actions-create-hunters, #actions-join-submit {
			border-radius: 0 0 var(--border-radius) var(--border-radius);
			text-align: center;
			display: block;
			margin: auto auto;
		}
	}