/* General Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #121212; /* Dark background */
    color: #ffffff; /* Light text */
    line-height: 1.6;
}

h1, h2 {
    color: #ffffff; /* Bright headers */
    text-align: center;
    margin-bottom: 20px;
}

/* Container Styles */
#user-info, #set-username-section, #post-section, #posts-section {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #1e1e1e; /* Slightly lighter background for containers */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Input Fields and Buttons */
input, textarea, button {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #333333; /* Dark border */
    border-radius: 5px;
    background-color: #252525; /* Dark input background */
    color: #ffffff; /* Light text */
}

/* Button Specific */
button {
    background-color: #1e88e5; /* Blue button */
    color: #ffffff; /* White text */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #1565c0; /* Darker blue on hover */
}

/* Posts Section */
#posts-section div {
    margin-bottom: 15px;
    padding: 15px;
    background-color: #252525; /* Dark background for each post */
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#posts-section div strong {
    font-size: 18px;
    color: #1e88e5; /* Blue for usernames */
}

#posts-section div small {
    display: block;
    font-size: 12px;
    color: #aaaaaa; /* Subtle text for timestamps */
}

/* Links */
a {
    color: #1e88e5; /* Blue links */
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: #ffffff; /* White on hover */
}

/* Logout Button */
#logout-button {
    width: auto;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #e53935; /* Red button for logout */
    border: none;
    border-radius: 5px;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.3s;
}

#logout-button:hover {
    background-color: #b71c1c; /* Darker red on hover */
}

/* Responsive Design */
@media (max-width: 600px) {
    #user-info, #set-username-section, #post-section, #posts-section {
        padding: 10px;
    }

    h1, h2 {
        font-size: 20px;
    }
}

.post {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #252525; /* Dark background for posts */
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.post small {
    display: block;
    font-size: 12px;
    color: #aaaaaa; /* Subtle text for timestamps */
    margin-top: 5px;
}


/* Improved button styling */
button { background-color: #007bff; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer; transition: 0.3s; }
button:hover { background-color: #0056b3; }