* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	width: 100%;
}

html {
	font-family:
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Oxygen,
		Ubuntu,
		Cantarell,
		"Open Sans",
		"Helvetica Neue",
		sans-serif;
	background-color: var(--bg-primary-color);
	color: var(--text-primary-color);
}

main {
	width: 100%;
}

main section {
	width: 100%;
	padding: var(--padding-2xl);
	display: flex;
	gap: var(--gutter-lg);
}

.btn {
	padding: var(--padding-sm) var(--padding-lg);
	border: none;
	outline: none;
	border-radius: var(--border-radius-md);
	background-color: var(--bg-active-color);
	cursor: pointer;
	color: var(--text-active-color);
}

#reset-btn {
	background-color: var(--bg-danger-color);
	color: var(--text-primary-color);
}

#download-btn {
	background-color: var(--bg-success-color);
	color: var(--text-primary-color);
}

main section .left {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gutter-lg);
	width: 70%;
}

main section .right {
	width: 30%;
	background-color: var(--bg-secondary-color);
	padding: var(--padding-lg);
	border-radius: var(--border-radius-lg);
}

main section .top {
	display: flex;
	align-items: center;
	gap: var(--gutter-md);
}

main section .bottom {
	background-color: var(--bg-secondary-color);
	width: 100%;
	padding: var(--padding-2xl);
	aspect-ratio: 5/3;
	border-radius: var(--border-radius-xl);
	display: flex;
	justify-content: center;
	align-items: center;
}

main section .bottom .placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 0.6;
	gap: var(--gutter-md);
}

main section .bottom .placeholder i {
	font-size: 10rem;
}

main section .bottom .placeholder p {
	font-size: var(--font-size-lg);
}

main section .right .filter {
	width: 100%;
}

main section .right {
	display: flex;
	flex-direction: column;
	gap: var(--gutter-md);
}

main section .right .filters {
	display: flex;
	flex-direction: column;
	gap: var(--gutter-md);
}

main section .right .filter input {
	width: 100%;
	outline: none;
	margin-top: var(--margin-sm);
	appearance: none;
}

main section .right .filter input::-webkit-slider-runnable-track {
	background-color: var(--bg-active-color);
	height: 3px;
	border-radius: 2px;
}

main section .right .filter input::-webkit-slider-thumb {
	cursor: pointer;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: red;
	margin-top: -8.5px;
}

canvas {
	max-width: 90%;
	max-height: 80vh;
	display: none;
}

.presets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gutter-sm);
}