* {
	/*
	*    VARIABLES
	*/
	--grey50: #f9fafb;
	--grey300: #cbd5e1;
	--grey500: #6b7280;
	--grey700: #374151;
	--grey950: #030712;

	--primary50: #eff6ff;
	--primary300: #93c5fd;
	--primary500: #3b82f6;
	--primary700: #1d4ed8;
	--primary950: #172554;

	--error50: #fef2f2;
	--error300: #fca5a5;
	--error500: #ef4444;
	--error700: #b91c1c;
	--error950: #450a0a;

	--warning50: #fff7ed;
	--warning300: #fdba74;
	--warning500: #f97316;
	--warning700: #c2410c;
	--warning950: #431407;

	--success50: #f0fdf4;
	--success300: #86efac;
	--success500: #22c55e;
	--success700: #15803d;
	--success950: #052e16;

	/*
	*    FONTS
	*/
	font-family: 'Rubik', sans-serif;
	font-optical-sizing: auto;
	font-weight: 350;
	font-style: normal;
}

body {
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;

	height: 100dvh;
}

button {
	cursor: pointer;
	border: none;
	border-radius: 4px;
	padding: 8px 16px;
}

/*
*    TODOS LIST
*/

.todo-list {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;

	justify-content: space-between;
	width: 100%;

	li {
		justify-content: space-between;
		align-items: center;
		display: flex;
		gap: 16px;

		.todo-info {
			display: flex;
			align-items: center;
			gap: 8px;

			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

			input[type='checkbox'] {
				cursor: pointer;
			}
		}

		button {
			background-color: var(--error50);
			color: var(--error950);
		}

		button:hover {
			background-color: var(--error500);
			color: var(--error50);
			cursor: pointer;
		}
	}
}

.new-todo {
	display: flex;
	flex-direction: column;
	gap: 8px;

	input {
		border: none;
		background-color: var(--grey50);
		color: var(--grey700);
		border-radius: 4px;
		padding: 12px 16px;
		width: calc(100vw-8px);
		font-style: italic;
	}

	button {
		background-color: var(--primary50);
		color: var(--primary950);
		border: none;
		border-radius: 4px;
		padding: 12px 16px;
		font-weight: bold;
	}

	button:hover {
		background-color: var(--primary700);
		color: var(--primary50);
		cursor: pointer;
	}
}

.error {
	color: white;
	background-color: red;
	padding: 16px 32px;
	border-radius: 8px;
	font-size: 16px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

.error:hover {
	background-color: #f55;
	cursor: pointer;
	transform: translate(-50%, -50%) scale(0.9);
	transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

.error:hover::before {
	content: '× Hide Error';
	background-color: red;
	padding: 8px 16px;
	border-radius: 8px;
	width: max-content;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

@media (min-width: 650px) {
	.new-todo {
		flex-direction: row;

		input {
			width: 100%;
		}

		button {
			padding: 12px 48px;
		}
	}
}