:root {
	scroll-behavior: smooth;
	--primary-color: #80bebf;
	--primary-shadow: #80bebf66;
	--primary-hover: #80bebfaa;

	--secondary-color: #dae1e5;
	--secondary-hover: #dae1e5aa;
	--secondary-shadow: #dae1e566;

	--crimson-color: #6b0a1d;
	--crimson-hover: #6b0a1daa;
	--crimson-shadow: #6b0a1d66;

	--hot-pink-color: #ff69b4;
	--hot-pink-hover: #ff69b4aa;
	--hot-pink-shadow: #ff69b466;

	--dark-color: #212529;
	--dark-hover: #212529aa;
	--dark-shadow: #21252966;

	--midnight-blue-color: #003366;
	--midnight-blue-hover: #003366aa;
	--midnight-blue-shadow: #00336666;
}

.default {
	--primary-color: #80bebf;
	--primary-hover: #80bebf66;
	--primary-shadow: #80bebf66;
}

.crimson {
	--primary-color: var(--crimson-color);
	--primary-hover: var(--crimson-hover);
	--primary-shadow: var(--crimson-shadow);
}
.hot-pink {
	--primary-color: var(--hot-pink-color);
	--primary-hover: var(--hot-pink-hover);
	--primary-shadow: var(--hot-pink-shadow);
}
.midnight-blue {
	--primary-color: var(--midnight-blue-color);
	--primary-hover: var(--midnight-blue-hover);
	--primary-shadow: var(--midnight-blue-shadow);
}

.dark {
	--primary-color: var(--dark-color);
	--primary-hover: var(--dark-hover);
	--primary-shadow: var(--dark-shadow);
}

/* Elements */
body {
	font-family: Quicksand, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
		sans-serif;
}
textarea {
	width: 100%;
	outline: none;
	resize: none;
}
input[name="new"] {
	outline: none;
}

main {
	min-height: 100%;
}
footer,
header {
	background-color: var(--primary-color);
}

/* Modal */
dialog {
	padding: 0;
}
dialog h1 {
	color: var(--primary-color);
	font-weight: 800;
}
dialog::backdrop {
	background-color: #00000099;
}

#date-confirm,
#settings-confirm {
	color: var(--primary-color);
}

#settings-modal,
#date-modal {
	width: 500px;
}

/* Settings */
.form-check-input:checked {
	background-color: var(--primary-color);
}
.form-check-input:focus {
	box-shadow: none !important;
	border-color: var(--secondary-color);
}

/* Date Picker */
input[name="date"] {
	font-weight: 500;
	color: #1a1a1a;
	background-color: #f9f9f9;
	border: 2px solid var(--primary-color);
	border-radius: 0.5rem;
	padding: 0.5rem 1rem;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	width: 100%;
}

input[name="date"]:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 0.25rem var(--primary-shadow);
	outline: none;
}
input[name="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
}

/* App Container */
#app {
	height: 100dvh;
}
.app-container {
	background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
	display: grid;
	grid-template-rows: auto 1fr auto;
	min-height: 100%;
}

.content-wrapper {
	grid-template-rows: auto 1fr;
	height: 100%;
}

/* Tasks */
.new-task {
	background-color: var(--secondary-color);
	border: 2px solid var(--primary-color);
}
.circle-arrow {
	color: var(--primary-color);
}
.circle-arrow:hover {
	color: var(--primary-hover);
}

div[name="delete"],
div[name="edit"] {
	transition: all 1s ease;
}
div[name="delete"]:hover,
div[name="edit"]:hover {
	transform: scale(1.1);
}

.item-wrapper {
	background-color: var(--secondary-color);
	height: 3.875rem;
	border: 2px solid var(--primary-color);
}
/* Error */
.input-error {
	transition: all 500ms ease;
}

/* Media Query */
@media (min-width: 1200px) {
	.app-container,
	.canvas-container {
		border-radius: 1.25rem;
		max-width: 1136.8px;
		margin: auto;
		border: 2px solid var(--primary-color);
	}
	#app {
		padding-block: 2rem;
	}
	footer {
		border-radius: 0 0 1rem 1rem;
	}
	header {
		border-radius: 1rem 1rem 0 0;
	}

	header {
		position: fixed !important;
		top: 32px !important;
		width: 1136.8px;
		margin: auto;
		z-index: 20;
		left: 50%;
		transform: translateX(-50%);
	}

	footer {
		position: fixed !important;
		bottom: 32px !important;
		width: 1136.8px;
		margin: auto;
		z-index: 20;
		left: 50%;
		transform: translateX(-50%);
	}
	main {
		margin-top: 115px;
		width: 1136.8px;
	}
	.app-container {
		position: relative;
	}
}