@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body{
  margin: 0;
  padding: 0;
  background-color: cornsilk;
  font-family: 'Poppins', sans-serif;
}

.container{
  padding: 10px;
  width: 380px;
  margin: 0 auto;
}

.header{
  width: 380px;
  height:200px;
  background-image: url('img.jpg');
  background-size: 100% 200%;
  background-repeat: no-repeat;
  border-radius: 15px 15px 0 0;
  position: relative;
}
.clear{
  width : 30px;
  height: 30px;
  position: absolute;
  right:20px;
  top: 20px;
}
.clear i{
  font-size: 30px;
  color: #FFF;
}
.clear i:hover{
  cursor: pointer;
  text-shadow: 1px 3px 5px #000;
  transform: rotate(45deg);
}
#date{
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: #FFF;
  font-size: 25px;
  font-family: 'Titillium Web', sans-serif;
}

/* ------------ content ------------ */
.content{
  width:380px;
  height: 350px;
  max-height:350px;
  background-color: #FFF;
  overflow: auto;
 
}
.content::-webkit-scrollbar { 
  display: none; 
}
.content ul{
  padding:0;
  margin:0;
}
.item{
  width:380px;
  height: 45px;
  min-height: 45px;
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  list-style: none;
  padding: 0;
  margin: 0;
}
.item i.co{
  position: absolute;
  font-size: 25px;
  padding-left:5px;
  left:15px;
  top:10px;
}
.item i.co:hover{
  cursor: pointer;
}
.fa-check-circle{
  color:#6eb200;
}
.item p.text{
  position: absolute;
  padding:0;
  margin:0;
  font-size: 20px;
  left:50px;
  top:5px;
  background-color: #FFF;
  max-width:285px;
}
.lineThrough{
  text-decoration: line-through;
  color : #ccc;
}
.item i.de{
  position: absolute;
  font-size: 25px;
  right:15px;
  top:10px;
}
.item i.de:hover{
  color:#af0000;
  cursor: pointer;
}
/* ------------ add item ------------ */
.add-to-do{
  position: relative;
  width: 360px;
  height:40px;
  background-color: #FFF;
  padding: 10px;
  border-top: 1px solid rgba(0,0,0,0.1);

}
.add-to-do i{
  position: absolute;
  font-size: 40px;
  color: #4162f6;
}

.add-to-do input{
  position: absolute;
  left: 50px;
  height: 35px;
  width: 310px;
  background-color: transparent;
  border: none;
  font-size: 20px;
  padding-left:10px;
}
.add-to-do input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #4162f6;
  font-family: 'Titillium Web', sans-serif;
  font-size: 20px;
}
.add-to-do input::-moz-placeholder { /* Firefox 19+ */
  color: #4162f6;
  font-family: 'Titillium Web', sans-serif;
  font-size: 20px;
}
.add-to-do input:-ms-input-placeholder { /* IE 10+ */
  color: #4162f6;
  font-family: 'Titillium Web', sans-serif;
  font-size: 20px;
}
.add-to-do input:-moz-placeholder { /* Firefox 18- */
  color: #4162f6;
  font-family: 'Titillium Web', sans-serif;
  font-size: 20px;
}