/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

html, body {
  font-family: "EB Garamond", serif;
}

pre, code, .monospace { font-family: Hack, monospace; }

a {
  color: var(--color-link);
  text-decoration: underline;
}

header a,
a.btn {
  text-decoration: none;
}

.prose {
  a {
    /* TODO: DRY with a. */
    color: var(--color-link);
  }
}

a:hover {
  color: #E0D8C3; /* Light earthy color */
  cursor: pointer;
}

#characters p {
  font-size: 16px;
  margin: 10px 0;
}

#characters strong {
  font-weight: bold;
}

.alignment-badge {
  display: inline-flex;
  overflow: hidden;
}

.alignment-badge .badge {
  border-radius: 0;
  margin-right: 0;
  margin-left: 0;
}

.alignment-badge .badge.first {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.alignment-badge .badge.last {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.badge.l {
  background-color: var(--cobalt-blue);
}

.badge.c {
  background-color: var(--earthy-red);
}

.badge.n {
  background-color: var(--earthy-brown);
}

.badge.e {
  background-color: var(--steel-gray);
}

.badge.g {
  background-color: var(--earthy-green);
}

select.input {
  background-color: var(--color-bg);
}

.glow-outline {
  box-shadow: 0 0 8px 2px rgba(255, 255, 0, 0.6), 0 0 16px 4px rgba(255, 255, 0, 0.3);
  transition: box-shadow 0.6s ease-in-out;
}