body{
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background-image: url('https://i.pinimg.com/736x/3e/3b/b5/3e3bb50dee996f79b9f7f82eebcb6ae1.jpg');
    background-size: cover;        
    background-repeat: no-repeat;  /* Prevent repeating */
    background-position: center;
    height: 100vh;
}
.header{
    color: black;
    padding: 220px;
    text-align: center;
}
input[type="text"]
{
    width: 75%;
    padding:15px;
    border-color:black ;
    border-radius: 8px;
    font-size: 20px;
}
.addBtn{
    padding: 30px;
    background-color: #ab84d0;
    padding: 20px;
    color: white;
    border-radius: 8px;
    margin-left: 10px;
    cursor: pointer ; /*cursor arrow changes to a hand*/
}
.addBtn:hover {
  background-color: #000;/*when you hover over add button, background turns black*/
}

ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul li{
    padding: 12px;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background:rgb(117, 96, 198) ;
    position: relative;
    font-size: 18px;
}
ul li.checked {
  text-decoration: line-through;
  color: gray;
  /* When a task is marked as complete, it:Crosses out the text, Changes color to gray.
 */
}
ul li:hover
{
    background: #bde0fd;
}
ul li ::before
{
    content:"✔";
    position: absolute;
    left:10px;
    color:green;
    display:none;
    /* Adds a green checkmark in front of each task but hides it by default. */
}
ul li.checked::before {
  display: inline;
  /* Shows the green checkmark next to completed tasks. */
}
/* Make task list match input width and center it */
ul#myUL {
  width: 80%;
  max-width: 700px;
  margin: 0px auto;
  padding: 0;
}

/* Task items styled like cards */
ul li {
  background: #e3f2fd;
  color: #333;
  margin-bottom: 10px;
  padding: 12px 16px;
  font-size: 18px;
  border-radius: 8px;
  position: relative;
  list-style: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: 0.3s ease;
}

/* Hover effect on tasks */
ul li:hover {
  background: #d1ecff;
}


ul li.checked {
  text-decoration: line-through;
  color: #888;
  background: #f0f0f0;
}

/* Delete button */
.close {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: #888;
  cursor: pointer;
  transition: color 0.2s ease;
}

.close:hover {
  color: #e91e63;
}

ul li.checked::before {
  content: "✔";
  margin-right: 10px;
  color: green;
}