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

		body {
			background-color: var(--dark-gray);
			position: absolute;
			margin: 0;
			padding: 0;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			font-family: var(--font-0);
			font-size: 0;
		}

		body[grabbing=true] {
			cursor: grabbing;
		}

		body[grabbing=true] * {
			cursor: grabbing;
		}

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

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

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

		* {
			scrollbar-width: none;
			scrollbar-height: none;
		}

	/* headings */
		h1 {
			float: left;
			width: 100%;
			height: var(--huge-font-size);
			padding: 0;
			margin: 0;
			line-height: 1;
			font-size: var(--huge-font-size);
			font-weight: bold;
			color: var(--light-gray);
			font-family: var(--font-0);
			text-transform: uppercase;
			margin-bottom: var(--medium-gap-size);
		}

		h2 {
			float: left;
			width: 100%;
			padding: var(--medium-gap-size) 0;
			margin: 0 0 var(--medium-gap-size) 0;
			line-height: 1;
			font-size: var(--large-font-size);
			font-weight: bold;
			color: var(--light-gray);
			border-bottom: var(--border-size) solid var(--light-gray);
			font-family: var(--font-0);
			text-transform: uppercase;
			user-select: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			-o-user-select: none;
		}

		h3 {
			float: left;
			width: 100%;
			height: var(--medium-font-size);
			padding: var(--medium-gap-size) 0;
			margin: 0;
			line-height: 1;
			font-size: var(--medium-font-size);
			font-weight: bold;
			color: var(--medium-gray);
			font-family: var(--font-0);
		}

		h4 {
			float: left;
			width: 100%;
			padding: var(--small-gap-size) 0 0 0;
			margin: 0;
			line-height: 1;
			font-size: var(--small-font-size);
			font-weight: bold;
			color: var(--medium-gray);
			font-family: var(--font-0);
		}

	/* form */
		form {
			float: left;
			width: 100%;
		}

	/* input */
		input {
			float: left;
			border-radius: var(--border-radius);
			width: calc(100% - 4 * var(--small-gap-size));
			padding: var(--small-gap-size) calc(2 * var(--small-gap-size));
			height: var(--medium-font-size);
			font-size: var(--medium-font-size);
			color: var(--dark-gray);
			background-color: var(--light-gray);
			margin: 0;
			outline: none;
			overflow: hidden;
			border: none;
			font-family: var(--font-0);
			text-align: left;
			text-transform: uppercase;
			transition: var(--transition-time);
		}

		input:focus {
			box-shadow: 0 0 var(--shadow-size) var(--dark-gray);
		}

		input[readonly], button[disabled], select[readonly] {
			user-select: none !important;
			-webkit-user-select: none !important;
			-moz-user-select: none !important;
			-ms-user-select: none !important;
			-o-user-select: none !important;
			border-color: transparent;
			box-shadow: none !important;
			background-color: transparent;
			pointer-events: none;
		}

	/* button */
		button {
			border-radius: var(--border-radius);
			width: 100%;
			padding: var(--small-gap-size);
			height: calc(var(--medium-font-size) + 2 * (var(--small-gap-size)));
			font-size: var(--medium-font-size);
			background-color: var(--dark-gray);
			color: var(--light-gray);
			font-weight: bold;
			margin: var(--small-gap-size) 0;
			line-height: 1;
			border: none;
			cursor: pointer;
			overflow: hidden;
			outline: none;
			user-select: none !important;
			-webkit-user-select: none !important;
			-moz-user-select: none !important;
			-ms-user-select: none !important;
			-o-user-select: none !important;
			font-family: var(--font-0);
			text-transform: uppercase;
			transition: var(--transition-time);
		}

		button:hover, button:focus {
			box-shadow: 0 0 var(--shadow-size) var(--dark-gray);
		}

	/* select */
		select {
			border-radius: var(--border-radius);
			width: 100%;
			padding: var(--small-gap-size);
			height: calc(var(--medium-font-size) + 2 * var(--small-gap-size));
			font-size: var(--medium-font-size);
			background-color: var(--light-gray);
			color: var(--dark-gray);
			line-height: 1;
			border: none;
			cursor: pointer;
			overflow: hidden;
			outline: none;
			user-select: none !important;
			-webkit-user-select: none !important;
			-moz-user-select: none !important;
			-ms-user-select: none !important;
			-o-user-select: none !important;
			font-family: var(--font-0);
			text-transform: uppercase;
			transition: var(--transition-time);
		}

		select:hover, select:focus {
			box-shadow: 0 0 var(--shadow-size) var(--dark-gray);
		}

	/* link */
		a {
			display: inline-block;
			font-size: var(--small-font-size);
			font-weight: bold;
			text-decoration: none;
			outline: none;
			color: var(--medium-blue);
			cursor: pointer;
			vertical-align: middle;
			font-family: var(--font-0);
		}

		a:hover, a:focus {
			text-shadow: 0 0 var(--shadow-size) var(--medium-blue);
			text-decoration: none;
		}

		a:visited {
			color: var(--medium-blue);
			text-decoration: none;	
		}

	/* label */
		label {
			float: left;
			width: 100%;
			margin-bottom: var(--small-gap-size);	
		}

		label:last-child {
			margin-bottom: 0;
		}

		label span {
			float: left;
			font-size: var(--medium-font-size);
			display: inline-block;
			width: calc(8 * var(--medium-font-size));
			height: var(--medium-font-size);
			text-transform: uppercase;
			color: var(--light-gray);
			padding: var(--small-gap-size);
			user-select: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			-o-user-select: none;
		}

		label span ~ select {
			display: inline-block;
			width: calc(100% - 8 * var(--medium-font-size) - 2 * var(--small-gap-size));
		}

		label span ~ input {
			display: inline-block;
			width: calc(100% - 8 * var(--medium-font-size) - 6 * var(--small-gap-size));
		}

	/* other */
		audio {
			height: 0;
			width: 0;
			margin: 0;
			padding: 0;
			font-size: 0;
			opacity: 0;
			pointer-events: none;
			display: none;
		}

/*** error / toast ***/
	#toast {
		position: absolute;
		top: var(--large-gap-size);
		left: 50%;
		transform: translateX(-50%);
		width: auto;
		text-align: center;
		font-size: var(--medium-font-size);
		padding: var(--medium-gap-size);
		color: var(--light-gray);
		background-color: var(--medium-blue);
		border-radius: var(--border-radius);
		box-shadow: 0 0 var(--shadow-size) var(--light-gray);
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		z-index: 1000;
		overflow: hidden;
		transition: var(--transition-time);
	}

	/* colors */
		#toast[success=true] {
			background-color: var(--medium-green);
		}

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

/*** status ***/
	/* visibility */
		*[visibility=false] {
			pointer-events: none;
			opacity: 0 !important;
			font-size: 0px !important;
			margin: 0px !important;
			padding: 0px !important;
			border: 0px !important;
		}

		*[outoffocus=true] {
			pointer-events: none;
			filter: blur(var(--blur-size));
		}