body {
    font-family: system-ui;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh; /* Ensure content takes up full viewport height */
    margin: 0; /* Remove default body margin */
    line-height: 1.6; /* Improves readability */
}

.container {
    display: flex;
    flex-direction: column;
    max-width: 800px; /* Set a maximum width */
    width: 90%; /* Occupy 90% of the container width */
    padding: 20px;
    margin-top: 20px; /* Add some top margin for spacing */
    box-sizing: border-box; /* Include padding in width calculation */
    min-width: 300px;
}


label {
    align-items: left; 
    display: block;
    margin-bottom: 5px;
    font-weight: bold; /* Makes labels stand out */
}

input,
textarea {
    width: calc(100% - 16px); /* Accounts for padding */
    padding: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc; /* Adds a subtle border */
    border-radius: 4px; /* Adds rounded corners */
    height:auto;
    font-family: system-ui;
    font-size:16px;
}

textarea  {
    height:200px;
}

/* Style for focus state (better accessibility) */
input:focus,
textarea:focus {
    outline: none; /* Removes default focus outline */
    box-shadow: 0 0 0 2px #007bff; /* Adds a subtle blue focus outline */
}

.primary-button {
    padding: 10px 20px;
    background-color: #007bff; /* Primary button - Blue */
    color: white;
    border: none;
    border-radius: 5px; /* Add rounded corners */
    cursor: pointer;
    font-weight: bold; /* Make text bolder */
    transition: background-color 0.3s ease; /* Smooth transition on hover */
}

.primary-button:hover {
    background-color: #0069d9; /* Darker blue on hover */
}

.secondary-button {
    padding: 10px 20px;
    background-color: #6c757d; /* Secondary button - Gray */
    color: white;
    border: none;
    border-radius: 5px; /* Add rounded corners */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth transition on hover */
}

.secondary-button:hover {
    background-color: #5a6268; /* Darker gray on hover */
}

/* General button styles (apply to both primary and secondary) */
button {
    margin-left: 10px;
    vertical-align: middle;
    margin-bottom: 30px;
    font-family: sans-serif; /* Use a standard sans-serif font */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
}
/* styles.css */
button.disabled {
    opacity: 0.5; /* Reduce opacity */
    cursor: not-allowed; /* Change cursor to indicate it's disabled */
    background-color: #ccc; /* Change background color (optional) */
    pointer-events: none; /* Prevent clicks (important for accessibility) */
}
#story-output {
    margin-top: 20px;
    border: 1px solid #ccc;
    padding: 10px;
    min-height: 200px;
}

/* Responsive Styles */
@media (max-width: 600px) {
    input, textarea {
        width: 95%;
    }
    button {
      width: 95%; /* Make buttons full width on small screens */
      margin-left: 0; /* Remove left margin on small screens */
      display: block; /* Stack buttons vertically */
      margin-bottom: 5px; /* Add bottom margin between buttons */
    }
}

.hidden {
    display: none;
}

#manual-generate {
    margin: 20px; /* Adds 20px margin on all sides */
    border: 1px solid #ccc;
    padding: 20px;
  }



  .story-card {
    border: 1px solid #ccc;
    margin-bottom: 20px;
    border-radius: 5px;
    overflow: hidden; /* Hide the expanded content initially */
    transition: max-height 0.3s ease-out; /* Smooth transition for expanding */
}

.story-card.expanded {
    max-height: auto; /* Adjust as needed */
}


.story-header {
    padding: 15px;
    background-color: #f0f0f0;
    cursor: pointer;
}

.story-title {
    margin: 0;
    font-weight: bold;
}

.story-details {
    padding: 15px;
    display: none; /* Initially hidden */
}

.story-card.expanded .story-details {
    display: block; /* Show when expanded */
}


select {
    width: calc(100% - 16px); /* Makes the select element take up the full width */
    padding: 10px; /* Adds padding inside the select element */
    border: 1px solid #ccc; /* Adds a border */
    border-radius: 5px; /* Rounds the corners */
    font-size: 16px; /* Sets the font size */
    box-sizing: border-box; /* Ensures padding is included in the element's total width */
    appearance: none; /* Removes default arrow in some browsers */
  }

  /* Custom arrow for the select element */
  select::-ms-expand {
    display: none; /* Removes default arrow in IE/Edge */
  }

  select::after {
    content: "\279C"; /* Unicode for a down arrow */
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none; /* Prevents the arrow from interfering with clicks */
  }


  /* Optional: Style for focused state */
  select:focus {
    outline: none; /* Removes default focus outline */
    border-color: #007bff; /* Changes border color when focused */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Adds a subtle shadow */
  }