* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.hero {
  position: relative;
  direction: rtl;
  background: linear-gradient(90deg, #1CB5E0 0%, #000851 100%);
  width: 100%;
  min-height: 100vh;
}

.tasks-table {
  width: 60%;
  padding-bottom: 20px;
  margin-top: 120px;
  background: rgb(234, 234, 234);
  font-family: 'Tajawal', sans-serif;
  margin-bottom: 30px;
  border-radius: 15px 15px 0 0 ;
}

.header-table {
  width: 100%;
  text-align: center;
  background-color: rgb(38 197 75);
  color: white;
  padding: 8px 0;
  position: relative;
  border-radius: 15px 15px 0 0 ;

}
.rounde-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  border: none;
  color: white;
}
.header-table button {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: gray;
}
.task {
  display: flex;
  background-color:white;
  margin: 10px;
  padding: 5px;
  border-radius: 5px;
  border-bottom: 2px solid #555;
  transition: 0.2s;
}
.task:hover{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 18px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.task .btns {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 25%;
}
.done{
  background-color :  rgb(185 , 253 , 160) ;
}

/* responsive */ 
@media (max-width: 768px) {
.tasks-table { 
  width: 90%;

}
}

















/*

javascriopt code 



    //         document.getElementById("tasks").innerHTML = ""
    // for(task of tasks){ 
    //     let content =
    //     `
    //         <div class="task">
    //             <div style="width: 70%">
    //                 <h2 class="title"> ${task.title} </h2>
    //                 <div style="margin-top: 15px; display: flex; align-items: center">
    //                 <span class="material-symbols-outlined">
    //                     calendar_month
    //                 </span>
    //                 <span class="date">
    //                     ${task.date}
    //                 </span>
    //                 </div>
    //             </div>
    //             <div class="btns">
    //                 <button class="rounde-btn material-symbols-outlined" style="background-color: rgb(114, 0, 0)">
    //                     delete
    //                 </button>
    //                 <button class="rounde-btn material-symbols-outlined" style="background-color: rgb(38, 197, 78)">
    //                     done
    //                 </button>
    //                 <button class="rounde-btn material-symbols-outlined" style="background-color: rgb(22, 22, 212)">
    //                     edit
    //                 </button>
    //             </div>
    //         </div>
    //     `
    //     document.getElementById("tasks").innerHTML += content 
    // }
    
*/