.im-fell-great-primer-sc-regular .smallcaps {
  font-family: "IM Fell Great Primer SC", serif;
  font-weight: 400;
  font-style: normal;
}

.im-fell-great-primer-regular .regular {
  font-family: "IM Fell Great Primer", serif;
  font-weight: 400;
  font-style: normal;
}

.im-fell-great-primer-regular-italic .italic {
  font-family: "IM Fell Great Primer", serif;
  font-weight: 400;
  font-style: italic;
}

.permanent-marker-regular .script{
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'IM Fell Great Primer', serif;
  font-size: 18px;
  line-height: 1.5;
  color: #543;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('images/background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5;
  z-index: -1;
}

a {
  font-family: "Permanent Marker", sans-serif;
  text-decoration: none;
  color: #000;
  background-color: #fff;
  padding: 0.25rem;
  border-radius: 0.25rem;
  border: 0px solid;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

a:hover {
  background-color: #333;
  color: #f0f0f0;
}

footer {
  width: 100%;
  max-width: 960px;
  padding: 0 2rem 0 2rem;
  margin-top: 2rem;
  margin-bottom: 4rem;
  text-align: center;
  text-transform: small-caps;
}
h2 {
  font-family: "IM Fell Great Primer SC", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  letter-spacing: 0.2em;
}

header {
  width: 100%;
  max-width: 1920px;
  margin: 1rem 0 0 0;
  padding: 2rem;
  text-align: center;
  position: relative;
}
header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('images/map.webp');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.25;
  z-index: -1;
}

#song-links li {
  font-variant: small-caps;
}

p {
  font-family: "IM Fell Great Primer", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

pre {
  font-family: "Permanent Marker", serif;
  font-weight: 400;
  font-style: normal;
  font-size: .9rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

section {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 2rem 0 2rem;
}

#bio {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
}

#bio h2 {
  width: 100%;
  text-align: center;
}

#bio-image {
  width: 100%;
}

#bio-image img {
  width: 100%;
  max-width: 600px;
}

#bio-content {
  width: 100%;
}

#lyrics-content [id^="track-"] h2 {
  font-family: "Permanent Marker", serif;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
}

#section-links {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 2rem 0 2rem;
  text-align: center;

  a {
    font-family: "IM Fell Great Primer SC", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
    letter-spacing: 0.2em;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: underline;
    background: none;
  }

  a:hover {
    background: #fff;
    color: #000;
    text-decoration: none;
  }
  a.active {
    background: none;
    color: #000;
    text-decoration: none;
  }
}

/* Small screens: stacked */
@media (max-width: 767px) {
  .streaming-links i {
    font-size: 2rem;
  }
}
/* Medium screens: side by side, 50/50 */
@media (min-width: 768px) {
  #bio-image {
    width: calc(50% - 0.5rem);
  }
  
  #bio-content {
    width: calc(50% - 0.5rem);
  }
}

/* Large screens: side by side, 30/70 */
@media (min-width: 1024px) {
  #bio-image {
    width: calc(30% - 0.5rem);
  }
  
  #bio-content {
    width: calc(70% - 0.5rem);
  }
}

#albums {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  h2 {
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: lowercase;
  }
}

#keep-on-title {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}
#keep-on-album, #christmas-album, #constellations-album {
  max-width: 300px;
  margin: 0 0 0 0;
}

#songs {
  width: 100%;
  max-width: 960px;
  margin: 1rem 0 0 0;
  padding: 0 2rem 0 2rem;
  text-align: center;
}

section#bio,
section#lyrics {
  display: none;
}

section#bio.active,
section#lyrics.active {
  display: flex;
}

#lyrics {
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
}

#lyrics h2 {
  width: 100%;
  text-align: center;
}

#song-list {
  width: calc(33.333% - 0.5rem);
  flex-shrink: 0;
}

#song-list ol {
  list-style-position: inside;
  padding: 0;
  margin: 0;
}

#song-list a {
  display: inline;
  background: none;
  color: #543;
  padding: 0;
  margin: 0;
  font-family: 'IM Fell Great Primer', serif;
  transition: all 0.3s ease;
}

#song-list a:hover {
  background: none;
  color: #000;
  text-decoration: underline;
}

#lyrics-content {
  width: calc(66.667% - 0.5rem);
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

#lyrics-content [id^="track-"] {
  display: none;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

#lyrics-content [id^="track-"] > * {
  font-size: 1rem;
  line-height: 1.5;
}

#lyrics-content [id^="track-"] pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

#lyrics-content [id^="track-"].active {
  display: block;
}

.disabled-links {
  opacity: 0.5;
  a:link {
    background: none;
    color: #543;
    text-decoration: none;
  }
  a:hover {
    background: none;
    color: #543;
    text-decoration: none;
  }
  a:active {
    background: none;
    color: #543;
    text-decoration: none;
  }
}

.new {
  background-color: #543;
  color: #fff;
  font-family: "Permanent Marker", serif;
  font-size: smaller;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  border: 0px solid;
}