html, body
{
	background-color: var(--color-main-background);
	color: var(--color-text);
	padding: 0;
}
button, a.button
{
	background: var(--button-background);
	border: none;
	border-radius: 5px;
	color: var(--button-color);
	display: flex;
	font-size: var(--base-fontsize);
	gap: 6px;
	line-height: 1;
	transition: color .36s, background-color .36s;
	
	&.highlight
	{
		background: var(--color-menu-button);
		color: var(--color-menu-button-text);
	}
	&:not([disabled]):not(.list-input-wrapper *):hover
	{
		background: var(--color-menu-button);
		color: var(--color-menu-button-text);
	}
}
.buttons
{
	display: flex;
	flex-flow: column nowrap;
	gap: 10px;
}

section
{
	align-items: center;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	padding: 15px;
	
	.section-wrapper
	{
		display: flex;
		flex-flow: column nowrap;
		gap: 15px;
		margin: 0 15px;
		width: 100%;
		
		h1, h2
		{
			text-align: center;
		}
	}
}
body > hr
{
	background: var(--color-lines);
	border: none;
	height: 1px;
	margin: 0 15px;
}
#header
{
	background: url('/images/main-background.png') center center / cover no-repeat;
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 100vh;
	padding: 0;
	
	img
	{
		width: 80vw;
	}
}
h1
{
	color: var(--color-lines-active);
}
#upper-footer
{
	background: var(--color-overlay);
	padding: 30px;
	
	h2
	{
		color: var(--color-text);
	}
	form
	{
		gap: 10px;
		
		.input-wrapper
		{
			background: none;
			border: none;
			padding: 0;
			
			.input:not(.list-input-wrapper), .list-input-wrapper .display
			{
				border: solid 1px var(--color-lines);
				background: var(--color-main-background);
			}
			.list-input-wrapper
			{
				.display
				{
					padding: 15px;
				}
				.contents
				{
					background: var(--color-main-background);
					border-color: var(--button-color);
				}
			}
		}
		.buttons > *
		{
			 width: 100%;
		}
	}
}
#footer
{
	font-size: calc(var(--base-fontsize) * 1.15);
	padding: 30px;
	
	.link
	{
		color: var(--color-link);
	}
}
@media (min-width: 768px) or (orientation: landscape)
{
	.buttons
	{
		flex-flow: row wrap;
		
		&.right
		{
			justify-content: flex-end;
		}
	}
	section .section-wrapper, body > hr
	{
		margin: 0 auto;
		max-width: 960px;
	}
	#header
	{
		img
		{
			height: 80vh;
			width: auto;
		}
	}
	#upper-footer
	{
		padding-top: 60px;
		padding-bottom: 60px;
	}
}