:root {
  --gold: #fbc63c;
}

body {
  background-color: black;
  margin: 0;
  color: var(--gold);
}

.song-navbar {
  display: flex;
  height: 2.2rem;
  background-color: #262323;
  text-align: center;
  line-height: 2.2rem;
  font-size: 1.1em;
  color: white;
  text-decoration: none;
  padding: 0 1em;
  align-items: center;
}

.song-navbar a {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.song-navbar a > svg {
  width: 18px;
  height: 18px;
  padding-right: 0.3em;
  color: var(--gold)
}

/* Crucial properties to keep alignment intact */
.song-container {
  font-family: 'Courier New', Courier, monospace;
}

@media (min-width: 1024px) {
  .song-container {
    display: flex;
    justify-content: space-around;
    /* Reads data-columns, casts it as an integer, and defaults to 1 if missing */
    /*column-count: var(--columns, 1);
    column-gap: 2rem; */
  }
}

/* Optional styling hooks now available to you */
.chord-line {
  white-space: pre; /* Forces browser to respect internal line spacing spaces */
  color: #e5c396; /* #1a73e8; */
  font-weight: bold;
}

.lyric-line, .tab-line {
  white-space: pre; /* Forces browser to respect internal line spacing spaces */
  font-weight: bold;
}

.song-page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#capo-btn {
  margin-left: 1em;
  padding: 0 0.5em;
  display: inline-block;
  font-size: 0.9rem;
  font-weight: bold;
  border-radius: 20px;       /* Gives it a sleek, modern pill shape */
  cursor: pointer;           /* Forces the mouse cursor to become a pointer hand */
  user-select: none;         /* Prevents ugly blue text-highlighting on double clicks */
  text-transform: uppercase; /* Optional: Makes it look a bit more like a UI element */
  letter-spacing: 0.5px;
  transition: background-color 0.2s ease; /* Smoothly animates hover effects */
  height: fit-content;
  line-height: 1.5em;

  /* Default "Red" State */
  color: #e03131;            /* Swap this with your exact default red hex */
  border: 2px solid #e03131;
  background-color: transparent;
}

/* Hover effect for the default state */
#capo-btn:hover {
  background-color: rgba(224, 49, 49, 0.1); /* Adds a subtle red tint */
}

/* Transposed "White" State (Triggers automatically via JS attribute change) */
#capo-btn[data-state="transposed"] {
  color: white;
  border-color: white;
}

/* Hover effect for the transposed state */
#capo-btn[data-state="transposed"]:hover {
  background-color: rgba(255, 255, 255, 0.15); /* Adds a subtle white tint */
}

.gold {
  color: var(--gold)
}

#song-key {
  margin-left: 1em;
  padding: 0 0.5em;
  display: inline-block;
  font-size: 0.9rem;
  font-weight: bold;
  border-radius: 20px;       /* Gives it a sleek, modern pill shape */
  user-select: none;         /* Prevents ugly blue text-highlighting on double clicks */
  /*letter-spacing: 0.5px;*/
  height: fit-content;
  line-height: 1.5em;

  /* Default "White" State */
  border: 2px solid white;
}