body {
  font-family: sans-serif;
  margin: 0 auto;
  padding: 0;
  line-height: 1.6;
  background-color: #f0f0f0;
  color: #000;
}

/*
header {
    background-color: #000;
    color: #FFCD00;
    text-align: center;
    padding: 1em 0;
}
*/

header {
  width: 100%; /* Ensure header spans the entire width */
  height: 300px; /* Adjust height as needed */
  background-image: url('images/banner/maryland-flag-backgrounds-landscape-black.jpg'); /* Replace with your PNG file path */
  background-size: cover; /* Scale the image to cover the entire header */
  background-repeat: no-repeat; /* Prevent image from repeating */
  background-position: center; /* Center the image */
  color: #FFCD00; /* Set text color for readability */
  text-align: center; /* Center text within the header */
  display: flex; /* Use flexbox for vertical centering */
  flex-direction: column;
  justify-content: center; /* Vertically center content */
  align-items: center; /* Horizontally center content */
}

hr {
  height: 5px;
  color:#FFCD00;
  background-color:#FFCD00;
  border: none;
}

footer {
	bottom: 0;
	width: 100%;
	height: 70px;
	background-color: #000;
    color: #FFCD00;
    text-align: center;
	padding: 1em 0;
}

main {
    padding: 20px;
}

@font-face {
  font-family: 'Inter'; /* Replace with your desired font name */
  src: url('fonts/Inter/Inter-VariableFont_opsz\,wght.ttf') format('tff'), /* Replace with your font file and format */
       url('fonts/Inter/Inter-Italic-VariableFont_opsz\,wght.ttf') format('tff'); /* Optional: Add other formats for broader support */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    font-weight: bold;
}

p, a, button, label {
    font-family: 'Inter', sans-serif;
}

/* Welcome Screen Styles */
#welcome-screen {
    text-align: center;
}

#welcome-screen img {
    max-width: 200px;
    height: auto;
}

#start-chat {
    background-color: #FFCD00;
    color: #000;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

/* Chat Interface Styles */
#chat-interface {
    margin-top: 20px;
}

#chat-window {
    border: 1px solid #ccc;
    height: 300px;
    overflow-y: scroll;
    padding: 10px;
}

#send-button, #clear-chat, #record-button {
    background-color: #000;
    color: #FFCD00;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    margin-top: 10px;
}

#errorMessage {
  color: red;
  margin: 10px 0;
  display: none;
}


.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.controls {
  margin: 20px 0;
  display: flex;
  gap: 10px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4285f4;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #3367d6;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

#status {
  margin: 10px 0;
  font-style: italic;
  color: #666;
}

#result {
  width: 100%;
  min-height: 100px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.language-select {
  margin-bottom: 20px;
}

/* Message Styles */
.user-message, .bot-message {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.user-message {
    background-color: #e0e0e0;
    text-align: right;
}

.bot-message {
    background-color: #FFCD00;
    color: #000;
    text-align: left;
}

.bot-message.loading {
    font-style: italic;
}

.bot-message.error {
    color: red;
}

/* Responsive Design */
@media (max-width: 600px) {
    #user-input {
        width: 100%;
    }
}