* {
	box-sizing: border-box;
}

:root {
	--gap: 8px;
	--white: #FFFFFF;
	--drop-zone-margin: 16px;
	--main-margin: 38px;
	--main-border-size: 5px;
	--main-height: 740px;
	--main-border-color: #7d7ea1;
	--main-border: var(--main-border-size) solid var(--main-border-color);
}

body {
	/* https://projects.verou.me/css3patterns/#microbial-mat */
	background:
			radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #bdb722 10px, rgba(96, 16, 48, 0) 11px) 0px 10px,
			radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, #bdb722 10px, rgba(96, 16, 48, 0) 11px),
			#5c5a39;
	background-size: 20px 20px;
	color: #072B40;
	min-height: 100vh;
	margin: 0;
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	padding-bottom: var(--main-margin);
}

.main-wrapper {
	display: flex;
	flex-direction: column;
}

main {
	margin: var(--main-margin) var(--main-margin) 0;
	padding: 0 var(--main-margin) var(--main-margin) 0;
	min-width: 320px;
}

.main-heading {
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	font-size: 44px;
	text-shadow: 1px 1px 2px white;
	margin-top: 0;
	margin-block: 0;
}
.subheader {
	margin-top: 0;
	margin-bottom: var(--main-margin);
	font-size: 17px;
	margin-bottom: var(--main-margin);
}

.footer-container {
	display: flex;
	justify-content: flex-start;
}

footer {
	margin: calc(-1 * var(--main-border-size)) 0 var(--main-margin);
	background-color: #fbfae9;
	padding: 0 22px 0;
	border: var(--main-border);
	border-right: none;
	border-top: none;
	width: 30vw;
	height: 148px;
	position: relative;
	text-align: right;
	z-index: 1;
}

footer p:first-of-type {
	border-top: var(--main-border);
	padding-top: 33px;
	margin-bottom: 49px;
}

footer::after {
	content: '';
	position: absolute;
	right: -101px;
	top: -101px;
	border-width: 101px;
	border-color: transparent #fbfae9 transparent transparent;
	border-style: solid;
	transform: rotate(45deg);
}

footer::before {
	content: '';
	position: absolute;
	right: -105px;
	top: -105px;
	border-width: 105px;
	border-color: transparent var(--main-border-color) transparent transparent;
	border-style: solid;
	transform: rotate(45deg);
}

a {
	color: #5c5a39;
}

i {
	margin-top: 2px;
	font-style: initial;
}

.preview {
	padding: var(--main-margin) 0 0 var(--main-margin);
	background-color: #fbfae9;
	border: var(--main-border);
	min-height: var(--main-height);
	flex: 1;
}

.drop-container {
	position: relative;
	padding-top: var(--main-margin);
	height: var(--main-height);
	border-radius: 0px 50% / 0px 45% 0 0;
	background-color: #fbfae9;
	border-top: var(--main-border);
	border-bottom: var(--main-border);
	border-inline-end: var(--main-border);
	margin-inline-start: calc(-1 * var(--main-border-size));
}
.drop-container:before {
	content: '';
	height: 100%;
	display: block;
	position: absolute;
	width: 1px;
	background-color: #fbfae9;
	top: 0;
}

.dropzone {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	background-color: #d8d228;
	border: var(--main-border);
	margin: -10px 40px 0px 1px;
	width: 550px;
	height: 550px;
	padding: 60px;
	overflow: auto;
	border-radius: 50%;
	box-shadow: inset 0 0 0 5px #d8d228;
	transition: .3s box-shadow ease-in, .3s width ease-in, .3s height ease-in;
}

@media only screen and (max-width: 1250px) {
	.dropzone {
		width: 400px;
		height: 400px;
	}
}
@media only screen and (max-width: 900px) {
	.preview {
		padding-inline-start: 20px;
	}
	.drop-container {
		flex: 1;
	}
	.dropzone {
		width: 350px;
		height: 350px;
	}
}
@media only screen and (max-width: 768px) {
	:root {
		--main-margin: 19px;
	}
	.dropzone {
		width: 300px;
		height: 300px;
		padding: 30px;
	}
}

.dz-drag-hover {
	box-shadow: inset 0 0 0 5px #d8d228,
		inset 0 0 0 10px var(--white),
		inset 0 0 0 20px #d8d228,
		inset 0 0 0 25px var(--white),
		inset 0 0 0 40px #d8d228,
		inset 0 0 0 45px var(--white);
}
.dropzone .dz-message {
	font-family: Arial, Helvetica, sans-serif;
	margin: auto;
}

#images {
	margin: 16px 38px 16px 0;
	border-top: var(--main-border);
	padding-top: 20px;
	max-width: 598px;
}
#images:empty::after {
	content: "Add an image to get started";
	margin: auto;
	display: block;
	text-align: center;
	padding: 60px 0 80px;
	border-bottom: 1px dotted;
}
#images img {
	max-width: 100%;
	aspect-ratio: 3/4;
	grid-row: 1;
	border-radius: 5px;
}

.list {
	display: grid;
	gap: var(--gap);
	grid-auto-columns: 1fr;
	max-width: 100%;
	border-radius: 5px;
	opacity: 0;
	animation: fadeIn 300ms ease-out forwards;
}

.container {
	display: flex;
}

@media only screen and (max-width: 768px) {
	main {
		margin: 19px;
	}
}

@media only screen and (max-width: 480px) {
	.container {
		flex-direction: column-reverse;
	}
	main {
		padding-inline-end: 0;
	}
	.drop-container {
		height: auto;
		padding-bottom: var(--main-margin);
		border-inline-start: var(--main-border);
		border-bottom: none;
		margin-inline-start: 0;
	}
	.dropzone {
		width: 289px;
		height: 289px;
		margin-inline-start: 2px;
	}
}

.download-button {
		background-color: #5c5a39;
		color: white;
		border: none;
		font-size: 34px;
		box-shadow: inset -2px -2px 0px #5c5a39, inset -5px -5px 0px #d8d228, -5px -5px 0px #072B40, -7px -5px 0px #d8d228, -7px -8px 0px #d8d228, -7px -2px 0px #d8d228, -2px -8px 0px #d8d228;
		cursor: pointer;
		margin: 20px 0;
		padding: 3px 50px;
		font-family: Arial, Helvetica, sans-serif;
		display: inline-block;
}
.download-button:hover {
	background-color: #da8b32;
	box-shadow: inset -2px -2px 0px #da8b32, inset -5px -5px 0px #d8d228, -5px -5px 0px #072B40, -7px -5px 0px #d8d228, -7px -8px 0px #d8d228, -7px -2px 0px #d8d228, -2px -8px 0px #d8d228;
}

.dropzone .dz-preview {
	margin: 10px;
}
.dropzone .dz-preview.dz-file-preview .dz-image {
	border-radius: 50%;
	background-color: #d6d6e1;
}
.dropzone .dz-preview .dz-image, .dropzone .dz-preview.dz-image-preview {
	border-radius: 50%;
}

.spinner-container {
	color: #072B40;
	font-size: 2em;
	height: 80px;
	margin: 38px 16px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-direction: row-reverse;
	gap: 80px;
}
@media only screen and (max-width: 768px) {
	.spinner-container {
		font-size: 1.5em;
		gap: 20px;
	}
}

.wheel:after {
	content: " ";
	display: block;
	width: 64px;
	height: 64px;
	margin: 8px;
	border-radius: 50%;
	border: 6px solid #072B40;
	border-color: #072B40 transparent #072B40 transparent;
	animation: spinner 1.2s linear infinite;
	opacity: 1 !important;
}

@media only screen and (max-width: 480px) {
	.wheel:after {
		width: 34px;
		height: 34px;
	}
}

@keyframes spinner {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.options {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: flex-start;
	margin: var(--drop-zone-margin) var(--drop-zone-margin) 0;
	gap: 20px;
	max-width: 520px;
}

.input {
	background-color: #d6d6e1;
	border: 1px solid #5c5a39;
	border-radius: 5px;
	width: 60px;
	height: 34px;
	font-size: 16px;
}

.input:focus {
	outline: 1px solid #5c5a39;
}

.slice-picker {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tyepable {
	padding: 10px;
}

.label-text {
	font-family: Arial, Helvetica, sans-serif;
}
.input-label {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.switch {
	position: relative;
	--size: 26px;
}

.switch .checkbox {
	opacity: 0;
	position: absolute;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: var(--size);
	left: 4px;
	bottom: 4px;
	border-radius: 50%;
	background-color: #5c5a39;
	transition: .4s;
}

.checkbox:checked+.slider {
	background-color: #bdb722;
}

.checkbox:focus+.slider {
	box-shadow: 0 0 1px #5c5a39;
}

.checkbox:checked+.slider:before {
	transform: translateX(var(--size));
}

.hidden {
	display: none;
}

.invalid {
	background-color: #bd2228;
	color: #FFFFFF;
}
@media only screen and (max-width: 1010px) {
	footer {
		width: 20vw;
	}
}
@media only screen and (max-width: 900px) {
	.options {
		justify-content: flex-start;
	}
}
@media only screen and (max-width: 815px) {
	footer {
		width: 30vw;
		border-inline-end: var(--main-border);
	}

	footer::before,
	footer::after {
		display: none;
	}
}
@media only screen and (max-width: 768px) {
	.switch {
		--size: 12px;
		width: 30px;
	}
	.options {
		gap: 8px;
		font-size: .8em;
	}
	.slider:before {
		border-radius: 5px;
	}
}
@media only screen and (max-width: 480px) {
	footer {
		width: 50vw;
		border-inline-end: var(--main-border);
	}
	.main-heading {
		font-size: 28px;
	}

	.subheader {
		display: none;
	}
}