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

body {
	font-family: 'EB Garamond', serif;
	font-size: 20px;
	background: linear-gradient(to right, #faf4e4, #f2eacb, #faf4e4);
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

/* ------------ container ------------ */

.container {
	width: 380px;
	height: 600px;
	background-color: #fffaf5;
	border-radius: 15px 15px 15px 15px;
	box-shadow: black 0px 0px 20px -10px;
}

/* ------------ header ------------ */

.header {
	height: 30%;
	border-radius: 15px 15px 0 0;
	background-color: #edd176;
	position: relative;
	background: url(img/city.jpeg);
	background-size: cover;
}

.header__reset {
	position: absolute;
	right: 25px;
	top: 25px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: url(img/reset-icon.png) no-repeat center;
	background-size: cover;
	outline: none;
	transition: 1.5s;
	cursor: pointer;
}
.header__reset:hover {
	transform: rotate(360deg);
}

.header__date {
	position: absolute;
	bottom: 10px;
	left: 20px;
	color: #ffe2bd;
	font-size: 2.3rem;
	text-shadow: #000000 2px 2px 5px;
}

/* ------------ content ------------ */

.content {
	height: 60%;
}

.content__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.content__list__item {
	width: 100%;
	height: 45px;
	position: relative;
	border-bottom: 1px solid #c2c2c2;
}

.content__list__item--done {
	color: #ccc;
}

.content__list__item__check {
	position: absolute;
	padding: 0;
	margin: 0;
	left: 10px;
	top: 13px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid black;
	background: none;
	outline: none;
	cursor: pointer;
}
.content__list__item__check--true {
	background: url(img/check_green_icon.svg) no-repeat center;
	background-size: cover;
	border: none;
}

.content__list__item p {
	margin: 0;
	padding: 0;
	position: absolute;
	left: 40px;
	top: 8px;
}

.content__list__item__delete {
	position: absolute;
	background: url(img/trash.svg) no-repeat center;
	background-size: cover;
	padding: 0;
	margin: 0;
	height: 30px;
	width: 25px;
	border: none;
	right: 10px;
	top: 6px;
	cursor: pointer;
	outline: none;
}
.content__list__item__delete:hover {
	filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg)
		brightness(104%) contrast(97%);
}

/* ------------ add item ------------ */

.add-to-do {
	border-radius: 0 0 15px 15px;
	height: 10%;
	background-color: #fffaf5;
	border-top: 1px solid #c2c2c2;
	position: relative;
}

.add-to-do input {
	position: absolute;
	height: 30px;
	width: 250px;
	top: 13px;
	left: 60px;
	border: none;
	background: none;
	outline: none;
	font-size: 1.3rem;
	font-family: 'EB Garamond', serif;
}
.add-to-do button {
	position: absolute;
	height: 35px;
	width: 35px;
	top: 12px;
	left: 15px;
	border-radius: 50%;
	border: none;
	background: url(img/plus-icon.png) no-repeat center;
	background-size: cover;
	outline: none;
	cursor: pointer;
}