/*** background ***/
	body {
		background: var(--dark-gray);
	}

	#container {
		display: block;
		margin: var(--large-gap-size) auto 0 auto;
		text-align: center;
		width: calc(40 * var(--medium-font-size) + 2 * var(--medium-gap-size));
		height: calc(100% - 2 * var(--large-gap-size));
		max-width: calc(100vw - var(--medium-gap-size) * 2);
		box-sizing: border-box;
	}

/*** heading ***/
	#heading-outer {
		width: 100%;
		height: calc(var(--medium-gap-size) + var(--large-font-size) * 2.5 + var(--medium-gap-size) + var(--medium-font-size) + 2 * var(--medium-gap-size) + var(--large-gap-size));
		box-sizing: border-box;
		padding: var(--medium-gap-size) var(--medium-gap-size) var(--large-gap-size) var(--medium-gap-size);
	}

	#heading-outer > span {
		font-size: var(--medium-font-size);
		font-family: var(--font-0);
		color: var(--light-gray);
		display: inline-block;
		padding: var(--small-gap-size) var(--medium-gap-size);
		vertical-align: text-bottom;
		user-select: none;
	}

	#heading {
		width: 100%;
		display: block;
		color: var(--light-gray);
		line-height: 1;
		margin: 0 0 var(--medium-gap-size) 0;
		height: calc(var(--large-font-size) * 2.5);
		font-size: 0;
		box-sizing: border-box;
	}

	#heading span {
		font-size: var(--large-font-size);
	}

	#logo {
		height: calc(var(--large-font-size) * 2.5);
		width: calc(var(--large-font-size) * 5);
		background-color: transparent;
		background-image: url(logo.png);
		background-size: calc(var(--large-font-size) * 5);
		background-position: center 40%;
		background-repeat: no-repeat;
		display: inline-block;
		vertical-align: bottom;
		filter: invert(1) drop-shadow(0 0 var(--shadow-size) var(--light-gray));
		color: transparent;
		font-size: 0;
		user-select: none;
	}

	#name-input {
		display: inline-block;
		width: 100%;
		max-width: 100%;
		font-size: var(--medium-font-size);
		padding: var(--medium-gap-size);
		height: calc(var(--medium-font-size) + 2 * var(--medium-gap-size));
		box-sizing: border-box;
		border: none;
	}

	hr {
		width: calc(100% - 2 * var(--medium-gap-size) - var(--border-size));
		margin: 0 var(--medium-gap-size);
	}

/*** actions ***/
	#actions-outer {
		width: 100%;
		height: calc(2 * (var(--medium-font-size) + 2 * var(--medium-gap-size) + var(--large-gap-size)));
		padding: 0 var(--medium-gap-size) var(--large-gap-size) var(--medium-gap-size);
		box-sizing: border-box;
	}

	/* create */
		#create-music-form {
			float: left;
			width: 50%;
			height: calc(var(--medium-font-size) + 2 * var(--medium-gap-size));
			padding: 0 var(--medium-gap-size) 0 0;
			box-sizing: border-box;
		}

		#create-music-button {
			width: 100%;
			height: calc(var(--medium-font-size) + 2 * var(--medium-gap-size));
			background: var(--medium-blue);
		}

	/* upload */
		#upload-music-form {
			float: left;
			width: 50%;
			height: calc(var(--medium-font-size) + 2 * var(--medium-gap-size));
			padding: 0 0 0 var(--medium-gap-size);
			box-sizing: border-box;
		}

		#upload-music-label {
			width: calc(100% - var(--small-gap-size));
			height: calc(var(--medium-font-size) + 2 * var(--medium-gap-size));
			background: var(--medium-blue);
			margin: 0;
		}

		#upload-music-input {
			min-width: 0 !important;
			height: 0 !important;
			width: 0 !important;
			font-size: 0 !important;
			margin: 0 !important;
			padding: 0 !important;
			opacity: 0 !important;
		}

	/* join */
		#join-music-form {
			float: left;
			width: 100%;
			padding: var(--large-gap-size) 0 0 0;
			height: calc(var(--medium-font-size) + 2 * var(--medium-gap-size) + var(--large-gap-size));
			box-sizing: border-box;
		}

		#join-music-input {
			width: 50%;
			height: calc(var(--medium-font-size) + 2 * var(--medium-gap-size));
			margin-bottom: 0;
			text-transform: uppercase;
			border-radius: var(--border-radius) 0 0 var(--border-radius);
		}

		#join-music-button {
			width: 50%;
			height: calc(var(--medium-font-size) + 2 * var(--medium-gap-size));
			background: var(--medium-blue);
			border-radius: 0 var(--border-radius) var(--border-radius) 0;
		}

		#join-music-form:focus-within #join-music-input, #join-music-form:focus-within #join-music-button {
			box-shadow: 0 0 0 var(--border-size) var(--light-blue);
		}

	/* previous */
		#previous-music-section {
			padding: var(--large-gap-size) var(--medium-gap-size);
			float: left;
			width: 100%;
			height: calc(100vh - 
				(var(--large-gap-size)) -
				(var(--medium-gap-size) + 2.5 * var(--large-font-size) + var(--medium-gap-size) + (var(--medium-font-size) + 2 * var(--medium-gap-size)) + var(--large-gap-size)) - 
				(2 * (var(--medium-font-size) + 2 * var(--medium-gap-size) + var(--large-gap-size))) - 
				(var(--border-size)));
			box-shadow: 0 0 var(--shadow-size) var(--dark-gray) inset;
			overflow-x: hidden;
			overflow-y: scroll;
			box-sizing: border-box;
		}

		#previous-music-none {
			width: 100%;
			text-align: center;
			text-transform: uppercase;
			color: var(--medium-gray);
			font-size: var(--medium-font-size);
			user-select: none;
			transition: var(--transition-time);
			pointer-events: none;
		}

		#previous-music-none[invisible] {
			height: 0;
			font-size: 0;
		}

		.previous-music-button {
			width: calc(100% - var(--medium-font-size) - 2 * var(--medium-gap-size));
			margin: 0 0 var(--medium-gap-size) 0;
			background: var(--medium-blue);
			border-radius: var(--border-radius) 0 0 var(--border-radius);
		}

		.previous-music-delete {
			display: inline-block;
			width: calc(var(--medium-font-size) + 2 * var(--medium-gap-size));
			height: calc(var(--medium-font-size) + 2 * var(--medium-gap-size));
			background: var(--medium-red);
			border-radius: 0 var(--border-radius) var(--border-radius) 0;
			vertical-align: top;
			margin-bottom: var(--medium-gap-size);
		}

/*** 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: 999;
		outline: none;
		filter: drop-shadow(0px 0px var(--shadow-size) var(--medium-gray));
	}

	#j-logo:hover, #j-logo:focus {
		box-shadow: none;
		filter: drop-shadow(0px 0px var(--shadow-size) var(--dark-gray));
	}

/*** mobile ***/
	@media screen and (max-width: 800px) {
		#container {
			margin-top: var(--small-gap-size);
		}

		#heading-outer {
			padding-bottom: var(--medium-gap-size);
			height: calc(var(--medium-gap-size) + var(--large-font-size) * 2.5 + var(--medium-gap-size) + var(--medium-font-size) + 2 * var(--medium-gap-size) + var(--medium-gap-size));
		}

		#heading-outer span {
			display: none;
		}

		#join-music-form {
			padding-top: var(--medium-gap-size);
			height: calc(var(--medium-font-size) + 2 * var(--medium-gap-size) + var(--medium-gap-size))
		}

		#actions-outer {
			padding-bottom: var(--medium-gap-size);
			height: calc(2 * (var(--medium-font-size) + 2 * var(--medium-gap-size) + var(--medium-gap-size)))
		}

		#previous-music-section {
			padding-top: var(--medium-gap-size);
			padding-bottom: 0;
			height: calc(100vh - 
				(var(--medium-gap-size)) -
				(var(--medium-gap-size) + 2.5 * var(--large-font-size) + var(--medium-gap-size) + (var(--medium-font-size) + 2 * var(--medium-gap-size)) + var(--medium-gap-size)) - 
				(2 * (var(--medium-font-size) + 2 * var(--medium-gap-size) + var(--medium-gap-size))) - 
				(var(--border-size)));
		}
	}