* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
	letter-spacing: 2px;
}

body {
	align-items: center;
	justify-content: center;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: auto;
}
h1 {
	position: relative;
	display: inline-block;
	top: -50%;
	right: 25%;
	font-size: 45px;
	color: tomato;
	opacity: 0.5;
}

.todo-container {
	position: relative;
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
	justify-content: space-around;
	width: 30%;
	height: 80vh;
	border: 1px solid grey;
	background-color: rgb(255, 255, 255);
	box-shadow: 0 4px 8px 0 rgb(185, 90, 189), 0 6px 20px 0 rgb(255, 255, 255);
}

.todo-list {
	width: 95%;
	position: relative;
	top: -30px;
	height: 66.8vh;
	overflow-y: scroll;
	text-align: center;
	align-items: center;
	justify-content: center;
	overflow-x: hidden;
	z-index: 1;
	background-color: rgb(255, 255, 255);
}

.list-els {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 103%;
	height: 10vh;
	padding: 15px;
	top: -10px;
	text-align: center;
	color: rgb(254, 254, 254);
	background-color: #000;
	overflow-wrap: inherit;
	overflow-x: scroll;
	font-weight: 600;
	font-size: 20px;
	border-bottom: 2px solid rgb(189, 182, 182);
	transition: all linear 1s;
}

.form {
	position: absolute;
	bottom: 30px;
	width: 110%;
	z-index: 0;
	transition: all linear 1s;
}

#user-input {
	height: 6vh;
	width: 100%;
	outline: none;
	font-size: 20px;
	padding: 20px;
	color: #4e4646;
	border: 2px solid springgreen;
	box-shadow: 0 0px 9px tomato;
	transition: all linear 1s;
}

::-webkit-scrollbar {
	width: 5px;
	display: none;
}

::-webkit-scrollbar-thumb {
	border-radius: 30px;
	display: none;
}
::-webkit-scrollbar-thumb:hover{
	background-color: lightblue;
	display: block;
}

.list-els.finished {
	text-decoration: line-through;
	color: rgb(184, 189, 184);
	box-shadow: 0px 0px 10px #52e43f;
	background-color: #fff;
}

.far {
	position: relative;
	cursor: pointer;
}

.fa-check-circle {
	line-height: 0;
	color: red;
	transition: all 1s ease-in-out;
	right: 40%;
	top: -50px;
}

.fa-trash-alt {
	line-height: 1;
	color: rgb(240, 6, 6);
	transition: all 1s ease-in-out;
	bottom: 50px;
	left: 40%;
	width: 10px;
}

.fa-plus-square {
	position: absolute;
	right: 10%;
	transform: translate(50%, 20%);
	color: rgb(59, 189, 161);
	font-size: 30px;
	cursor: pointer;
	background-color: transparent;
	box-shadow: 0 5px 20px rgb(253, 253, 253);
}

.red {
	color: rgb(86, 255, 71);
}


@media screen and (max-width: 767px) {
	.todo-container {
		width: 70%;
		height: 75vh;
	}
	.todo-list{
		height: 60vh;
	}
	#search-todo {
	   margin-bottom: 15px;
	   left: -1%;
	}
	.fa-search{
		display: none;
	}
}

#search-todo {
	position: relative;
	font-size: 20px;
	line-height: 2px;
	padding: 10px;
	display: inline-block;
	right: -30%;
	border: none;
	outline: none;
	height: 5vh;
	width: 40vh;
	box-shadow: 0 0px 9px tomato;
}

#search-todo::placeholder{
	font-size: 15px;
	color: #c5c3c3;
}
.fa-search{
	position: fixed;
	top: 100px;
	cursor: pointer;
	right: 11%;
	color: rgb(160, 158, 158);
	font-size: 25px;
}
.fa-recycle{
	margin-top: -10px;
   margin-left: 45vh;
   font-size: 25px;
   color: rgb(240, 6, 6);
   cursor: pointer;
   
}