.songLength {
    margin-top: -10px;
    color: rgba(255, 255, 255, 0.7);
}

.songBpm {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: -10px;
    color: rgba(255, 255, 255, 0.7);
}

.metronomeButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .2s;
}

.metronomeButton:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.metronomeButton svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.songLyrics {
    font-family: 'Courier New', monospace;
    white-space: pre;
    tab-size: 4;
    overflow-x: auto;
    /* Leave room so the end of the song isn't hidden behind the player controls */
    padding-bottom: 120px;
}

/* Chords are colored by their root note. The 12 semitones are spread around the color wheel
   in 30° steps, starting with red on A. Enharmonic notes share a color (C# = Db, Cb = B...).
   The colors are very light so they contrast with the dark background. */
.chordA  { color: hsl(0, 100%, 85%); }
.chordBb { color: hsl(30, 100%, 85%); }
.chordB  { color: hsl(60, 100%, 85%); }
.chordC  { color: hsl(90, 100%, 85%); }
.chordDb { color: hsl(120, 100%, 85%); }
.chordD  { color: hsl(150, 100%, 85%); }
.chordEb { color: hsl(180, 100%, 85%); }
.chordE  { color: hsl(210, 100%, 85%); }
.chordF  { color: hsl(240, 100%, 85%); }
.chordGb { color: hsl(270, 100%, 85%); }
.chordG  { color: hsl(300, 100%, 85%); }
.chordAb { color: hsl(330, 100%, 85%); }

.spotifyEmbeds {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
    max-width: 500px;
    /* Offsets the negative margin-top of .songLength so it doesn't overlap the embeds */
    margin-bottom: 30px;
}

.spotifyEmbed {
    width: 100%;
    height: 80px;
    border: 0;
    border-radius: 12px;
}

.playerControls {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 25px;
    z-index: 10;
}

.playerButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 0;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, background-color .2s;
}

.playerButton:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
}

.playerButton svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.songList {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

.songButton {
    width: 400px;
    max-width: 90%;
    padding: 15px 20px;
    box-sizing: border-box;
    text-align: center;
    font-size: 20px;
    color: white;
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
    transition: transform .2s, box-shadow .2s, background-color .2s;
}

.songButtonLength {
    margin-left: 8px;
    color: rgba(255, 255, 255, 0.6);
}

.songSection {
    width: 400px;
    max-width: 90%;
    margin: 20px 0 0 0;
    text-align: center;
    font-size: 24px;
    font-weight: normal;
    color: var(--section-color, rgba(255, 255, 255, 0.8));
    border-bottom: 1px solid var(--section-color, rgba(255, 255, 255, 0.3));
    padding-bottom: 8px;
}

.songSectionLength {
    margin-left: 8px;
    font-size: 18px;
    opacity: 0.7;
}

.songSection:first-child {
    margin-top: 0;
}

/* One soft color per section, light enough to stand out on the dark background. */
.sectionIntro     { --section-color: hsl(45, 85%, 75%); }  /* Lamplight gold: the story begins */
.sectionUpbeat    { --section-color: hsl(20, 90%, 78%); }  /* Warm coral: lively, sunny */
.sectionDarkness  { --section-color: hsl(270, 55%, 78%); } /* Dusky violet: night falling */
.sectionSadness   { --section-color: hsl(210, 65%, 78%); } /* Pale blue: melancholy */
.sectionClimax    { --section-color: hsl(350, 80%, 78%); } /* Soft rose red: emotional peak */

.songListTotal {
    margin-top: 25px;
    text-align: center;
    font-size: 20px;
}

a.songButton:link, a.songButton:visited {
    color: white;
    text-decoration: none;
}

a.songButton:hover {
    color: white;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
}

@media (max-width:1000px) {
    .topIcons, .project, .bottomIcons, .projectDescription {
        width: 100%;
    }
}

/* Marks songs whose chords are still being reviewed */
.wipWarning {
    max-width: 500px;
    padding: 10px 15px;
    color: hsl(45, 100%, 80%);
    background-color: rgba(255, 190, 0, 0.12);
    border: 1px solid hsla(45, 100%, 70%, 0.5);
    border-radius: 10px;
}

.wipBadge {
    margin-left: 6px;
    padding: 2px 6px;
    font-size: 13px;
    vertical-align: middle;
    color: hsl(45, 100%, 80%);
    border: 1px solid hsla(45, 100%, 70%, 0.6);
    border-radius: 6px;
}

/* Light/dark mode toggle, fixed at the top right corner */
.themeButton {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .2s, transform .2s;
}

.themeButton:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
}

.themeButton svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Light mode: white background with black text. The "lightMode" class is set on <html> by theme.js. */
.lightMode .myBody {
    color: black;
    background-color: white;
    background-image: none;
}

/* The icons are white images, so they are inverted to black */
.lightMode .backIcon,
.lightMode .githubIcon, .lightMode .linkedinIcon, .lightMode .instagramIcon,
.lightMode .twitterIcon, .lightMode .myProjectsIcon {
    filter: invert(1);
}

.lightMode .githubIconText, .lightMode .linkedinIconText, .lightMode .instagramIconText,
.lightMode .twitterIconText, .lightMode .myProjectsIconText {
    color: black;
}

.lightMode .songLength, .lightMode .songBpm {
    color: rgba(0, 0, 0, 0.7);
}

.lightMode .themeButton, .lightMode .metronomeButton, .lightMode .playerButton {
    color: black;
    background-color: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.3);
}

.lightMode .playerButton {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.lightMode .themeButton:hover, .lightMode .metronomeButton:hover, .lightMode .playerButton:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

.lightMode .playerButton:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.lightMode .songButton,
.lightMode a.songButton:link, .lightMode a.songButton:visited, .lightMode a.songButton:hover {
    color: black;
}

.lightMode .songButton {
    background-color: white;
    border-color: rgba(0, 0, 0, 0.25);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.lightMode a.songButton:hover {
    background-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.lightMode .songButtonLength {
    color: rgba(0, 0, 0, 0.6);
}

/* Same hues as in dark mode, but darker so they stand out on the white background */
.lightMode .sectionIntro     { --section-color: hsl(45, 85%, 32%); }
.lightMode .sectionUpbeat    { --section-color: hsl(20, 90%, 40%); }
.lightMode .sectionDarkness  { --section-color: hsl(270, 55%, 40%); }
.lightMode .sectionSadness   { --section-color: hsl(210, 65%, 38%); }
.lightMode .sectionClimax    { --section-color: hsl(350, 80%, 40%); }

/* Same hues as the dark mode chords, darkened to be readable on the white background */
.lightMode .chordA  { color: hsl(0, 100%, 38%); }
.lightMode .chordBb { color: hsl(30, 100%, 35%); }
.lightMode .chordB  { color: hsl(60, 100%, 27%); }
.lightMode .chordC  { color: hsl(90, 100%, 28%); }
.lightMode .chordDb { color: hsl(120, 100%, 28%); }
.lightMode .chordD  { color: hsl(150, 100%, 28%); }
.lightMode .chordEb { color: hsl(180, 100%, 28%); }
.lightMode .chordE  { color: hsl(210, 100%, 38%); }
.lightMode .chordF  { color: hsl(240, 100%, 45%); }
.lightMode .chordGb { color: hsl(270, 100%, 42%); }
.lightMode .chordG  { color: hsl(300, 100%, 32%); }
.lightMode .chordAb { color: hsl(330, 100%, 38%); }

.lightMode .wipWarning, .lightMode .wipBadge {
    color: hsl(40, 100%, 28%);
    border-color: hsla(40, 100%, 35%, 0.6);
}

.lightMode .wipWarning {
    background-color: rgba(255, 190, 0, 0.15);
}