body {
        background-color: #f4f4f4;
        color: #333;
        font-family: 'Arial', sans-serif;
    }

    .header {
        background-color: #007bff;
        color: #fff;
        padding: 10px 0;
        text-align: center;
        margin-bottom: 20px;
    }

    .header h1 {
        margin: 0;
    }

   
    .btn-primary, .btn-success {
        background-color: #007bff;
        border-color: #007bff;
    }

    .btn-primary:hover, .btn-success:hover {
        background-color: #0056b3;
        border-color: #0056b3;
    }

    .modal-content {
        border-radius: 5px;
    }

    .modal-header {
        background-color: #007bff;
        color: #fff;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .modal-footer {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .form-control {
        border-radius: 4px;
    }

    #charCount {
        display: block;
        margin-top: 5px;
        font-size: 0.875em;
        color: #666;
    }

    .footer {
        bottom: 0;
        width: 100%;
        height: 60px;
      
    }

    .footer-link {
        color: orange;
        text-decoration: none;
    }

    .footer-link:hover {
        color: orange;
    }