/* style.css */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #000; /* Black background */
    color: #fff; /* White text */
    font-family: Arial, sans-serif;
}

body::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border: 5px solid #ff0000; /* Red border around the entire app */
    pointer-events: none; /* Allows interaction with elements beneath */
}

.gradio {
    --color-bg: #000; /* Black background */
    --color-text: #fff; /* White text */
    --color-border: #808080; /* Grey borders */
    --color-primary: #808080; /* Red for primary elements like buttons */
    --color-primary-contrast: #fff; /* White text on primary elements */
    box-sizing: border-box;
    position: relative;
    max-width: calc(100% - 10px); /* Adjusted to prevent overflow due to the border */
    margin: 5px auto; /* Center the content while accounting for the border */
}

/* 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 */
}

/* 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 */
    }
}