body {
	padding: 0;
	margin: 0;
	font-family: system-ui;
	text-wrap: balance;
}

footer {
	position: fixed;
	bottom: 0px;
	display: flex;
	width: 100vw;
	align-items: center;
	background-color: #FFFFFFA0;
	backdrop-filter: blur(100px);
}

.footer-image {
	max-width: min(100px, 100vw);
}

#loadingElement {
	position: fixed;
	top: 50%;
	left: 50%;
	
	transform: translate(-50%, -50%);
	
	font-weight: bold;
	font-size: x-large;
	
	max-height: max(250px, 90vh);
	max-width: max(250px, 90vw);
}

#footerText {
	opacity: 0.8;
	width: inherit;
	text-align: center;
}

#footerText,
#loadingElement,
.board-title,
.info {
	user-select: none;
}

.info {
	padding: 15px;
	text-wrap: auto;
	
	--border-color: #2196F369;
	--background-color: #2196F30A;
}

.board, .info, .board-record {
	border-radius: 5px;
	border-color: var(--border-color);
	border-style: solid;
	border-width: 1px;
	background-color: var(--background-color);
	overflow: hidden;
}

.board-record {
	text-align: left;
	margin: 15px 15px 0 15px;
	padding: 10px;
}

.board {
	text-align: center;
}

.board > * {
	text-align: left;
}

.board-title {
	border-color: var(--color);
	border-style: solid;
	border-width: 0 0 0 5px;
	padding: 10px;
	margin: 0;
	font-weight: bold;
}

.board-separator {
	width: 100%;
	height: 1px;
	background-color: var(--border-color);
}

#boardContainer {
	padding: 20px;

	display: flex;
	flex-direction: column;
	gap: 16px;
}

.board-loading {
	max-height: 250px;
	max-width: 250px;
}

button {
	transition: 200ms all;
	background-color: var(--button-color);
	border: none;
	border-radius: 5px;
	font-weight: bold;
	text-align: center;
	padding: 15px;
	cursor: pointer;
}

button[disabled] {
	opacity: 0.3;
	cursor: no-drop;
}

button:not([disabled]):hover {
	background-color: var(--button-hover-color);
}

.footer-spacer {
	height: 100px;
}

@media(max-width: 400px) {
	footer {
		flex-direction: column;
	}

	#footerText {
		margin-bottom: 10px;
	}
}

@media(prefers-color-scheme: dark) {
	body {
		background-color: black;
		color: white;
	}

	footer {
		background-color: #000000A0;
	}

	button {
		color: white;
	}
}