style.css

html, body {
  background-image: url('https://huggingface.co/spaces/ESCP/AITeachingAssistantPrototypeSF/resolve/main/ESCP_BANNER.png') !important;
  background-size: contain !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-color: rgb(40,9,109) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.gradio-container {
  max-width: 1400px !important;
  width: 94vw !important;
  margin: 0 auto !important;
  padding-top: 220px !important;
  background: transparent !important;
}

#escp_title h1 {
  color: rgb(242,198,55) !important;
  font-size: 3rem; !important;
  font-weight: 800 !important;
  text-align: center !important;
  margin: 0 0 12px 0 !important;
}

.gradio-container .gr-block,
.gradio-container .gr-box,
.gradio-container .gr-panel {
  background: #ffffff !important;
  border-radius: 10px !important;
}

.gradio-container input,
.gradio-container textarea,
.gradio-container select,
.gradio-container button {
  background: #ffffff !important;
}

.gr-chatbot {
  min-height: 520px !important;
}

.gradio-container button {
  font-weight: 600 !important;
  padding: 12px !important;
  border-radius: 10px !important;
}

header, header *,
footer, footer * {
  background: transparent !important;
  box-shadow: none !important;
}

footer a, footer button,
header a, header button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#footer, #footer *,
[class*="footer"], [class*="footer"] *,
[class*="chip"], [class*="pill"], [class*="chip"] *, [class*="pill"] * {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

button, a, div {
}

[data-testid*="api"], [data-testid*="settings"],
[id*="api"], [id*="settings"],
[class*="api"], [class*="settings"],
[class*="bottom"], [class*="toolbar"], [class*="controls"] {
  background: transparent !important;
  box-shadow: none !important;
}

[data-testid*="api"] *, [data-testid*="settings"] *,
[id*="api"] *, [id*="settings"] *,
[class*="api"] *, [class*="settings"] * {
  background: transparent !important;
  box-shadow: none !important;
}

button[class*="btn"], a[class*="btn"],
button[class*="button"], a[class*="button"] {
  background: transparent !important;
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,0.25) !important; /* keeps it visible on dark bg */
}

section footer {
  background: transparent !important;
}

section footer button,
section footer a {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

section footer button:hover,
section footer button:focus,
section footer a:hover,
section footer a:focus {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

section footer button,
section footer a {
  color: white !important;
}

section footer button,
section footer button * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

section footer button::before,
section footer button::after {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

section footer button {
  border: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

section footer a,
section footer a * {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.gradio-container footer button,
.gradio-container footer button *,
.gradio-container .footer button,
.gradio-container .footer button * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.gradio-container footer button::before,
.gradio-container footer button::after,
.gradio-container .footer button::before,
.gradio-container .footer button::after {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}