* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: #7F8080;
}

.container {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex: 1 1 3rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
}

.header {
    background-color: #eee;
    padding: 0.75rem 0.5rem 0.75rem 2.5rem;
    text-align: center;
    width: 100%;
  }
  
h2 {
    margin-bottom: 0.5rem;
}

#myInput {
    margin: 0;
    border-radius: 0;
    width: 75%;
    padding: 1rem;
    float: left;
    font-size: 1rem;
  }

  #myUl {
    width: 100%;
  }

  #myUl li{
    width: 100%;
  }

  ul li:nth-child(odd) {
  background: #d9d9d9;
}

ul li {
    position: relative;
    padding: 0.75rem 0.5rem 0.75rem 2.5rem;
    list-style-type: none;
    font-size: 1rem;
    transition: 0.2s;
    width: 100%;
}

/* Custom bullet using ::before */
ul li::before {
    content: '';
    position: absolute;
    left: 0.5rem; /* Position the bullet inside the li */
    top: 50%;
    transform: translateY(-50%);
    width: 0.6rem; 
    height: 0.6rem;
    border: 0.125rem solid #555; 
    border-radius: 50%; 
  }
  .addNew {
    padding: 1.1rem;
    width: 25%;
    background: #d9d9d9;
    color: #555;
    float: left;
    text-align: center;
    font-size: 1rem;
    transition: 0.3s;
    border-radius: 0;
  }

.checked {
    text-decoration: line-through;
    color: #7F8080;
}

/* Style for the close button */
.close {
    position: absolute;
    right: 0.625rem; /* Distance from the right edge of the li */
    top: 50%;
    transform: translateY(-50%); /* Vertically center the button */
    color: #888;
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.3s ease;
  }
  
  .close:hover {
    color: #ff0000; /* Change color on hover */
    transform: translateY(-50%) scale(1.5); ;

  }

@media (max-width: 560px) {
    .container{
        width: 90%;
    }
    h2 {
        font-size: 1.25rem; 
      }
   
  }

  @media (max-width: 430px) {

    #myInput::placeholder {
        visibility: hidden;
      }
  }

  @media (max-width: 350px) {

    .addNew {
        padding: 1.1rem 0.5rem;
    }
  }