:root {
    --bs-body-bg: #121212;           /* Deep dark gray */
    --bs-body-color: #e0e0e0;        /* Light gray text */
    --bs-primary: #185f6b;           /* Electric cyan */
    --bs-border-color: #9eb6b7;
    --accent-glow: 0 0 10px #03a3bf80;
  }
  
  body {
    font-family: 'Space Grotesk', sans-serif;
    color: #e0e0e0;
    background-color: #121212;
    font-size: 0.9rem;
    line-height: 1.3;
    padding: 2rem;
  }
  
  h1, h2, h3, h4 {
    color: #ffffff;
    font-weight: 600;
    text-transform: none;
    font-family: 'Chakra Petch', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  /* Inputs, Textareas, Selects */
  input, textarea, select {
    background-color: #1e1e1e;
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.4rem;
    padding: 0.65rem 1rem;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
  }
  
  input:focus, textarea:focus, select:focus {
    border-color: var(--bs-primary);
    box-shadow: var(--accent-glow);
    outline: none;
  }
  
  /* Buttons */
  button, .btn {
    background-color: var(--bs-primary);
    color: #121212;
    border: none;
    padding: 0.6rem 1.2rem;
    font-weight: 600;
    border-radius: 0.4rem;
    font-size: 1rem;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: var(--accent-glow);
  }
  
  button:hover, .btn:hover {
    background-color: #537f83;
    box-shadow: 0 0 15px rgba(113, 178, 183, 0.75);
  }
  

  
  .card {
    background-color: #1a1a1a;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  }
  
  /* Style the select wrapper */
select.form-select {
    appearance: none; /* Hide OS default arrow */
    background-color: #1e1e1e;
    color: #e0e0e0;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.4rem;
    padding: 0.65rem 1rem;
    font-size: 1rem;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%2300f0ff'%20d='M2%200L0%202h4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 10px;
    transition: border-color 0.3s, box-shadow 0.3s;
  }
  
  /* On focus */
  select.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: var(--accent-glow);
    outline: none;
  }
  
  input.form-control::placeholder {
    color: #748889;
  }


  .generateButton
  {
    width:100%;

  }

  .storyText
  {
    margin-top:150px;
  }

  /* Solid border */
hr.solid {
    margin-top:50px;
    border-top: 8px solid #fafafa;
  }


  .spinner{
    margin-top: 50px;
    margin-left: 50%;
    margin-right: 50%;
  }

  .characterSection
  {
    background-color:#373b3b;
    border-radius: 5px;
  }

  .orangeButton
  {
background-color: darkorange;
  }

  #result {
    white-space: pre-wrap; /* Preserves line breaks */
    overflow: visible;
  }
  
  /* Avoid cutting inside paragraphs or elements */
  p, div {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* Optional: manually force page breaks */
  .page-break {
    page-break-before: always;
    break-before: page;
  }


  body {
    padding: 20px;
  }
  .character-list {
    margin-top: 10px;
  }
  #result {
    min-height: 100px;
    white-space: pre-wrap;
  }