/* Variables */
:root {
	--dark: #1b1c1d;
	--blue: #2185d0;
	--green: #1ebc30;
	--red: #db2828;
	--white: #ffffff;
	--gray: #babac0;
	--secondary: #fbfdff;
}

/* Default Settings */
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body {
	color: var(--dark);
	background: var(--secondary);
	font-family: 'Lato', sans-serif;
}
.ui.grid + .grid {
	margin-top: 0;
}

/* Classes */
body::-webkit-scrollbar {
	background-color: var(--secondary);
	width: 16px;
}
body::-webkit-scrollbar-track {
	background-color: var(--secondary);
}
body::-webkit-scrollbar-thumb {
	background-color: var(--gray);
	border-radius: 16px;
	border: 4px solid var(--white);
}

/* Header */
.main-header {
	color: var(--white);
	background: var(--blue);
	padding: 1.5rem 0;
	text-align: center;
}

/* Add Task */
#add-task {
	width: 70%;
	margin: 0 auto;
	margin-top: 2rem;
}
#add-task input {
	margin: 1.5rem auto;
}

/* Buttons */
#buttons {
	width: 70%;
	margin: 0 auto;
	margin-bottom: 3rem;
}

/* Tasks List */
#tasks-list {
	margin: 0 auto;
	width: 70%;
	list-style: none;
}
#tasks-list li {
	width: 100%;
}
#tasks-list li .remove,
#tasks-list li .edit {
	opacity: 0;
	transition: all 0.3s ease;
}
#tasks-list li:hover .remove,
#tasks-list li:hover .edit {
	opacity: 1;
}
#tasks-list li .column:last-child {
	text-align: right;
}
#tasks-list li i {
	cursor: pointer !important;
}

/* Alert */
.alert {
	width: 70%;
	margin: 0 auto;
	margin-bottom: 1rem;
	text-align: center;
	padding: 0.75rrem 1.25rrem;
	border-radius: 10px;
	line-height: 1.6rem;
}
.alert-warning {
	color: #856404;
	background-color: #fff3cd;
	border-color: #ffeeba;
}

/* Noty */
.noty_theme__metroui.noty_bar .noty_body {
	background: var(--green);
	color: var(--white);
	border-radius: 0.28571429rem;
	box-shadow: 0 0 0 1px var(--green) inset, 0 0 0 0 transparent;
}
.noty_theme__metroui.noty_type__error {
	background: none;
}
.noty_theme__metroui.noty_bar.noty_type__error .noty_body {
	background: var(--red);
	color: var(--white);
	border-radius: 0.28571429rem !important;
	box-shadow: 0 0 0 1px var(--red) inset, 0 0 0 0 transparent;
}

/* Responsive */
@media screen and (max-width: 770px) {
	#add-task,
	#buttons,
	#tasks-list {
		width: 100%;
	}
}

/* Dark Background */

@media (prefers-color-scheme: dark) {
	:root {
		--dark: #fbfdff;
		--blue: #2185d0;
		--green: #1ebc30;
		--red: #db2828;
		--white: #1b1c1d;
		--gray: #babac0;
		--secondary: #1b1c1d;
	}
	body::-webkit-scrollbar-thumb {
		background-color: var(--white);
		border-color: var(--gray);
	}
	.main-header {
		background: var(--dark);
	}
	#tasks-list li:hover .remove,
	#tasks-list li:hover .edit {
		color: var(--white);
	}
	.alert-warning {
		color: #856404;
		background-color: #1b1c1d;
		border-color: #babac0;
	}
	.noty_theme__metroui.noty_bar .noty_body {
		background: var(--dark);
		color: var(--white);
		box-shadow: 0 0 0 1px var(--gray) inset, 0 0 0 0 transparent;
	}
	.noty_theme__metroui.noty_bar.noty_type__error .noty_body {
		background: var(--dark);
		color: var(--white);
		box-shadow: 0 0 0 1px var(--gray) inset, 0 0 0 0 transparent;
	}
}