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

body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	background-color: #f2f2f2;
	display: flex;
	flex-direction: column;
	gap: 2em;
}

header {
	background-color: #E0DCE4;
	padding: 20px;
	text-align: center;
	color: #fff;

	img {
		width: 140px;
		height: 48px;
	}

	#hero {
		max-width: 100em;
		margin: auto;
		display: flex;
		width: 100%;
		gap: 8px;

		#inputText {
			width: 100%;
			font-size: 16px;
			color: #6B6572;
			background: #F0EDF2;
			border: 2px solid #E0DCE4;
			border-radius: 8px;
			padding: 10px;
			outline: none;

			&:focus {
				border-color: #6F3CC3;
				background: #fff;
			}
		}

		button {
			display: flex;
			align-items: center;
			background-color: #6F3CC3;
			color: #fff;
			padding: 12px 24px;
			border: none;
			border-radius: 8px;
			cursor: pointer;
			gap: 8px;
			font-size: 16px;
			transition: background 0.3s ease;

			&:hover {
				background-color: #502B9E;
			}
		}
	}
}

main {
	max-width: 100em;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-self: center;
	gap: 24px;
}

#task-list {
	width: 100%;
	display: flex;
	flex-direction: column;
	border-top: 1px solid #E0DCE4;
	gap: 24px;
	padding: 20px;

	article.task {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
		padding: 10px;
		background: #E0DCE4;
		color: #262428;

		div.task{
			display: flex;
			gap: .5em;
			align-items: center;
			label::first-letter{
				text-transform: capitalize;
			}
			input {
				appearance: none;
				width: 20px;
				height: 20px;
				border: 2px solid #6F3CC3;
				border-radius: 50%;
				cursor: pointer;
				position: relative;
	
				&:checked {
					background-color: #479C6E;
					border-color: #6F3CC3;
	
					&::before {
						content: "✔";
						color: white;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						font-size: 14px;
						font-weight: bold;
					}
				}
			}
		}
			button{
				background: transparent;
				border: none;
				width: 2em;
				height: 2em;
				img{
					margin: auto;
				}
			}
	}
}

#tasks-header {
	width: 100%;
	display: flex;
	justify-content: space-around;
	color: gray;

	#tasks-counter,
	#tasks-completed {
		display: flex;
		align-items: center;

		h3 {
			font-size: 14px;
			font-weight: bold;
			margin-right: 10px;
		}

		div#counter{
			background: #BFE3D0;
			width: 30px;
			height: 22px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			color: #2D6C4A;
			padding: 1em;
			border-radius: 50%;
		}
		div#counter-completed{
			background: #DDD2EF;
			color: #6F3CC3;
			width: 30px;
			height: 22px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			padding: 1em;
			border-radius: 50%;
		}
	}
}