*{
	margin:0;
	padding:0;
}
body{
	height:100vh;
	width: 100%;
	font-family: Verdana,Geneva,Tahoma,sans-serif;
	display:flex; /*IMPORTANT*/
}

.container{
		/*background-image: url("../TO-DO LIST/bg_image.jpg");*/
		background-color: #BCC6CC;
		display: flex;
		flex-grow: 1;
		flex-direction: column; /*IMPORTANT*/
		justify-content: center;
		align-items:center;
}

.todo-list{
	background:white;
	display: flex;
	flex-direction: column;
	min-width: 400px;
	max-width: 600px;
	border-radius: 10px;
	height: 500px;
	box-shadow: 0px,0px,20px,white;
}

.header h1{
	color: #5C5858;
	text-align: center;
}

.list{
	flex-grow: 1;
	padding: 2em; /*IMPORTANT - 1em = 16px, and 2em = 32px*/
	overflow-y: scroll; /* IMPORTANT- we'll apply webkit css extensions further to this VERTICAL SCROLLBAR*/
}

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

.list ul li{
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}
.delete{
	cursor: pointer;
}

.list ul li i{
	cursor: pointer;
	color: red;
	padding:1em;
}

.list ul li i:hover{
	background-color: #F1F1F1;
}
.addtask{
	padding: 2em;
	display: flex;
}

.addtask input{
	border:1px solid #EEE;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	flex-grow: 1;
	padding: 1 em;
	outline: none;
}
.addtask input:hover{
	border:1px solid #DDD;

}
.addtask input:focus{
	border:1px solid black;
}
.addtask input:active{
	border:1px solid #CCC;
}
.addtask button{
	outline: none;
	border:none;
	padding: 1em;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color:black; 
	color:white;
	cursor: pointer;

}


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


::-webkit-scrollbar-track{		/*Scrollbar background*/
	box-shadow: inset 0 0 5px #CCC;
	border:5px;
}

::-webkit-scrollbar-thumb{		/*Scrollbar(dragger)*/
	background-color: #566573;
	border-radius: 10px;
};