static/css/style.css

/* Custom styling for the application */

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    flex: 1;
}

/* Add a bit of spacing around the audio player */
#audioPlayerContainer {
    padding: 10px 0;
}

/* Make the audio player responsive */
audio {
    width: 100%;
    border-radius: 0.25rem;
}

/* Fade in animation for the audio card */
@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

/* Style for the text area */
#textInput {
    resize: vertical;
    min-height: 150px;
}

/* Little pulse effect for the loading spinner */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.spinner-border {
    animation: spinner-border 0.75s linear infinite, pulse 2s ease infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    h1.display-4 {
        font-size: 2.5rem;
    }
    
    .lead {
        font-size: 1.1rem;
    }
}