/* style.css */
body {
    background-color: #000; /* Black background */
    color: #fff; /* White text */
    font-family: Arial, sans-serif;
}

.gradio {
    --color-bg: #000; /* Black background */
    --color-text: #fff; /* White text */
    --color-border: #808080; /* Grey borders */
    --color-primary: #ff0000; /* Red for primary elements like buttons */
    --color-primary-contrast: #fff; /* White text on primary elements */
}

/* Increasing the size of the visuals */
.image img, .audio audio {
    width: 200%; /* Double the size */
    height: auto;
}

/* Styling textboxes, images, and audios with grey borders */
.textbox, .image, .audio {
    border: 2px solid #808080; /* Grey border */
    padding: 10px;
    margin-top: 10px;
    background-color: #111; /* Slightly lighter black for the input/output boxes */
}

/* Button styling */
.button {
    background-color: var(--color-primary);
    color: var(--color-primary-contrast);
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
    border-radius: 4px; /* Rounded corners for the button */
}

.button:hover {
    background-color: #d10000; /* A darker shade of red on hover */
}

/* Overall border styling for the app container */
.container {
    border: 3px solid #ff0000; /* Red border */
    padding: 20px;
    margin-top: 20px;
}

/* Adjust layout for elements to follow the button directly */
.row {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center children horizontally */
    width: 100%;
}

/* Make visuals responsive to screen size */
@media (max-width: 768px) {
    .image img, .audio audio {
        width: 100%; /* Adjust size for smaller screens */
    }
}