*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
main{
    display: flex;
    
}

p{
    color:  rgba(97, 72, 28, 0.3);
}

body{
    width: 100%;
    height:  100%;
    background-color: #F2F9ED;

}
 span{
    color: #47A200  ;
}
 h1{
    text-align: center;
    font-weight: 700;
    color: #61481C;
    font-size: 64px;
}
.container{
    max-width: 660px;
    /* height: 810px; */
    position: relative;
    /* left: 25%; */
    margin-inline: auto;
    width: 100%;
    padding: 29px 34px;
    /* margin-inline: auto; */
    top: 15%;
    border-radius: 15px;
    background-color: #FBFBFB;
    bottom: 15%;
    /* display: flex; */
}
.today button{
    padding :14px 20px;
    background-color: #E9F2E2;
   /* max-width: 80px;  */
   margin-block: 20px;
   gap: 20px;
   font-size: 16px;
   position: absolute;
   right: 49px;
   color: #47A200;
   border-radius: 15px;
   border: none
}

.container h2{
    padding: 25px;
    font-weight: 700;
}
.container img{
    width: 50px;
    height :50px;
    /* padding-left: 10px; */
    margin-top: 15px;
}

.box {
    display: inline;
}
.box p{
   margin-left: 50px;
   text-align: center;
   font-weight: 400;
    display: inline;
    color: #858585;
    padding-top: 50px;
    /* padding-left: -10px; */
}
.today{
    display: flex;
}
.progress-bar{
    /* display: flex;
    align-items: center;
    justify-content: center; */
    margin-top: 15px;
    margin-left: 50px;
    height: 30px;
    background-color: #E9F2E2;
    border-radius: 15px;
}
 .error-massage{
    color:red;
    margin-top: 15px;
    font-size: 15px;
    margin-left: 20px;
    position: absolute;
 
    padding-bottom: 25px;
}
.error-massage{
    display: none;
}
.task{
    font-size: 0.9rem;
    color:  white;
    padding-top: 5px;
    margin-left: 3px;
    text-align: center;
    margin-top: 20px;
    width:  max-content;
}
.bar-value{
    transition: width 0.2s ease-in-out;
    height: 30px;
    background-color: #47A200;
    border-radius: 15px;
    width: 0%;
    /* overflow: hidden; */
}

.goal{
 max-width:100%;
 height: 80px;
 display:flex;
 margin-top:20px;
 border-radius: 15px;
 flex-grow: 1;
 border: 1px solid 
 rgba(0, 0, 0, 0.1);

}
 .circle{
    width: 24px;
    height: 24px;
    vertical-align: middle;
     border: 2px solid rgba(97, 72, 28, 0.3);
    border-radius: 50%;
    margin-left: 2em;
    color:rgba(255, 255, 255, 1);
    margin-top: 26px;
    font-size: 1rem;
    display: flex;
    font-weight: 400;
    align-items: center;
    justify-content: center;
}
.circle img{
    width: 15px;
    height: 15px;
    margin-top: -1px;
  
}
.check-icon{
    display: none;
}
.completed .check-icon{
    display: block;
}
 .completed  .circle {
    background: #48A300;
    border: 2px solid #47A200;
}
.completed input{
    color: #48A300;
    font-size: 16px;
    text-decoration: line-through;
}
.text{
    align-self: stretch;
}
.goal .one{
    flex-grow:1 ;
    height: 100%;
}
input{
    border: none;
    text-align: left;
    font-size: 16px;
    width: 100%;
    /* max-width: 150px; */
    /* margin-top:1em; */
    padding-left: 1rem;
    outline:none;
    display: block;
    align-self: stretch;
    font-weight: 500;
    color: #1b1a1a;
    flex-grow: 1;
/* background-color: #858585; */
}

::placeholder {
    color: #DDDDDD;
    margin-left:0px;
    font-weight: 500;
    font-size: 1rem;
    line-height: 24px;
  }

:-ms-input-placeholder{
    color: #DDDDDD;
    margin-left:0px;
    font-weight: 500;
    font-size: 1rem;
}
.add-Goal{
    display: flex;
    flex-direction: column;
padding-top: 35px;
    gap:30px;
    margin-left: 35px;
}
.last-text , .made{
    text-align: center;
    
}
.made{
    margin-top: -21px;
}
@media (max-width:768px) {
    h1{
       text-align: center;
      font-size: 35px;
   }
   .container{
       max-width: 400px;
       /* margin-inline: auto; */
       padding: 24px 10px;
       width: 100%;
       flex-shrink: 0;
   }
   .container img {
       height: 30px;
       width: 30px;
   }
   .box p{
       font-size: 10px;
   }
   #error-massage{
       font-size: 10px;
       margin-left: 15px;
   }
   .today{
       font-size: 10px;
   }
   .goal{
       max-width: 300px;
   }
   .last-text , .made{
       text-align: center;
       font-size: 10px;
       
   }
   .circle{
       max-width: 15px;
       max-height: 15px;
   }
   .add-Goal{
       padding: 10px;
   }

  .container .sun {
    transform: rotate(20deg);
    }
  
 .container .sun {
    transform: skewY(20deg);
  }
  
 .container .sun {
    transform: scaleY(1.5);
  }
  .circle img{
    width: 10px;
    height: 10px;
    margin-top: -1px;
  
}
 
   
}