@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* Utility classes */
.finished{
   text-decoration: line-through;
   color:rgba(245, 245, 245, 0.66);
}

body{
   color: whitesmoke;
   font-family: 'Open Sans';
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   background-color: #141139;
   background-image: url('images/clouds-5673504.png');
   background-size: cover;
   background-repeat: no-repeat;
   
   
}

.main-container{
   background-color: rgba(120, 113, 113, 0.156);
   border-radius: 5px;
   padding: 1rem .6rem;
   box-shadow: 0 0 2px 1px rgba(245, 245, 245, 0.723);
   min-width: 300px;
   backdrop-filter: blur(1px);
}

h1{
   font-size: 1.2rem;
   text-align: center;
   margin-top: 0;
}

.progress{
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: .5rem .8rem ;
   box-shadow: 0 0 2px 1px rgba(245, 245, 245, 0.723);
   border-radius: 5px;
}

.progress__message{
   display: block;
   font-size: 1rem;
   font-weight: 600;
   margin-bottom: -8px;
}

#progress-bar{
   /* width: 80%; */
   height: 5px;
   appearance: none;
   border-radius: 20px;
   border: none;
}

#progress-bar::-webkit-progress-value{
   background-color: rgb(65, 216, 65);
   border-radius: 15px;
}
#progress-bar::-webkit-progress-bar{
   background-color: rgb(65, 216, 65);
   border-radius: 15px;
}
#progress-bar::-moz-progress-bar{
   background-color: rgb(65, 216, 65);
   /* border-radius: 15px; */
}

.progress__task-count{
   box-shadow: 0 0 2px 1px rgba(245, 245, 245, 0.723);
   padding: .3rem;
   border-radius: 50%;
   aspect-ratio: 1/1;
   display: flex;
   align-items: center;
}

.progress__task-count > span{
   font-size: 1.1rem;
   font-weight: 700;
}

.add-task{
   display: flex;
   justify-content: space-between;
   margin-block: .5rem ;
}

.add-task input{
   width: 80%;
   border-radius: 20px;
   border: none;
   background-color: rgba(245, 245, 245, 0.183);
   padding: .3rem .5rem;
   color: white;
   font-size: .8rem;
}
.add-task input::placeholder{
   font-size: .8rem;
   color: rgba(0, 0, 0, 0.847);
}
.add-task input:focus{
   outline: 1px solid rgba(245, 245, 245, 0.642);
}

.add-task button{
   background-color: rgba(245, 245, 245, 0.183);
   border-radius: 50%;
   border: none;
   aspect-ratio: 1/1;
   padding: .1em .6em;
   color: white;
   font-size: .8rem;
   cursor: pointer;
}

.task{
   border-radius: 50px;
   padding: .2rem;
   background-color: rgba(245, 245, 245, 0.183);
   display: flex;
   justify-content: space-between;
   gap: 5px;
   margin-bottom: .5rem;
}

.task .checkbox-task{
   appearance: none;
   height: 1rem;
   width: 1rem;
   background-color: white;
   border-radius: 50%;
   position: relative;
   padding: 8px;
   margin-bottom: -2px;
   margin-left: 3px;
   margin-right: 0px;
}
.task .checkbox-task:checked{
   background-color: rgb(65, 216, 65);
   
}
.task .checkbox-task:checked::after{
   content: '✔';
   height: 2px;
   width: 3px;
   position: absolute;
   left: 6px;
   top: -3px;
   transform: rotate(20deg);
}

.task__text{
   font-size: .8rem;
   color: whitesmoke;
}

.task button{
   border-radius: 50%;
   aspect-ratio: 1/1;
   border: none;
   cursor: pointer;
}

.btn-delete{
   background-color: rgb(228, 55, 55);
   margin-right: 3px;
}