body {
    font-family: 'Arial', sans-serif;
    background-color: #000;
    margin: 0;
    padding: 2px;
    color: #fff;
}

.honeypot {
    display: none;
}
.hidden-input {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.file-folder-label {
    font-family: Arial, sans-serif; /* Clean, readable font */
    background-color: #000; /* Typical manila folder color */
    color: #c0c;  /* Contrast color for text */
    padding: 5px 5px;  /* Adequate padding around text */
    box-shadow: 0px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
    border-radius: 3px;  /* Slightly rounded corners to mimic folder tabs */
    text-align: center;  /* Centering text */
    display: inline-block; /* Allows the label to fit the content */
    margin: auto;  /* Center the label horizontally if possible */
    width: 94%; /* Width adjusts to content size */
}

footer {
    text-align: center;
    color: #000;
    font-size: 0.8 em;
    background: #fff; /* Optional: adds a background color to the footer */
}

footer p {
    margin: 0; /* Removes default paragraph margin */
}

h1 {
    color: yellow;
    font-size: 1.5em; /* Larger for better visibility on small screens */
}

form {
    margin-top: 0px;
    background: #c0c0c0;
    padding: 1px;
    border-radius: 2px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.1);
}

input[type="text"], textarea {
    width: calc(100% - 5px);
    padding: 1px;
    border-radius: 1px;
    border: 1px solid #c0c0c0;
    font-size: 14px; /* Minimum size to prevent zoom on iOS */
}

button {
    width: 100%;
    background-color: white;
    color: black;
    border: none;
    padding: 12px 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px; /* Align button text size with inputs */
}

button:hover {
    background-color: red;
}

div {
    margin-top: 2px;
    background: linear-gradient(to right, #000000, #333333); /* Dark gradient background */
    padding: 0px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: solid 2px #5C4033; /* Added thickness to the border for visibility */
}

.message-container {
    height: auto;  /* Adjust based on content but respect max-height */
    max-height: 500px; /* Example max-height, adjust based on need */
    overflow-y: auto;
    padding: 0 0px;  /* Just some padding to keep text from the edges */
    box-sizing: border-box; /* Make sure padding is included in the height calculation */
}
/* Responsive Styles */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }

    input[type="text"], textarea, button {
        width: 100%; /* Make input and button take full width */
        box-sizing: border-box; /* Include padding and border in the width */
    }

    form, div {
        padding: 10px; /* Reduce padding in form and div containers */
        margin-top: 10px; /* Reduce margin above form */
    }

    h1 {
        font-size: 1.5em; /* Adjust title size on smaller tablets */
    }

    .message-container {
        max-height: 320px; /* Smaller max-height for smaller devices */
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.4em; /* Smaller font size for the title on very small screens */
    }

    input[type="text"], textarea {
        padding: 12px; /* Larger padding for easier interaction */
    }

    button {
        padding: 10px 0; /* Adjust padding for better touch accessibility */
        margin-top: 10px; /* Add top margin for better spacing */
    }

    .message-container {
        max-height: 300px; /* Even smaller max-height for mobile devices */
    }
}