body {
        font-family: Arial, sans-serif;
        background-image: url(/images/1.webp);
        background-repeat: no-repeat;
        background-size: cover;
        margin:0; padding:0;
    }
    .container {
        width: 80%;
        margin: auto;
        padding:20px;
        max-width:900px;
    }
    .login-box, .project-form, .project-list {
        background:linear-gradient(135deg, #cadeca, lightgreen);
        padding:20px;
        border-radius:10px;
        margin-top:20px;
        box-shadow:0 0 10px rgba(0,0,0,0.1);
    }
    input, textarea {
        width: 50%;
        padding:10px;
        margin-top:10px;
        border-radius:5px;
        border:1px solid #ddd;
    }
    button {
        padding:8px 15px;
        background-color: lightgreen;
        display: flex;
        border:none;
        border-radius:5px;
        cursor:pointer;
        margin-top:10px;
        font-size:14px;
    }
    .add-btn { background:#007bff; color:aliceblue; }
    .view-btn { background:#28a745; color:aliceblue; margin-right:5px; }
    .delete-btn { background:#dc3545; color:aliceblue; }

    .project {
        background:aliceblue;
        padding:15px;
        border-radius:8px;
        margin-top:10px;
        border:1px solid aliceblue;
    }
    .project-title {
        font-size:18px;
        margin:0;
    }

    /* Modal */
    .modal {
        display:none;
        position:fixed;
        top:0; left:0;
        width:100%; height:100%;
        background:rgba(0,0,0,0.5);
        justify-content:center;
        align-items:center;
    }
    .modal-content {
        background:aliceblue;
        padding:20px;
        border-radius:10px;
        width:400px;
        position:relative;
    }
    .close {
        position:absolute;
        top:10px; right:15px;
        cursor:pointer;
        font-size:18px;
    }