* {
	font-size: 20px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow-x: hidden;
	text-overflow: ellipsis;
	outline: none;
	transition: all 0.4s;
	font-family: 'Poppins';
}

#main {
	margin: 15px auto;
}

#text {
	width: 80vw;
	max-width: 800px;
	height: 50px;
	border-radius: 15px;
	padding: 5px;
	padding-right: 51px;
	border: none;
	color: #00000085;
	background: #00000010;
}

#text:focus {
	background: #fff;
}

#text:focus + #btn {
	background: #00000010;
	color: #00000070;
}

#btn {
	width: 50px;
	height: 50px;
	margin-left: -50px;
	border-radius: 100%;
	z-index: 10;
	border: none;
	font-size: 25px;
	background: blue;
	color: white;
}

ul {
	text-align: center;
	margin: 5vh auto;
}

li {
	list-style: none;
	width: 80vw;
	max-width: 800px;
	max-height: 500px;
	margin: 20px auto;
	text-align: left;
	box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
	padding: 10px;
	padding-right: 5px;
	border-radius: 5px;
}

.data {
	width: 60vw;
	max-width: 700px;
	word-wrap: break-word;
}

.check,
.close {
	float: right;
}

.close {
	margin: 0 10px 0px 5px;
}

#input {
	text-align: center;
	height: 8vh;
	min-height: 68px;
	box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
}

hr {
	width: 30vw;
	max-width: 200px;
	height: 3px;
	background: gray;
	margin: auto;
	text-align: center;
}

.close i,
.check i {
	color: gray;
	transition: 0.2s;
	font-size: 25px;
}

.close i:hover {
	color: #e91e63;
}

.check i:hover {
	color: #25b99a;
}

#done .check i {
	color: #25b99a;
}

span {
	display: inline-block;
}

#active:empty:after {
	content: "You have nothing to do!";
}

#done:empty:after {
	content: "You have yet to do any task!";
}

::-webkit-scrollbar {
	width: 8px;
}

li::-webkit-scrollbar {
	width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
	background: white;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: deepskyblue;
	border-radius: 50px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: blue;
}