body {
	font-family: Arial, sans-serif;
	text-align: center;
	background-color: #f4f4f4;
	margin: 0;
	padding: 0;
}

a {
	color: blue;
}

header {
	background-color: #333;
	color: #fff;
	padding: 20px 0;
}

main {
	margin: 20px auto;
	max-width: 800px;
}

#drop-zone {
	border: 2px dashed #ccc;
	padding: 50px;
	background-color: #fff;
	cursor: pointer;
	margin-bottom: 20px;
}

#image-zone > canvas { margin: auto; }

#color-picker {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 20px;
	transition: transform .15s ease-in-out;
}

#color-picker * {
	font-size: 2vh;
}

#color-picker > table th {
	background-color: #cdcdcd;
}

#color-picker > table:first-child {
	background: #fff;
}

#color-picker > table:first-child > tbody > tr:first-child > td:first-child {
	background-color: #f4f4f4;
}

#color-picker > table:first-child > tbody > tr:first-child > td:last-child {
	min-width: 18ch;
}

#params > table {
	width: 100% ;
}

#params > table > thead > tr > th {
	border-radius: 50px
}
#params > table > thead > tr > th > i {
	color : #888
}

#params > table > caption {
	font-size:1.25em;
	padding:1em 0;
}

#params input {
	font-size:2em;
	width: 95% ;
}