:root {
	--title: "Duotone Image Editor";
	--author: "Matt Cannon";
	--contact: "mc@mattcannon.design";
	--description: "A clean, concise, and functional duotone image editor that makes transforming photos feel effortless. Instantly pull in a random placeholder image from Lorem Picsum or upload your own and watch it re-render through a dynamic two-color duotone filter. Fine-tune the look with custom color pickers or explore curated preset schemes to quickly shift the mood. When you're ready, export your creation in PNG, JPEG, or WebP. Built with fast Canvas 2D pixel processing, the app also includes undo and redo controls along with a clickable history log, making it easy to experiment freely and roll back to any previous state within a streamlined, app-style interface.";
	--keywords: "duotone, image editor, photo filter, cpc-color-mix-blend, codepenchallenge, colorize, two tone, gradients, presets, color picker, canvas, canvas 2d, pixel processing, export png, export jpeg, export webp, download, upload image, lorem picsum, random photos, undo, redo, history, state, codepen, ui";
	--last-modified: "2026-02-19";
	--content-language: "en";
	--generator: "HTML5, CSS3, JavaScript, Canvas 2D, jQuery, Font Awesome";
}

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

body {
	font-family: "Rubik", sans-serif;
	color: #fff;
	font-size: 16px;
	background: #222325;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	margin: 0;
}

.container {
	display: flex;
	background: #2c2c2e;
	border-radius: 15px;
	overflow: hidden;
	max-width: 1000px;
	width: 100%;
	height: 425;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.sidebar {
	background: #1c1c1e;
	width: 260px;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	font-family: "Rubik", sans-serif;
	font-size: 16px;
}

.sidebar.left {
	border-right: 1px solid #38383a;
}

.sidebar.right {
	border-left: 1px solid #38383a;
}

.sidebar.right .preset-list .dropdown-item {
	padding-left: 25px;
}

.sidebar.right .presets-title {
	padding-left: 10px;
}

.sidebar-item {
	padding: 5px;
	border-bottom: 1px solid #38383a;
}

.sidebar-item:last-child {
	border-bottom: none;
}

.color-pickers {
	display: flex;
	justify-content: center;
	gap: 12px;
	padding: 14px;
}

.color-picker {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid #fff;
	transition: transform 0.2s;
}

.color-picker:hover {
	transform: scale(1.1);
}

.color-picker input[type="color"] {
	width: 150%;
	height: 150%;
	margin: -25%;
	padding: 0;
	border: none;
	cursor: pointer;
}

.sidebar-btn {
	width: 100%;
	padding: 8px 16px;
	background-color: transparent;
	color: #fff;
	border: none;
	cursor: pointer;
	transition: background 0.3s;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	font-family: "Rubik", sans-serif;
	font-size: 16px;
}

.sidebar-btn:hover {
	background-color: #2c2c2e;
}

.sidebar-btn i {
	margin-right: 10px;
	width: 20px;
}

.presets-header {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 14px 16px;
}

.presets-title {
	font-weight: 500;
	font-size: 14px;
	opacity: 0.85;
}

.dropdown-content {
	display: none;
	background-color: #3a3a3c;
	color: #d1d1d1;
}

.dropdown-item {
	display: flex;
	align-items: center;
	padding: 12px;
	cursor: pointer;
	transition: background-color 0.3s;
	border-bottom: 1px solid #4a4a4c;
	position: relative;
}

.dropdown-item:last-child {
	border-bottom: none;
}

.dropdown-item:hover {
	background-color: #4a4a4c;
}

.dropdown-item.selected {
	background-color: #4a4a4c;
}

.dropdown-item.selected::after {
	content: "\f00c";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	right: 20px;
	color: #757575;
}

.dropdown-item i {
	margin-right: 10px;
	width: 20px;
}

.image-preview {
	flex-grow: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	position: relative;
	overflow: hidden;
}

.image-preview img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	width: auto;
	height: auto;
}

#imageContainer {
	width: 90%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#image {
	opacity: 1;
	transition: opacity 0.15s ease;
}

#image.is-loading {
	opacity: 0;
}

#loading-spinner {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.5);
}

.spinner {
	border: 8px solid rgba(255, 255, 255, 0.3);
	border-top: 8px solid #0a84ff;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 1s linear infinite;
}

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

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

#historyPanel {
	max-height: 240px;
	overflow-y: auto;
	background: transparent;
}

.history-item {
	padding: 12px;
	padding-left: 18px;
	cursor: pointer;
	transition: background-color 0.3s;
	color: #8e8e93;
}

.history-item:last-child {
	border-bottom: none;
}

.history-item:hover {
	background-color: #4a4a4c;
}

.presets-wrap {
	padding: 0;
}

.preset-list {
	max-height: none;
	overflow-y: auto;
}

.preset-list .dropdown-item {
	background: transparent;
}

.sidebar-item {
	width: 100%;
}