:root {
  --font-main: 'Courier New', Courier, monospace;
  --font-secondary: 'Roboto', sans-serif;
  --color-background: #111;
  --color-text-main: #f0f0f0;
  --color-text-secondary: #ddd;
  --color-header: #333;
  --color-border: #444;
  --color-link-background: #222;
  --color-link-background-hover: #333;
  --color-link-border: #ff8c00;
  --color-link-arrow: #ff8c00;
  --color-choice-background: #333;
  --color-choice-background-hover: #444;
  --color-refresh-background: #555;
  --color-refresh-background-hover: #ff8c00;
  --color-footer-background: #222; /* new */
  --color-footer-text: #f0f0f0; /* new */
  --color-footer-link: #ff8c00; /* new */
  --color-footer-link-hover: #fff; /* new */
}

body {
  font-family: var(--font-secondary);
  background-color: var(--color-background);
  color: var(--color-text-main);
  margin: 0;
  padding: 0;
}

.header {
  background-color: var(--color-header);
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

#title {
  font-size: 2.5em;
  font-family: var(--font-main);
}

#tagline {
  color: var(--color-text-secondary);
  font-size: 1.2em;
}

#warning {
  color: var(--color-text-secondary);
  padding: 0 20px;
  text-align: center;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

#refresh-btn {
  background-color: var(--color-refresh-background);
  color: var(--color-text-main);
  padding: 10px 20px;
  margin-top: 20px;
  transition: background-color 0.2s ease;
  cursor: pointer;
  text-align: center;
  border-radius: 5px;
}

#refresh-btn:hover {
  background-color: var(--color-refresh-background-hover);
}

.footer {
  background-color: var(--color-header);
  padding: 20px;
  text-align: center;
  border-top: 1px solid var(--color-border);
}

#creator {
  color: var(--color-text-secondary);
}

.story-link, .choice-link {
  background-color: var(--color-link-background);
  border-left: 5px solid var(--color-link-border);
  padding: 15px;
  margin: 15px 0;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-text-secondary);
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.story-link:hover, .choice-link:hover {
  background-color: var(--color-link-background-hover);
}

.story-link h2, .choice-link h3 {
  margin: 0;
  flex-grow: 1;
  font-size: 1.3em;
  font-family: var(--font-main);
}

.story-link .arrow, .choice-link .arrow {
  font-size: 1.8em;
  color: var(--color-link-arrow);
}

.footer {
  background-color: var(--color-footer-background);
  padding: 20px;
  text-align: center;
  border-top: 1px solid var(--color-border);
  color: var(--color-footer-text); /* added */
}

.footer a {
  color: var(--color-footer-link); /* added */
  text-decoration: none; /* added */
  transition: color 0.2s ease; /* added */
}

.footer a:hover {
  color: var(--color-footer-link-hover); /* added */
}

.first_word {
  color: #ff8c00;
}