@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

:root {
    --primary-color: #e6b7eca1;
    --second-color: #eee;
    --input-color: #bfbfbf;
    --ter-color: #fff;
}

html {
    font-size: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Times New Roman', Times, serif;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../image/background.jpg");
    background-position: center;
    background-size: cover;
}

.footer {
    padding: 1rem 0;
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    color: var(--ter-color);
    backdrop-filter: blur(0.938rem);
    background: transparent;
    border: 0.125rem solid var(--primary-color);
    border-radius: 1.125rem;
}

.footer-text p {
    font-size: 1.6rem;
}

@media (max-width: 1200px) {
    html {
        font-size: 100%;
    }
}

@media (max-width: 991px) {

    .footer {
        padding: 2rem 3%;
    }
}


@media (max-width: 450px) {
    html {
        font-size: 100%;
    }

}

@media (max-width: 365px) {
    .footer {
        flex-direction: column-reverse;
    }

    .footer p {
        text-align: center;
        margin-top: 2rem;
    }
}

.container {
    width: 25rem;
    height: auto;
    min-height: 25rem;
    padding: 2.375rem;
    background: transparent;
    border: 0.125rem solid var(--primary-color);
    border-radius: 1.125rem;
    backdrop-filter: blur(0.938rem);
}

h1 {
    color: var(--second-color);
    text-align: center;
    margin-bottom: 2.25rem;
}

.input-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.563rem;
}

.todo-input {
    flex: 1;
    outline: none;
    padding: 1.125rem 0.625rem 0.625rem 1.25rem;
    background-color: transparent;
    border-radius: 2.25rem;
    border: 0.125rem solid var(--primary-color);
    color: var(--second-color);
    font-size: 1rem;
    margin-right: 0.625rem;
}

.todo-input::placeholder {
    color: var(--input-color);
}

.add-button {
    border: none;
    outline: none;
    background: var(--primary-color);
    color: var(--ter-color);
    font-size: 2.188rem;
    cursor: pointer;
    border-radius: 2.875rem;
    width: 2.5rem;
    height: 2.5rem;
}

.empty-image {
    margin: 3.438rem auto 0;
    display: block;
}

.todo {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #463c7b;
    border-radius: 5px;
    margin: 10px 0;
    padding: 10px 12px;
    border: 2px solid #e6b7eca1;
    transition: all 0.2s ease;
  }
  
  .todo:first-child {
    margin-top: 0;
  }
  
  .todo:last-child {
    margin-bottom: 0;
  }
  
  .todo:hover {
    background-color:#e6b7eca1;
  }
  
  .todo label {
    cursor: pointer;
    width: fit-content;
    display: flex;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    color: #eee;
  }
  
  .todo span {
    padding-left: 20px;
    position: relative;
    cursor: pointer;
  }
  
  span::before {
    content: "";
    height: 20px;
    width: 20px;
    position: absolute;
    margin-left: -30px;
    border-radius: 100px;
    border: 2px solid #e6b7eca1;
  }
  
  input[type='checkbox'] {
    visibility: hidden;
  }
  
  input:checked + span {
    text-decoration: line-through
  }
  
  .todo:hover input:checked + span::before, input:checked + span::before {
    background: url(./check.svg) 50% 50% no-repeat #09bb21;
    border-color: #09bb21;
  }
  
  .todo:hover span::before {
    border-color: #eee;
  }
  
  .todo .delete-btn  {
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: #eee;
    font-size: 24px;
  }
  
  .todos-container  {
    height: 300px;
    overflow: overlay;
  }
  
  .todos-container::-webkit-scrollbar-track  {
    background: rgb(247, 247, 247);
    border-radius: 20px
  }
  
  .todos-container::-webkit-scrollbar  {
    width: 0;
  }
  
  .todos-container:hover::-webkit-scrollbar  {
    width: 7px;
  }
  
  .todos-container::-webkit-scrollbar-thumb  {
    background: #d5d5d5;
    border-radius: 20px;
  }
  
  .filters {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
  }
  
  .filter {
    color: #eee;
    padding: 5px 15px;
    border-radius: 100px;
    border: 2px solid #e6b7eca1;
    transition: all 0.2s ease;
    cursor: pointer;
  }
  
  .filter.active, .filter:hover {
    background-color: #e6b7eca1;
  }
  
  .delete-all {
    display: flex;
    color: #eee;
    padding: 7px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .delete-all:hover {
    border-radius: 5px;
    background-color: #e6b7eca1;
  }