*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
body{
  background-image: linear-gradient(120deg, #212121, #0d7377);
  min-height: 100vh;
  font-family: "Sansita Swashed";
}
h1{
  text-align: center;
  margin-top: 100px;
  font-size: 80px;
  color: #ffffff;
  margin-bottom: 20px;
}
h3{
  margin-top: 50px;
  font-size: 30px;
}
.input{
  width:100%;
  padding:10px;
  background: none;
  font-size: 18px;
  color: #ffffff;
  outline:none;
  border:none;
  border-bottom: 2px solid #ffffff;
  margin-top: 50px;
}
.task{
  background: rgba(255, 255, 255, 0.5);
  color:#000;
  width:100%;
  padding: 18px;
  margin:6px 0;

}
.task i{
  float:right;
  margin-right: 20px;
  cursor: pointer;
}
.container{
  max-width: 800px;
  margin:auto;
  padding:10px;
  color:#ffffff;
}
.comp .task{
  background: rgba(0, 0, 0, .5);
  color:#ffffff;
}