@font-face {
	font-family: Ohrenstead;
	src: url(./Ohrenstead.ttf) format("opentype");
	font-display: block;
}

/* Diplay none */
input[type=file] {
	display: none;
}

* {
	gap: 2px;
	margin: 0px;
}

html {
	font-family: 'Ohrenstead', cursive;
	font-size: 32px;
}

body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	gap: 4px;
	padding: 4px;
	image-rendering: pixelated;
	overflow-y: scroll;
	overflow-x: hidden;

	background-color: #a07a52;
	-webkit-text-fill-color: #473524;
	border: 5px solid #473524;
	user-select: none;

	& > * {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	& script {
		display: none;
	}
}

div {
	display: contents;
	gap: 2px;
}

canvas {
	background-color: #eadbac;
	border: 5px solid #473524;
	width: 512px;
	height: 512px;
}

label, input {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: 'Ohrenstead', cursive;
	font-size: 32px;

	& input[type=checkbox]:hover {
		border: 4px solid #eadbac;
	}
}

label:hover {
	cursor: pointer;
}

input[type=checkbox] {
	appearance: none;
	width: 16px;
	height: 16px;
	background-color: #ee5e5c;
	border: 4px solid #473524;
}

input[type=checkbox]:checked {
	background-color: #5cee66;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0px;
}

input[type=submit] {
	width: 178px;
}

.config-input {
	width: 160px;
	background-color: #eadbac;
	border: 5px solid #473524;
	cursor: pointer;
	padding: 0px 4px;
	font-size: 32px;
	text-align: start;
	-webkit-text-fill-color: #a07a52;
}

.config-input:hover, #label-input-sprite:hover {
	background-color: #a07a52;
	-webkit-text-fill-color: #eadbac;
}

.input-title {
	display: flex;
	text-align: center;
	justify-content: space-between;
	padding: 0px 8px;
	background-color: #473524;
	-webkit-text-fill-color: #eadbac;

	& .info-button {
		border: 0;
		width: min-content;
		background-color: #473524;
		align-self: flex-end;
		-webkit-text-fill-color: #a07a52;
		cursor: help;
		padding: 0px 4px;
	}
}

.info {
	position: fixed;
	background-color: #eadbac;
	border: 5px solid #473524;
	padding: 4px;
}

.history-item {
	display: flex;
	width: 128px;
	height: 128px;
	overflow: hidden;
	clip-path: content-box;
	flex-direction: column;
}

#label-input-sprite {
	background-color: #c8a279;
	border: 5px solid #473524;
	width: -webkit-fill-available;
	display: flex;
	justify-content: center;
}

#canvas-title {
	text-align: center;
	background-color: #473524;
	-webkit-text-fill-color: #eadbac;
}

#history-items {
	display: flex;
	flex-wrap: wrap;
	padding: 4px;
	gap: 4px;
	background-color: #c8a279;
	border: 5px solid #473524;
	flex-direction: row-reverse;
	contain: content;
}

form {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 0.5fr 1fr 0.5fr 1fr;
	gap: 4px 4px;
	grid-template-areas:
		"b c d e"
		"b c d e"
		"f g a a"
		"f g a a";
}

.a {
	grid-area: a;
	display: flex;
	align-items: flex-end;
	gap: 4px;
}

.b {
	gap: 0px;
	display: flex;
	flex-direction: column;
	grid-area: b;

	& * {
		width: -webkit-fill-available;;
	}
}

.c {
	gap: 0px;
	display: flex;
	flex-direction: column;
	grid-area: c;

	& * {
		width: -webkit-fill-available;;
	}
}

.d {
	gap: 0px;
	display: flex;
	flex-direction: column;
	grid-area: d;

	& * {
		width: -webkit-fill-available;;
	}
}

.e {
	gap: 0px;
	display: flex;
	flex-direction: column;
	grid-area: e;

	& * {
		width: -webkit-fill-available;;
	}
}

.f {
	gap: 0px;
	display: flex;
	flex-direction: column;
	grid-area: f;

	& * {
		width: -webkit-fill-available;;
	}
}

.g {
	gap: 0px;
	display: flex;
	flex-direction: column;
	grid-area: g;

	& * {
		width: -webkit-fill-available;;
	}
}

::-webkit-scrollbar {
	width: 10px;
	height: 8px;
}

& ::-webkit-scrollbar-track {
	background-color: #473524;
}

& ::-webkit-scrollbar-thumb {
	background-color: #eadbac;
}