/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}
/* Reset and base styles */
body {
  margin: 0;
  padding: 20px;
  font-family: Arial, sans-serif;
  background-color: #f0f4f8;
  color: #333;
}

/* Container styling */
.container {
  max-width: 600px;
  margin: auto;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Headings */
h1 {
  text-align: center;
  color: #2c3e50;
}

/* Chat log area */
#chatLog {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 10px;
  background: #fafafa;
  margin-bottom: 10px;
}

#chatLog p {
  margin: 5px 0;
}

/* Form elements */
input[type="text"],
select,
button {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  background-color: #3498db;
  color: white;
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover {
  background-color: #2980b9;
}

/* Checkbox label */
label {
  display: block;
  margin: 10px 0;
}