@keyframes colorChange {
    0%{fill:#fff691}
    50%{fill:#ff9191}
    100%{fill: #fff691}
}

.projects-list {
    width: 60%;
    margin: 0 auto;
    margin-top: 2%;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.projects-new-button {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;

}

#new-project-button  {
    /* make the button more visible */
    color: #000000;
    font-size: 1.5em;
    cursor: pointer;
    padding: 1%;
    background: #c6ceb9;
    border-radius: 20px;
}

#new-project-button:hover  {
    /* make the button more visible */
    color: #000000;
    font-size: 1.5em;
    cursor: pointer;
    padding: 1%;
    background: #c7eb95;
    border-radius: 20px;
}

.projects-header {
    display: flex;
    flex-direction: row;
    /* space elements evenly along the main axis */
    justify-content: space-evenly;
    /* align elements to the center along the cross axis */
    align-items: flex-start;

    margin-top: 2%;
    padding-bottom: 1%;
    border-bottom: 1px solid #7e7e7e;
}

.projects-header-item {
    font-size: 1.5em;
    font-weight: bold;
    width: 33%;
}

.project-item {
    display: flex;
    flex-direction: row;
    /* space elements evenly along the main axis */
    justify-content: space-evenly;
    padding-top: 1%;
    padding-bottom: 1%;
    border-bottom: 1px solid #7e7e7e;
}

.project-item-item {
    width: 33%;
}

.project-icons i {
    cursor: pointer;
    margin-right: 8px;
}

#new-project-name {
    /* This is the input field for the new project name */
    width: 100%;
    padding: 10px;
    font-size: 1.2em;
    border: 2px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: #f9f9f9;
    color: #333;
    transition: 0.3s;
}

#new-project-name:focus {
    border: 2px solid #4a90e2;
    outline: none;
}

#new-project-name::placeholder {
    color: #999;
    font-style: italic;
}

.send-button {
    background-color: #4a90e2;
    color: white;
    padding: 10px 20px;
    font-size: 1.2em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.send-button:hover {
    background-color: #357ABD;
}