/* General Text Styling */
p {
  margin-top: 0em;
  margin-bottom: 1em;
}

li {
  margin-top: 0em;
  margin-bottom: 0.75em;
}

h1 {
  color: black;
  font-size: 24px;
}

/* Background and Font Styling */
html, body {
  background-color: #EEEEFF; /* Light lavender */
  font-family: sans-serif;
  font-size: 16px;
}

/* Input and Button Styling */
button, textarea, input {
  min-height: 50px; /* Adjusted for buttons */
  background-color: #DDDDEE; /* Slightly darker lavender */
  font-family: sans-serif;
  font-size: 18px;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/* Styling for Buttons with Different Colors */
.A {
  background-color: #9999FF; /* Light blue */
}

.A:hover {
  background-color: #CCCCFF; /* Lighter blue */
}

.A:focus {
  background-color: #6666CC; /* Mid-blue */
}

.A:active {
  background-color: #333399; /* Dark blue */
}

.B {
  background-color: #99FFFF; /* Light aqua */
}

.B:hover {
  background-color: #CCFFFF; /* Lighter aqua */
}

.B:focus {
  background-color: #66CCCC; /* Mid aqua */
}

.B:active {
  background-color: #339999; /* Dark aqua */
}

.C {
  background-color: #99FF99; /* Light green */
}

.C:hover {
  background-color: #CCFFCC; /* Lighter green */
}

.C:focus {
  background-color: #66CC66; /* Mid green */
}

.C:active {
  background-color: #339933; /* Dark green */
}

.D {
  background-color: #FFFF99; /* Light yellow */
}

.D:hover {
  background-color: #FFFFCC; /* Lighter yellow */
}

.D:focus {
  background-color: #CCCC66; /* Mid yellow */
}

.D:active {
  background-color: #999933; /* Dark yellow */
}

.F {
  background-color: #FF9999; /* Light red */
}

.F:hover {
  background-color: #FFCCCC; /* Lighter red */
}

.F:focus {
  background-color: #CC9999; /* Mid red */
}

.F:active {
  background-color: #993333; /* Dark red */
}

.H {
  background-color: #999999; /* Light gray */
}

.H:hover {
  background-color: #CCCCCC; /* Lighter gray */
}

.H:focus {
  background-color: #666666; /* Mid gray */
}

.H:active {
  background-color: #333333; /* Dark gray */
}

/* Styling for Prompt Display Area */
#writing-prompt, #mad-lib-prompt, #wellbeing-prompt {
  margin-top: 20px;
  font-size: 18px;
  color: #333333;
  padding: 10px;
  background-color: #FFF; /* White for readability */
  border: 1px solid #DDD;
  border-radius: 5px;
  line-height: 1.5;
}

/* Table Styling (if needed in the future) */
table {
  border-spacing: 10px;
  width: 100%;
  line-height: 150%;
}