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

body{
	font-family: "Roboto", sans-serif;
	background-color: #3B3F45;
}

li {
	list-style: none;
}

header {
	background-color: #4A4F56;
	margin-bottom: 40px;
}
.header-container {
	width: 50%;
	margin: 0 auto;
	text-align: center;
	padding: 23px 0;
}

hgroup>h1 {
	font-size: 2.25rem;
	font-weight: 700;
	color: #FF8984;
	margin-bottom: 4px;
}

hgroup>p {
	font-size: 1.5rem;
	color: #FF8984;
}

.container {
	width: 800px;
	margin: 0 auto;
}

.list {
	margin-bottom: 40px;
}


input[type=checkbox] {
	scale: 2.7;
	border-radius: 0;
	margin-right: 15px;
	accent-color: white;
}

label {
	display: inline-block;
	width: 100%;
	height: 68px;
	padding: 12px 23px;
	background-color: #88839E;
	border-top: 4px solid #88839E;
	border-bottom: 4px solid #88839E;
	color: #FFF;
	font-size: 27px;
}

.list-item:nth-of-type(even)>label {
	background-color: #625E77;
	border-top: 4px solid #625E77;
	border-bottom: 4px solid #625E77;
}

.list-item:hover > label {
	border-top: 4px solid #FFF;
	border-bottom: 4px solid #FFF;
}

.list-item:has(input:checked) {
	>label {
		background-color: #7A7593;
		border-top: 4px solid #7A7593;
		border-bottom: 4px solid #7A7593;
		color: #9B96AC;
		& span {
			text-decoration: line-through;
		}
	}
}
.list-item:has(input:active) {
	>label {
		background-color: #FF8984;
	}
}

label>.item-note {
	font-size: 17px;
	margin-left: 15px;
		&:before {
			content: "(";
			display: inline-block;
			margin-right: 2px;
			width: 5px;
			height: 5px;
		}

		&::after {
			content: ")";
			display: inline-block;
			width: 5px;
			height: 5px;
		}
}

#pickles ~ .item-note {
	margin-left: 8px;
}

button {
	width: 100%;
	height: 65px;
	background-color: #4A4F56;
	color: #FF8984;
	font-size: 1.75rem;
	border: none;
	&:hover {
		background-color: #3B3F45;
		border:1px solid #FF8984;
	}
	&:active {
		background-color: #FF8984;
		color: #4A4F56;
	}
}