projects.css

body{
    font-family: sans-serif;
}
/* 
#p-utility{
    width: 95%;
    margin: auto;
} */

#projects-heading{
    display: flex;
    padding: 0px 20px;
    justify-content: space-between;
}

#projects-heading>div{
    display: flex;
    gap: 10px;
}
#projects-heading>div>button{
    margin: auto;
    padding: 10px;
}

#new-project-btn{
    background-color: #4EA819;
    color: white;
    border: 1px solid black;
    border-radius: 3px;
    cursor: pointer;
}
#new-project-btn:hover{
    background-color: #30531c;


}
#new-project-btn~button{
    background-color: white;
    border: 1px solid black;
    border-radius: 3px;
}

#project-stats{
    display: grid;
    gap: 20px;
    margin: auto;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(1,120px);
}

.vertical-bar{
    width: 5px;
    height: 100%;
    background-color: gray;
    border-radius: 10px;
}

#project-stats>div{
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    gap: 20px;
    padding: 20px;
    display: flex;
}

#project-stats>div h1{
    margin-top:-20px;
}

#your-projects{
    padding: 8px;
    margin: auto;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    margin-top: 40px;
}

#filter-projects{
    display: grid;
    margin: auto;
    grid-template-columns: repeat(4,280px);
    grid-template-rows: repeat(1,100px);
    

}


#filter-projects>div{
    /* border: 1px solid red; */
    padding: 0px 20px;
}
#filter-projects>div>h4{
    font-size: 14px;
    color: gray;

}
#filter-projects>div>input{
    padding: 8px;

}
#filter-projects>div>input::placeholder{
    color: gray;
    font-size: 12px;
}

#all-projects>div{
    display: flex;
    /* border: 1px solid red; */
    height: 50px;
    align-items: center;
    justify-content: space-between;
    
    
    /* border: 1px solid red; */
}

#fdiv{
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    width: 12%;
}
#sdiv{
    display: flex;
    justify-content: flex-start;
    gap: 5px;
}