body {
    background-color: #1e1e1e;
    color: #fff;
}

h1 {
    color: #f7c04a;
    font-weight: bold;
}

.form-label {
    color: #f7c04a;
}

.keyword-suggestions {
    margin-top: 10px;
}

#generatedImage {
    border: 2px solid #f7c04a;
    padding: 10px;
    border-radius: 5px;
}

#promptDisplay {
    background-color: #292929;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #f7c04a;
}

#positivePromptDisplay {
    color: #00ff00;
    font-weight: bold;
}

#negativePromptDisplay {
    color: #ff3333;
    font-weight: bold;
}

#prevImage, #nextImage {
    border-color: #f7c04a; /* Gold border */
    background-color: transparent; /* Transparent background */
    color: #f7c04a; /* Gold text color */
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#prevImage:hover, #nextImage:hover {
    background-color: #f7c04a; /* Gold background on hover */
    color: #1e1e1e; /* Dark text on hover to contrast */
}

#llmResponse {
    margin-top: 0; /* Remove any extra margin at the top */
    padding-top: 0; /* Remove extra padding at the top */
    line-height: 1.5; /* Adjust line height for better readability */
    text-align: left; /* Ensure the text aligns to the left */
}

#llmResponse:focus {
    outline: none; /* Remove the blue outline when focused */
    box-shadow: 0 0 5px 2px #f7c04a; /* Optional: Add a gold glow when focused */
}

/* Center the title on smaller screens */
@media (max-width: 768px) {
    h1 {
        text-align: center;
    }

    #imageResult {
        margin-top: 20px;
    }
}

/* New styles for responsive layout and sticky image preview */
.sticky-top {
    position: sticky;
    top: 20px;
}