body{
    background-color: #FFF8F0;
}


/* Header design */

.header{
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 40px;
}


#heading{
    color: #333333;
    font-weight: 700;
}

#desc{
    color: #888888;
    line-height: 2px;
    font-weight: 200;
}



/* Addition Box */

.box{
    display: flex;
    margin: 0% auto;
    align-items: center;
    justify-content: center;
    height: 75px;
    width: 95%;
    background-color: #fdebf1 ;
    border:2px solid #F8BBD0;
    border-radius: 20px;
}

#button{
    background-color: #f4cbd9;
    height: 35px;
    border-radius: 10%;
    margin-left: 10px;
    border: 2px solid #f4cbd9;
    color: #333333;
}

#add{
    height: 35px;
    width: 63%;
    border-radius: 5px;
    border: 2px solid #F8BBD0;
    font-size: medium;
    color: #888888;
    padding-left:20px ;
}

/* Category box */

.categories{
    display: flex;                
    justify-content: center;      
    gap: 20px;                    
    margin-top: 20px;

}

.design{
    display: flex;
    height: 35px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    color: #333333;
    font-family: Arial, Helvetica, sans-serif;
}

.Assigment{
    width: 130px;
    background-color: #F8BBD0;
}

.Exam{
    width: 80px;
    background-color: #FFF59D;
}

.Personal{
    width: 110px;
    background-color:#FFE0B2;
}

/* Task Card */

.task_card{
    display: flex;
    justify-content: space-between;      
    align-items: center;                 
    background-color: white;
    border: 2px solid #FFF3E0;
    border-radius: 20px;
    width: 85%;
    padding: 5px 25px;
    margin: 10px auto;
}

.task_actions button {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 18px;
  margin-left: 8px;
}

.category_dot{
    width: 12px;
    height: 12px;
    border-radius: 50%;   
    margin-right: 10px;
    flex-shrink: 0;
    background-color: white; 
    border: 0.5px solid black;  
    cursor: pointer;  
}

.assignments{
    background-color: #F8BBD0;
    border: none;
}

.exam{
    background-color: #FFF59D;
    border: none;
}

.personal{
    background-color: #FFE0B2;
    border: none;
}


/* Progress Bar */

.footer{
  display: flex;
  justify-content: center;   
  align-items: center;       
  position: fixed;          
  bottom: 0;                
  left: 0;
  width: 100%;               
  height: 105px;
}

.progress_card{
    display: flex block;
    flex-direction: column;           
    align-items: flex-start;          
    justify-content: flex-start;      
    height: 75px;
    width: 95%;
    background-color: white;
    border-radius: 20px;
    margin-bottom: 30px;
    border: 2px solid #FFF3E0;
    padding-top: 10px;
    padding-left: 36.5px;              
    padding-right: 15px; 
}                  

#progress_text{
    display: flex;
    color: #333333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    font-weight: 500;
    padding-top: 10px;
}

.bar{
    width: 0%;
    max-width: 95%;             
    height: 8px;
    background-color: #F48FB1;
    border-radius: 5px;
    transition: width 0.3s ease;
    margin-top: 15px;

}