@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

*{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   list-style: none;
   /* text-decoration: none; */
}

:root {
   --bgcolor:#cac5ff;
   --textcolor:#e7e5ff;
   --btncolor:#3e57a1;
   --hovercolor:#0216ca;
}

body{
   font-family: "Inter", sans-serif;
   height: 100vh;
   display: grid;
   place-items: center;
   text-align: center;
   background-color: var(--bgcolor);
}

.box-container {
  background-color: white;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 0 3px rgba(0, 0, 0, .3);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 450px;
  height: auto;
}

.box-container .header {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.header .input-button {
   display: flex;
   column-gap: 1rem;
   align-items: center;
   justify-content: center;
   
}

.input-button input {
   border: 1px solid var(--btncolor);
   outline: none;
   border-radius: 5px;
   height: 2rem;
   padding-inline: 10px;
   width: 70%;
}

button {
   padding-inline: 10px;
   background-color: var(--btncolor);
   border: none;
   outline: none;
   border-radius: 5px;
   font-size: 1.1rem;
   font-weight: 500;
   color: var(--textcolor);
   height: 2rem;
   cursor: pointer;
   transition: all .3s;
}

ul .todo > button:hover, button:hover {
   background-color: var(--hovercolor);
}

.btn-box {
   display: flex;
   column-gap: 20px;
   align-items: center;
}

ul {
   display: flex;
   flex-direction: column;

}

 .todo {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px;
   border: 1px solid rgba(0, 255, 255, 0.123);
}


.active {
   text-decoration: line-through;
   background-color: rgba(0, 255, 255, 0.233);
   padding: 20px;
   opacity: 50%;
}


ul .todo .compbtn {
   background-color: green;
   transition: all .3s ease-in-out;
}

ul .todo .undobtn {
   background-color: green;
   display: none;
}


ul .todo .deletebtn {
   background-color: red;

}