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

:root {
 font-size: 10px;
 font-family: Arial, Helvetica, sans-serif;
 --colorOne: #e8da1c;
 --colorTwo: rgba(0, 0, 0, 0.8);
 --colorThree: white;
 --colorFour: #734B46;
}

body {
 background-color: var(--colorFour);
}

.listTodo__container {
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
}

.blur {
 display: none;
 position: fixed;
 left: 0;
 top: 0;
 height: 100vh;
 width: 100%;
 z-index: 1;
}

.listTodo__container.active {
 -webkit-filter: blur(2px);
         filter: blur(2px);
}

.blur.active {
 display: block;
}

.listTodo__title {
 width: 90%;
 margin: 20px auto;
 padding: 5px;
 border-radius: 10px;
 background-color: var(--colorTwo);
 color: white;
 -webkit-box-shadow: 0 0 4px 4px var(--colorThree);
         box-shadow: 0 0 4px 4px var(--colorThree);
 font-size: 2.5rem;
 text-align: center;
}

.listTodo__form {
 width: 90%;
 margin: 40px auto;
 padding: 5px;
 border: 3px solid var(--colorOne);
 background-image: url("images/thomas-kelley-kZLaSWR-7J4-unsplash.jpg");
 background-size: cover;
 background-repeat: no-repeat;
 border-radius: 10px;
 -webkit-box-shadow: 0 0 8px 8px var(--colorTwo);
         box-shadow: 0 0 8px 8px var(--colorTwo);
 min-height: 400px;
}

.listTodo__label {
 display: block;
 margin: 30px auto;
 padding: 5px;
 font-size: 2rem;
}

.listTodo__taskInput,
.listTodo__searchInput {
 display: block;
 margin: 5px auto 5px 0;
 padding: 5px;
 width: 95%;
 height: 40px;
 border-radius: 5px;
 font-size: 2rem;
 background-color: var(--colorOne);
}

.listTodo__taskInput:focus,
.listTodo__searchInput:focus {
 outline: none;
}

.listTodo__saveTaskBtn {
 display: block;
 margin: 20px auto 20px 0;
 padding: 8px;
 font-size: 2rem;
 background-color: var(--colorFour);
 color: var(--colorThree);
 border-radius: 10px;
 cursor: pointer;
}

.listTodo__taskNumberInfo {
 width: 60%;
 min-height: 45px;
 margin: 20px auto;
 padding: 10px;
 border-radius: 15px;
 -webkit-box-shadow: 0 0 4px 4px var(--colorThree);
         box-shadow: 0 0 4px 4px var(--colorThree);
 font-size: 2.1rem;
 text-align: center;
 color: var(--colorThree);
}

/* task container */

.listTodo__tasks {
 display: grid;
 grid-template-columns: 1fr;
 row-gap: 10px;
 width: 90%;
 margin: 0 auto;

}

.listTodo__task {
 border-bottom: 4px solid var(--colorTwo);
 padding-bottom: 15px;
 font-size: 2rem;
 font-weight: 400;
 letter-spacing: 1px;
 margin: 10px 0;
 color: var(--colorThree);
 list-style: none;
 /* ******************************* */
}

.listTodo__task.active {
 color: grey;
 text-decoration: line-through;
}

.listTodo__btn {
 font-size: 5rem;
 background-color: transparent;
 border: none;
 color: var(--colorThree);
 -webkit-transform: scale(0.8);
     -ms-transform: scale(0.8);
         transform: scale(0.8);
 cursor: pointer;
 -webkit-transition: 0.3s;
 -o-transition: 0.3s;
 transition: 0.3s;
}

.listTodo__okBtn.active {
 color: grey;
}

.listTodo__btn:hover {
 -webkit-transform: scale(1);
     -ms-transform: scale(1);
         transform: scale(1);
}

.listTodo__editBtn,
.listTodo__deleteBtn,
.listTodo__backTickBtn {
 margin-left: 20px;
}

/* --------------------------- */
.listTodo__editBtn i,
.listTodo__deleteBtn i,
.listTodo__okBtn i {
 pointer-events: none;
}

/* -------------------------- */
@media(min-width:1024px) {
 .listTodo__form {
  background-position: 0 -200px;
 }
}

@media(min-width:1100px) {
 .listTodo__form {
  background-position: 0 -296px;
 }

 .listTodo__taskInput,
 .listTodo__searchInput {
  display: inline-block;
  width: 80%;
 }

 .listTodo__saveTaskBtn {
  display: inline-block;
  margin-left: 4px;
 }
}