#contact {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 1em;
    width: 90%;
    max-width: 500px;
    background: rgb(40, 40, 40); /* Match the form's background */
}

#contact form {
    backdrop-filter: blur(15px); /* Increase blur */
    background: rgba(0, 0, 0, .4); /* Darker background */
    padding: 2em;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#contact h2 {
    color: white;
    margin-bottom: .5em;
    font-size: 1.5em;
    font-weight: 600;  /* Make the text slightly bolder */
    letter-spacing: 0.05em;  /* Slightly increase letter spacing */
}

.field {
    margin-bottom: 1em;
}

.field label {
    color: rgba(255, 255, 255, 0.8);
    display: block;
    margin-bottom: 0.5em;
}

.field input, .field textarea {
    width: 100%;
    padding: 0.75em;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 4px;
}

.field input:focus, .field textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.5);
}

.error-message {
    color: #ff6b6b;
    font-size: 0.95em;
    margin-top: 0.3em;
    min-height: 1.2em;
    transition: opacity 0.2s;
}

.actions {
    margin-top: 2em;
    text-align: right;
}

.actions .primary {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.75em 2em;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.actions .primary:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Add a close button */
.close-button {
    position: absolute;
    top: 1em;
    right: 1em;
    color: white;
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    opacity: 0.7;
}

.close-button:hover {
    opacity: 1;
}

/* Make placeholder text more visible */
#contact input::placeholder,
#contact textarea::placeholder {
    color: rgba(255, 255, 255, 0.8); /* Light gray with 60% opacity */
}

/* Style for Firefox */
#contact input::-moz-placeholder,
#contact textarea::-moz-placeholder {
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
}

/* Style for Edge/IE */
#contact input:-ms-input-placeholder,
#contact textarea:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.8);
}