body {
	background: url('./ui/background.png') center center no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

footer {
	display: block;
	color: white;
	text-shadow: rgb(98, 0, 0) 2px 0px 0px, rgb(98, 0, 0) 1.75517px 0.958851px 0px, rgb(98, 0, 0) 1.0806px 1.68294px 0px, rgb(98, 0, 0) 0.141474px 1.99499px 0px, rgb(98, 0, 0) -0.832294px 1.81859px 0px, rgb(98, 0, 0) -1.60229px 1.19694px 0px, rgb(98, 0, 0) -1.97998px 0.28224px 0px, rgb(98, 0, 0) -1.87291px -0.701566px 0px, rgb(98, 0, 0) -1.30729px -1.5136px 0px, rgb(98, 0, 0) -0.421592px -1.95506px 0px, rgb(98, 0, 0) 0.567324px -1.91785px 0px, rgb(98, 0, 0) 1.41734px -1.41108px 0px, rgb(98, 0, 0) 1.92034px -0.558831px 0px;
	font-size: 16px;
	margin:1em;
}

#app {
	margin: 20px;
}

.container {
	margin-top: 1vh;
}

#section-categories {
	background-image: url('./ui/category_frame.png');
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	height: 137px;
	overflow: hidden;
	border: 2px solid black;
	border-radius: 15px;
	padding: 1em;
}

#section-categories * {
	max-height: 74px;
}

#section-categories div {
	text-align: center;
}

#section-labels {
	position: relative;
}

[type="radio"] {
	display: none;
}

#categories {
	padding: 0px;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

#categories::-webkit-scrollbar {
	display: none;
}

#categories .horizontal-scroll {
	display: inline-flex;
	gap: 0.5rem;
	overflow-x: auto;
	white-space: nowrap;
	scroll-behavior: smooth;
}

#column-canvas {
	min-width: 640px;
}

#column-options {
	max-width: 40vw;
}

.canvas-background {
	width: 640px;
	height: 840px;
	background-image: url('./ui/main_frame.png');
	background-size: 640px 840px;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	z-index: -1;
}

.btn-category img {
	height: 100%;
	object-fit: cover;
	transform-origin: center;
	transition: filter 0.3s ease, transform 0.3s ease;
}

.btn-category {
	border: 0;
	background: transparent;
	min-width: 64px;
	padding: 0;
	overflow: hidden;
}

.btn-category:hover {
	border-radius: 5px;
}

#btn-left:hover,
#btn-right:hover,
.btn-category img:hover {
	filter: brightness(1.2);
	transform: scale(1.03);
}

.active {
	position: relative;
}

.active::before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	border: 4px solid #1664e2;
	border-radius: 10px;
	transition: filter 0.3s ease, transform 0.3s ease;
}

.active:hover::before {
	filter: brightness(1.4);
	transform: scale(1.03);
}


#btn-left,
#btn-right {
	border: 0;
	background: transparent;
	padding: 0;
	width: 32px;
	background-size: contain;
	background-repeat: no-repeat;
	height: 64px;
}

#btn-left {
	background-image: url('./ui/category_frame_left.png');
}

#btn-right {
	background-image: url('./ui/category_frame_right.png');
}

.col-md-1 {
	padding: 0px;
}

#section-items {
	background-image: url('./ui/selection frame.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	height: 585px;
	overflow: hidden;
	padding: 1.5em;
}

#section-items>.vertical-scroll {
	padding: 0px;
	height: 100%;
}

.vertical-scroll {
	height: 100%;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.vertical-scroll::-webkit-scrollbar {
	display: none;
}

.items {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1em;
	overflow-y: auto;
	overflow-x: hidden;
	justify-items: center;
	padding: 1em;
	border-top: 1px solid black;
}

.items canvas {
	width: 120px;
	height: auto;
}

.canvas-wrapper {
	width: 100%;
	height: 100%;
	background: #f0f0f0;
	position: relative;
	text-align: center;
	box-sizing: border-box;
	box-shadow: 0 0 0px 3px #1664e2;
	transition: box-shadow 0.2s ease;
	border-radius: 10px;
}

.canvas-wrapper.empty {
	background: url("./ui/empty.png") #f0f0f0;
}

.canvas-wrapper:hover {
	box-shadow: 0 0 8px 3px #1664e2;
}

#section-buttons>div {
	padding: 0px;
}

#section-buttons button {
	width: 100%;
	height: 117px;
	border: 0px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-color: transparent;
}

#random-button {
	background-image: url('./ui/random.png');
	background-position-x: left;
}

#save-button {
	background-image: url('./ui/save.png');
	background-position-x: right;

}