/*** mobile ***/
	:root {
		--multiplier: 1;
	}
	
	@media screen and (max-width: 800px) {
		:root {
			--multiplier: 0.5;
		}
	}

/*** 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 ***/
	/* headings & text */
		h1 {
			font-size: var(--large-font-size);
			font-family: var(--font-0);
			margin: var(--medium-gap-size) 0;
			-webkit-user-select: none !important;
			-moz-user-select: none !important;
			-ms-user-select: none !important;
			-o-user-select: none !important;
			user-select: none !important;
		}

		h2 {
			font-size: var(--medium-font-size);
			font-family: var(--font-0);
			margin: var(--small-gap-size) 0;
			text-transform: uppercase;
			-webkit-user-select: none !important;
			-moz-user-select: none !important;
			-ms-user-select: none !important;
			-o-user-select: none !important;
			user-select: none !important;
		}

		h3 {
			font-size: var(--small-font-size);
			font-family: var(--font-0);
			margin: var(--large-gap-size) 0 var(--small-gap-size) 0;
			text-transform: uppercase;
			-webkit-user-select: none !important;
			-moz-user-select: none !important;
			-ms-user-select: none !important;
			-o-user-select: none !important;
			user-select: none !important;
		}

		h4 {
			-webkit-user-select: none !important;
			-moz-user-select: none !important;
			-ms-user-select: none !important;
			-o-user-select: none !important;
			user-select: none !important;
		}

		p {
			
		}

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

	/* inputs */
		input {
			box-sizing: border-box;
			border: none;
			border-radius: var(--border-radius);
			background: var(--light-gray);
			font-size: var(--medium-font-size);
			color: var(--dark-gray);
			font-family: var(--font-0);
			outline: none;
			padding: var(--medium-gap-size);
			line-height: 1;
			height: calc(2 * var(--medium-gap-size) + var(--medium-font-size));
			vertical-align: top;
			-webkit-appearance: none;
			transition: var(--transition-time);
			text-align: center;
		}

		input:focus, input:hover {
			box-shadow: 0 0 0 var(--border-size) var(--light-blue) !important;
		}

		input[readonly], input[disabled], button[disabled], a[disabled], select[disabled] {
			-webkit-user-select: none !important;
			-moz-user-select: none !important;
			-ms-user-select: none !important;
			-o-user-select: none !important;
			user-select: none !important;
			pointer-events: none !important;
		}

		input[type="checkbox"] {
			cursor: pointer;
			margin: 0;
			min-width: var(--medium-font-size);
			height: var(--medium-font-size);
			background: var(--light-gray) !important;
			margin: var(--medium-gap-size) 0 0 0;
			-webkit-appearance: none;
			border-radius: var(--border-size);
			border: var(--border-size) solid var(--light-gray);
			outline: none;
			padding: 0;
		}

		input[type="checkbox"]:not([disabled]):focus, input[type="checkbox"]:not([disabled]):hover {
			box-shadow: 0 0 0 var(--border-size) var(--light-blue) !important;
			filter: brightness(var(--hover-brightness));
		}

		input[error], select[error] {
			background-color: var(--medium-red);
			color: var(--light-gray);
		}

	/* button */
		button, .pseudo-button {
			box-sizing: border-box;
			border: none;
			border-radius: var(--border-radius);
			background: var(--dark-gray);
			font-size: var(--medium-font-size);
			height: calc(var(--medium-font-size) + 2 * var(--medium-gap-size));
			width: calc(var(--medium-font-size) + 2 * var(--medium-gap-size));
			text-align: center;
			color: var(--light-gray);
			font-family: var(--font-0);
			outline: none;
			padding: var(--medium-gap-size);
			cursor: pointer;
			text-transform: uppercase;
			line-height: 1;
			-webkit-user-select: none !important;
			-moz-user-select: none !important;
			-ms-user-select: none !important;
			-o-user-select: none !important;
			user-select: none !important;
			display: inline-block;
			vertical-align: bottom;
			transition: var(--transition-time);
		}

		button:not([disabled]):hover, button:not([disabled]):focus, button:not([disabled]):focus-within, .pseudo-button:not([disabled]):hover, .pseudo-button:not([disabled]):focus, .pseudo-button:not([disabled]):focus-within {
			filter: brightness(var(--hover-brightness));
			box-shadow: 0 0 0 var(--border-size) var(--light-blue);
		}

	/* select */
		select {
			border: none;
			border-radius: var(--border-radius);
			background: var(--light-gray);
			font-size: var(--medium-font-size);
			color: var(--dark-gray);
			font-family: var(--font-0);
			outline: none;
			padding: 0 var(--medium-gap-size);
			height: calc(var(--medium-font-size) + 2 * var(--medium-gap-size));
			cursor: pointer;
			line-height: 1;
			vertical-align: top;
			-webkit-appearance: none;
			transition: var(--transition-time);
		}

		select:not([disabled]):hover, select:not([disabled]):focus {
			filter: brightness(var(--hover-brightness));
			box-shadow: 0 0 0 var(--border-size) var(--light-blue);
		}

	/* link */
		a, a:visited {
			font-family: var(--font-family);
			color: var(--light-blue);
			font-size: var(--medium-font-size);
			text-decoration: none;
			cursor: pointer;
			vertical-align: bottom;
			transition: var(--transition-time);
		}

		a:hover, a:focus {
			color: var(--light-blue);
			filter: brightness(var(--hover-brightness));
			text-shadow: 0 0 var(--shadow-size) var(--light-blue);
		}

	/* label */
		label {
			width: auto;
			display: inline-block;
			outline: none;
		}

	/* details */
		details summary::marker {
			display: none;
		}

		details summary {
			cursor: pointer;
			list-style-type: none;
			outline: none;
		}

		details summary:hover, details summary:focus {
			filter: brightness(var(--hover-brightness));
			box-shadow: 0 0 0 var(--border-size) var(--light-blue);
		}

		details summary::-webkit-details-marker {
			display: none;
		}

	/* section */
		section {
			width: 100%;
			float: left;
			padding-bottom: var(--large-gap-size);
			border-bottom: var(--border-size) solid var(--medium-gray);
			margin-bottom: var(--large-gap-size);
		}

/*** 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) var(--large-gap-size);
		color: var(--light-gray);
		background-color: var(--light-blue);
		border-radius: var(--border-radius);
		box-shadow: 0 0 var(--shadow-size) var(--light-gray);
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
		z-index: 10000;
		line-height: 1;
		overflow: hidden;
		transition: var(--transition-time);
	}

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

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

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