/* homepage.css */
body.dark-background {
    background-color: #121212; /* Dark background */
    color: #fff; /* Light text color */
    font-family: 'Georgia', serif; /* Same font as other pages */
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.homepage-main {
    text-align: center;
    max-width: 90%; /* Allow some padding on mobile */
    padding: 20px;
}

.homepage-title {
    font-family: 'Allura', cursive;
    font-size: 3em;
    color: #fff;
    margin-bottom: 20px;
    word-wrap: break-word; /* Ensure title doesn't overflow */
}

.homepage-main-content {
    font-family: 'Georgia', serif;
    font-size: 1.2em;
    color: #ccc; /* Lighter text for readability */
    margin-bottom: 30px;
    line-height: 1.5;
}

.search-button {
    display: inline-block;
    margin-top: 30px;
}

.search-button button {
    font-size: 1.2em;
    padding: 12px 25px;
    color: #fff;
    background-color: #4CAF50; /* Button color (light green) */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%; /* Make the button full-width on small screens */
    max-width: 300px; /* Limit max width for larger screens */
}

.search-button button:hover {
    background-color: #45a049; /* Slightly darker green on hover */
}

/* Media Query for mobile responsiveness */
@media only screen and (max-width: 768px) {
    .homepage-title {
        font-size: 2.5em; /* Slightly smaller title */
    }

    .homepage-main-content {
        font-size: 1.1em; /* Slightly smaller text for mobile */
    }

    .search-button button {
        font-size: 1em; /* Slightly smaller font for the button */
        padding: 10px 20px; /* Adjust padding for small screens */
    }
}

@media only screen and (max-width: 480px) {
    .homepage-title {
        font-size: 2em; /* Further reduce title size */
    }

    .homepage-main-content {
        font-size: 1em; /* Reduce font size for better readability on small screens */
    }

    .search-button button {
        font-size: 1.1em; /* Adjust button font size */
        padding: 10px 20px; /* Adjust padding for small screens */
    }
}