body {
background-color: #251544;
font-family: Roboto, sans-serif;
}

/* Main Content Container */
main {
max-width: 800px;
margin: 4rem auto;
padding: 2rem;
/* border: 1px solid #f5f1df; */
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.05);
}

#forms h1 {
color: #f5f1df;
text-align: center;
margin-bottom: 1.5rem;
}

#forms p {
margin-bottom: 1rem;
color: white;
}

#forms a {
color: #f5f1df;
text-decoration: none;
}

#forms a:hover {
text-decoration: underline;
}

/* Form Styling */
.story-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

label,
.form-group-title {
font-weight: bold;
color: #f5f1df;
}

/* UPDATED: Added 'select' to the selector for consistent styling */
input[type="text"],
input[type="email"],
textarea,
select {
width: 100%;
padding: 12px;
border: 1px solid #f5f1df;
border-radius: 5px;
background-color: transparent;
color: white;
font-size: 1rem;
box-sizing: border-box; /* Ensures padding doesn't affect width */
}

/* Style for select dropdown options */
select option {
background: #251544;
color: white;
}

textarea {
resize: vertical;
min-height: 150px;
}

input::placeholder,
textarea::placeholder {
color: rgba(255, 255, 255, 0.5);
}

/* Radio and Checkbox Styling */
.options-group {
display: flex;
flex-direction: column;
gap: 0.75rem;
}

.option-item {
display: flex;
align-items: center;
gap: 0.75rem;
}

input[type="radio"],
input[type="checkbox"] {
/* Modern CSS property to style the tick/dot */
accent-color: #f5f1df;
width: 1.2em;
height: 1.2em;
}

/* Required Field Asterisk */
.required-star {
color: #ff6b6b;
margin-left: 2px;
}

/* Button Styling */
.submit-btn {
padding: 12px 20px;
border: none;
border-radius: 5px;
background-color: #f5f1df;
color: #251544;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
align-self: flex-start;
}

.submit-btn:hover {
background-color: white;
color: #251544;
}