/* li{
    list-style: none;
}
span{
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    border: 1px solid black;
    margin-right: 10px;
}
.active{
    background-color: green;
    border-color: green;
} */
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap");

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

body {
     font-family: "Josefin Sans", sans-serif;
     background: rgb(242, 242, 242) url("../images/light-bg.jpeg");
     background-repeat: no-repeat;
     background-size: 100% 300px;
     transition: 1s;
}

ul {
     list-style: none;
}

main {
     width: 500px;
     margin: auto;
     padding: 70px 0;
}

.todo-header {
     display: flex;
     justify-content: space-between;
}

.todo-heading {
     color: rgb(255, 255, 255);
     font-size: 40px;
     font-weight: 700;
     letter-spacing: 15px;
}

.todo-header i {
     color: rgb(255, 255, 255);
     font-size: 30px;
     cursor: pointer;
     transition: 1s;
}

.todo-form {
     width: 100%;
     margin: 30px 0;
     background-color: white;
     display: flex;
     align-items: center;
     padding: 10px 20px;
     gap: 10px;
     border-radius: 5px;
     box-shadow: 0px 35px 50px -15px rgba(194, 195, 214, 0.5);
     transition: 1s;
}

.add-input {
     width: 100%;
     border: none;
     outline: none;
     color: rgb(148, 149, 165);
     font-size: 18px;
     font-weight: 400;
     letter-spacing: -0.25px;
     font-family: "Josefin Sans", sans-serif;
     background-color: transparent;

}

.add-input::placeholder {
     font-family: "Josefin Sans", sans-serif;
}

.add-btn {
     background-color: transparent;
     border: 1px solid rgb(148, 149, 165);
     border-radius: 100%;
     min-width: 25px;
     min-height: 25px;
     cursor: pointer;
     color: rgb(148, 149, 165);
}

.todo-container {
     background-color: white;
     border-radius: 5px;
     transition: 1s;
}

.list-item {
     padding: 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     cursor: pointer;
}

.list-item:not(:last-child) {
     border-bottom: 1px solid rgb(227, 228, 241);
}

.list-item div {
     display: flex;
     align-items: center;
     gap: 10px;
}

.item-description {
     color: rgb(73, 76, 107);
}

.checked-item {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 25px;
     height: 25px;
     border: 1px solid rgb(148, 149, 165);
     border-radius: 100%;
     color: transparent;
     cursor: pointer;
}

.checked .checked-item {
     background: linear-gradient(135.00deg, rgb(85, 221, 255), rgb(192, 88, 243) 100%);
     color: white;
}

.checked .item-description {
     text-decoration: line-through;
     color: rgb(209, 210, 218);
}

.remove-item {
     display: none;
     width: 25px;
     height: 25px;
     font-size: 18px;
     color: red;
     background: -webkit-linear-gradient(135.00deg, rgb(85, 221, 255), rgb(192, 88, 243) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;

}

.list-item:hover .remove-item {
     display: block;
}

.darkmode {
     transition: 1s;
     background: #171823 url('../images/dark-bg.jpeg');
     background-size: 100% 300px;
     background-repeat: no-repeat;
}

.darkmode form,
.darkmode .todo-container {
     background-color: rgb(37, 39, 61);
}

.darkmode .todo-container {
     color: rgb(200, 203, 231);
}

.darkmode .list-item {
     border-bottom-color: rgb(57, 58, 75);
}

.darkmode .item-description {
     color: rgb(209, 210, 218);
}

.darkmode .checked .item-description {
     color: rgb(73, 76, 107);
}

@media(max-width: 992px) {
     .remove-item {
          display: block;
     }
}

@media(max-width: 576px) {
     main {
          width: 90%;
     }
}