styles.css

/* styles.css */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

:root {
  --bg-color: #0f0f0f;
  /* --accent-color: #1b717d; */
  --accent-color: #4f46e5;
  /* --font-color: #ffffff; */
  --font-color: #fbf8f5;

  /* --bg-secondary: #374151 !important; */
  /* --bg-secondary: #202627 !important; */
  --bg-secondary: #3d3f4d !important;

  /* --bg-tertiary: #304146 !important; */
  --bg-tertiary: #232638 !important;

/* other stuff */
  --primary: #1b717d !important;
  --primary-hover: #1b717d !important;
  --primary-pressed: #1b717d !important;
  --secondary-400: #1b717d !important;
  --secondary-500: #1b717d !important;
  --secondary-600: #1b717d !important;
  --secondary-700: #1b717d !important;
  --secondary-800: #1b717d !important;
  --secondary-900: #1b717d !important;
  --link-text-color: #1b717d !important;
}

body, .gradio-container, .gr-block {
  font-family: 'DM Serif Display', serif !important;
  background-color: var(--bg-color);
  color: var(--font-color) !important;
  /* --color-accent-soft: var(--neutral-700) !important; */
  /* --color-accent-soft: #ff0000 !important; */
  /* --background-fill-secondary: var(--neutral-900); */
  /* --background-fill-secondary: #ff0000 !important;  */
}

strong {
    color: inherit !important;
}

a{
    color: var(--accent-color);
}

/* Header styling */
h1 {
  text-align: center;
  font-size: 5em;
  margin: 20px 0 10px !important;
  font-weight: 700;
  color: inherit;
  /* color: #222 !important; */
}

/* Description text */
.centered-text {
  text-align: center !important;
  margin-bottom: 24px !important;
  font-size: 1.5em !important;
  color: inherit;
  /* color: #444 !important; */
}

/* Tabs container  */
.tabs-container {
    align:center;
    text-align: center;
    width: 1000px;
    margin: 0 auto;
    color: inherit;
}
.tab-container button[role="tab"]{
    font-size: 1.5em !important;
    color: inherit;
}
.tab-container button[aria-selected="true"] {
  /* background-color: #ebebeb !important; */
  /* color: #ff0000; */
  color: var(--accent-color) !important;
  /* border-color: #ff0000 !important; */
}
.tab-container button[aria-selected="true"]::after{
  background-color: var(--accent-color) !important;
}
.tabs-container .gr-tab-label[selected] {
  /* background-color: #3378e8 !important; */
  /* color: #fff !important; */
  /* border-color: #3378e8 !important;  */
  /* border-color: #ff0000 !important; */
}

.row{
    top: -1px;
}


/* Tabs content  */
.tab-content{
    font-family: "Roboto Mono", monospace !important;
}
.sample-title {
    font-size: 1.1em !important;
    background-color: var(--bg-secondary) !important;

}

/* Audio section container (card) */
.audio-section {
  padding-bottom: 0px !important;
  margin-bottom: 16px !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
  text-align: center;
}
.audio-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 5px !important;
  margin-top: 0px !important;
  align-items: center !important;
  padding: 5px !important; 
  padding-top: 0px !important;
  border-width: 5px !important;
  /* height: 200px; */
  background-color: var(--bg-secondary) !important;
}




/* Audio player styling: set dimensions and remove borders */
.audio-player {
    /* border-width: 0px !important; */
  border-radius: 5px !important;
  border-width: 0px !important;
  border-style: solid;
  margin: auto;
  background-color: var(--bg-tertiary) !important;
}
.audio-player label span{
  /* width: 220px !important;
  height: 200px !important;
  /* border: none !important; */
  /* background: transparent !important; */
  display: none !important;

}
.audio-player label{
  font-weight: normal !important;
  border-radius: 5px;
  color: inherit;
  background-color: var(--accent-color);
}


/* Remove default Gradio audio component borders if any */
.gradio-container .gradio-audio {
  /* border: none !important;
  background: transparent !important; */
}

/* Hide the playback speed button */
.audio-player button[aria-label="Adjust playback speed to 1.5x"] {
  display: none !important;
}

/* Hide the skip backward and skip forward buttons */
.gradio-audio, .rewind, .skip{
  display: none !important;
}