/* Psuedo-Pages */
/* Hide sections when not selected */
section:not(:target):not(#home),
section:target ~ #home {
  display: none;
}

/* Hide checkbox toggles, and radios off-screen*/
input {
  position: absolute;
  left: -9999px;
}

/* Hide chords, chord btn, key btn, and key grid by default */
.chord,
#key-panel,
#chord-btn,
#key-btn {
  display: none;
}
/* /////////////////////////////////////////////////////////////////// */
/* Chord Logic */
/*If .song section selected*/
:has(section:is(:target):is(.song)) {
  /* Show chord-btn */
  #chord-btn {
    display: contents;
  }
}

/* AND Chord toggle checked*/
:has(section:is(:target):is(.song)):has(#chord-toggle:checked) {
  /* Show key-btn */
  #key-btn {
    display: inline-block;
  }
  p {
    line-height: 2.25rem;
  }
  /* Style Chords */
  .chord {
    display: inline-block;
    position: relative;
    /* height: 0rem; */
    font-size: 70%;
    i {
      display: inline-block;
      font-style: normal;
    }
    .inner {
      display: block;
      position: absolute;
      left: 0;
      bottom: 0.2rem;
      overflow-wrap: normal;
    }
  }
}

/* AND key-btn on */
:has(section:is(:target):is(.song)):has(#chord-toggle:checked):has(
    #key-menu:checked
  ) {
  #key-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    width: 100%;
    height: 100vh;
  }
  #key-grid {
    display: grid;
    padding: 2rem 0 0 0;
    margin: 0;
    grid-template-columns: auto auto auto;

    li {
      text-align: center;
      color: var(--text-color);
      list-style-type: none;
      padding: 1rem;
      font-size: 2rem;
    }
  }
}
/* Hide chord and key btns if non-song section selected */
:has(section:is(:target):not(.song)) {
  #key-grid,
  #chord-btn,
  #key-btn {
    display: none;
  }
}

/* Key Stylings */
:has(#key-default:checked) {
  .root::after {
    content: "1";
  }
  .second::after {
    content: "2";
  }
  .third::after {
    content: "3";
  }
  .fourth::after {
    content: "4";
  }
  .fifth::after {
    content: "5";
  }
  .sixth::after {
    content: "6";
  }
  .seventh::after {
    content: "7";
  }
  .root-7::after {
    content: "17";
  }
  .second-m::after {
    content: "2m";
  }
  .third-m::after {
    content: "3m";
  }
  .fourth-7::after {
    content: "47";
  }
  .fifth-7::after {
    content: "57";
  }
  .sixth-m::after {
    content: "6m";
  }
  .seventh-d::after {
    content: "7dim";
  }
}

:has(#key-a-flat:checked) {
  .root::after {
    content: "A♭";
  }
  .second::after {
    content: "B♭";
  }
  .third::after {
    content: "C";
  }
  .fourth::after {
    content: "D♭";
  }
  .fifth::after {
    content: "E♭";
  }
  .sixth::after {
    content: "F";
  }
  .seventh::after {
    content: "G";
  }
  .root-7::after {
    content: "A♭7";
  }
  .second-m::after {
    content: "B♭m";
  }
  .third-m::after {
    content: "Cm";
  }
  .fourth-7::after {
    content: "D♭7";
  }
  .fifth-7::after {
    content: "E♭7";
  }
  .sixth-m::after {
    content: "Fm";
  }
  .seventh-d::after {
    content: "Gdim";
  }
}

:has(#key-a:checked) {
  .root::after {
    content: "A";
  }
  .second::after {
    content: "B";
  }
  .third::after {
    content: "C♯";
  }
  .fourth::after {
    content: "D";
  }
  .fifth::after {
    content: "E";
  }
  .sixth::after {
    content: "F♯";
  }
  .seventh::after {
    content: "G♯";
  }
  .root-7::after {
    content: "A7";
  }
  .second-m::after {
    content: "Bm";
  }
  .third-m::after {
    content: "C♯m";
  }
  .fourth-7::after {
    content: "D7";
  }
  .fifth-7::after {
    content: "E7";
  }
  .sixth-m::after {
    content: "F♯m";
  }
  .seventh-d::after {
    content: "G♯dim";
  }
}

:has(#key-a-sharp:checked) {
  .root::after {
    content: "A♯";
  }
  .second::after {
    content: "C";
  }
  .third::after {
    content: "D";
  }
  .fourth::after {
    content: "D♯";
  }
  .fifth::after {
    content: "F";
  }
  .sixth::after {
    content: "G";
  }
  .seventh::after {
    content: "A";
  }
  .root-7::after {
    content: "A♯7";
  }
  .second-m::after {
    content: "Cm";
  }
  .third-m::after {
    content: "Dm";
  }
  .fourth-7::after {
    content: "D♯7";
  }
  .fifth-7::after {
    content: "F7";
  }
  .sixth-m::after {
    content: "Gm";
  }
  .seventh-d::after {
    content: "Adim";
  }
}

:has(#key-b-flat:checked) {
  .root::after {
    content: "B♭";
  }
  .second::after {
    content: "C";
  }
  .third::after {
    content: "D";
  }
  .fourth::after {
    content: "E♭";
  }
  .fifth::after {
    content: "F";
  }
  .sixth::after {
    content: "G";
  }
  .seventh::after {
    content: "A";
  }
  .root-7::after {
    content: "B♭7";
  }
  .second-m::after {
    content: "Cm";
  }
  .third-m::after {
    content: "Dm";
  }
  .fourth-7::after {
    content: "E♭7";
  }
  .fifth-7::after {
    content: "F7";
  }
  .sixth-m::after {
    content: "Gm";
  }
  .seventh-d::after {
    content: "Adim";
  }
}

:has(#key-b:checked) {
  .root::after {
    content: "B";
  }
  .second::after {
    content: "C♯";
  }
  .third::after {
    content: "D♯";
  }
  .fourth::after {
    content: "E";
  }
  .fifth::after {
    content: "F♯";
  }
  .sixth::after {
    content: "G♯";
  }
  .seventh::after {
    content: "A♯";
  }
  .root-7::after {
    content: "B7";
  }
  .second-m::after {
    content: "C♯m";
  }
  .third-m::after {
    content: "D♯m";
  }
  .fourth-7::after {
    content: "E7";
  }
  .fifth-7::after {
    content: "F♯7";
  }
  .sixth-m::after {
    content: "G♯m";
  }
  .seventh-d::after {
    content: "A♯dim";
  }
}

:has(#key-c:checked) {
  .root::after {
    content: "C";
  }
  .second::after {
    content: "D";
  }
  .third::after {
    content: "E";
  }
  .fourth::after {
    content: "F";
  }
  .fifth::after {
    content: "G";
  }
  .sixth::after {
    content: "A";
  }
  .seventh::after {
    content: "B";
  }
  .root-7::after {
    content: "C7";
  }
  .second-m::after {
    content: "Dm";
  }
  .third-m::after {
    content: "Em";
  }
  .fourth-7::after {
    content: "7F";
  }
  .fifth-7::after {
    content: "G7";
  }
  .sixth-m::after {
    content: "Am";
  }
  .seventh-d::after {
    content: "Bdim";
  }
}

:has(#key-c-sharp:checked) {
  .root::after {
    content: "C♯";
  }
  .second::after {
    content: "D♯";
  }
  .third::after {
    content: "F";
  }
  .fourth::after {
    content: "F♯";
  }
  .fifth::after {
    content: "G♯";
  }
  .sixth::after {
    content: "A♯";
  }
  .seventh::after {
    content: "C";
  }
  .root-7::after {
    content: "C♯7";
  }
  .second-m::after {
    content: "D♯m";
  }
  .third-m::after {
    content: "Fm";
  }
  .fourth-7::after {
    content: "F♯7";
  }
  .fifth-7::after {
    content: "G♯7";
  }
  .sixth-m::after {
    content: "A♯m";
  }
  .seventh-d::after {
    content: "Cdim";
  }
}

:has(#key-d-flat:checked) {
  .root::after {
    content: "D♭";
  }
  .second::after {
    content: "E♭";
  }
  .third::after {
    content: "F";
  }
  .fourth::after {
    content: "G♭";
  }
  .fifth::after {
    content: "A♭";
  }
  .sixth::after {
    content: "B♭";
  }
  .seventh::after {
    content: "C";
  }
  .root-7::after {
    content: "D♭7";
  }
  .second-m::after {
    content: "E♭m";
  }
  .third-m::after {
    content: "Fm";
  }
  .fourth-7::after {
    content: "G♭7";
  }
  .fifth-7::after {
    content: "A♭7";
  }
  .sixth-m::after {
    content: "B♭m";
  }
  .seventh-d::after {
    content: "Cdim";
  }
}

:has(#key-d:checked) {
  .root::after {
    content: "D";
  }
  .second::after {
    content: "E";
  }
  .third::after {
    content: "F♯";
  }
  .fourth::after {
    content: "G";
  }
  .fifth::after {
    content: "A";
  }
  .sixth::after {
    content: "B";
  }
  .seventh::after {
    content: "C♯";
  }
  .root-7::after {
    content: "D7";
  }
  .second-m::after {
    content: "Em";
  }
  .third-m::after {
    content: "F♯m";
  }
  .fourth-7::after {
    content: "G7";
  }
  .fifth-7::after {
    content: "A7";
  }
  .sixth-m::after {
    content: "Bm";
  }
  .seventh-dim::after {
    content: "C♯dim";
  }
}

:has(#key-d-sharp:checked) {
  .root::after {
    content: "D♯";
  }
  .second::after {
    content: "F";
  }
  .third::after {
    content: "G";
  }
  .fourth::after {
    content: "G♯";
  }
  .fifth::after {
    content: "A♯";
  }
  .sixth::after {
    content: "C";
  }
  .seventh::after {
    content: "D";
  }
  .root-7::after {
    content: "D♯7";
  }
  .second-m::after {
    content: "Fm";
  }
  .third-m::after {
    content: "Gm";
  }
  .fourth-7::after {
    content: "G♯7";
  }
  .fifth-7::after {
    content: "A♯7";
  }
  .sixth-m::after {
    content: "Cm";
  }
  .seventh-d::after {
    content: "Ddim";
  }
}

:has(#key-e-flat:checked) {
  .root::after {
    content: "E♭";
  }
  .second::after {
    content: "F";
  }
  .third::after {
    content: "G";
  }
  .fourth::after {
    content: "A♭";
  }
  .fifth::after {
    content: "B♭";
  }
  .sixth::after {
    content: "C";
  }
  .seventh::after {
    content: "D";
  }
  .root-7::after {
    content: "E♭7";
  }
  .second-m::after {
    content: "Fm";
  }
  .third-m::after {
    content: "Gm";
  }
  .fourth-7::after {
    content: "A♭7";
  }
  .fifth-7::after {
    content: "B♭7";
  }
  .sixth-m::after {
    content: "Cm";
  }
  .seventh-d::after {
    content: "Ddim";
  }
}

:has(#key-e:checked) {
  .root::after {
    content: "E";
  }
  .second::after {
    content: "F♯";
  }
  .third::after {
    content: "G♯";
  }
  .fourth::after {
    content: "A";
  }
  .fifth::after {
    content: "B";
  }
  .sixth::after {
    content: "C♯";
  }
  .seventh::after {
    content: "D♯";
  }
  .root-7::after {
    content: "E7";
  }
  .second-m::after {
    content: "F♯m";
  }
  .third-m::after {
    content: "G♯m";
  }
  .fourth-7::after {
    content: "A7";
  }
  .fifth-7::after {
    content: "B7";
  }
  .sixth-m::after {
    content: "C♯m";
  }
  .seventh-d::after {
    content: "D♯dim";
  }
}

:has(#key-f:checked) {
  .root::after {
    content: "F";
  }
  .second::after {
    content: "G";
  }
  .third::after {
    content: "A";
  }
  .fourth::after {
    content: "B♭";
  }
  .fifth::after {
    content: "C";
  }
  .sixth::after {
    content: "D";
  }
  .seventh::after {
    content: "E";
  }
  .root-7::after {
    content: "F7";
  }
  .second-m::after {
    content: "Gm";
  }
  .third-m::after {
    content: "Am";
  }
  .fourth-7::after {
    content: "B♭7";
  }
  .fifth-7::after {
    content: "C7";
  }
  .sixth-m::after {
    content: "Dm";
  }
  .seventh-d::after {
    content: "Edim";
  }
}

:has(#key-f-sharp:checked) {
  .root::after {
    content: "F♯";
  }
  .second::after {
    content: "G♯";
  }
  .third::after {
    content: "A♯";
  }
  .fourth::after {
    content: "B";
  }
  .fifth::after {
    content: "C♯";
  }
  .sixth::after {
    content: "D♯";
  }
  .seventh::after {
    content: "F";
  }
  .root-7::after {
    content: "F♯7";
  }
  .second-m::after {
    content: "G♯m";
  }
  .third-m::after {
    content: "A♯m";
  }
  .fourth-7::after {
    content: "B7";
  }
  .fifth-7::after {
    content: "C♯7";
  }
  .sixth-m::after {
    content: "D♯m";
  }
  .seventh-d::after {
    content: "Fdim";
  }
}

:has(#key-g-flat:checked) {
  .root::after {
    content: "G♭";
  }
  .second::after {
    content: "A♭";
  }
  .third::after {
    content: "B♭";
  }
  .fourth::after {
    content: "B";
  }
  .fifth::after {
    content: "D♭";
  }
  .sixth::after {
    content: "E♭";
  }
  .seventh::after {
    content: "F";
  }
  .root-7::after {
    content: "G♭7";
  }
  .second-m::after {
    content: "A♭m";
  }
  .third-m::after {
    content: "B♭m";
  }
  .fourth-7::after {
    content: "B7";
  }
  .fifth-7::after {
    content: "D♭7";
  }
  .sixth-m::after {
    content: "E♭m";
  }
  .seventh-d::after {
    content: "Fdim";
  }
}

:has(#key-g:checked) {
  .root::after {
    content: "G";
  }
  .second::after {
    content: "A";
  }
  .third::after {
    content: "B";
  }
  .fourth::after {
    content: "C";
  }
  .fifth::after {
    content: "D";
  }
  .sixth::after {
    content: "E";
  }
  .seventh::after {
    content: "F♯";
  }
  .root-7::after {
    content: "G7";
  }
  .second-m::after {
    content: "Am";
  }
  .third-m::after {
    content: "Bm";
  }
  .fourth-7::after {
    content: "C7";
  }
  .fifth-7::after {
    content: "D7";
  }
  .sixth-m::after {
    content: "Em";
  }
  .seventh-d::after {
    content: "F♯dim";
  }
}

:has(#key-g-sharp:checked) {
  .root::after {
    content: "G♯";
  }
  .second::after {
    content: "A♯";
  }
  .third::after {
    content: "C";
  }
  .fourth::after {
    content: "C♯";
  }
  .fifth::after {
    content: "D♯";
  }
  .sixth::after {
    content: "F";
  }
  .seventh::after {
    content: "G";
  }
  .root-7::after {
    content: "G♯7";
  }
  .second-m::after {
    content: "A♯m";
  }
  .third-m::after {
    content: "Cm";
  }
  .fourth-7::after {
    content: "C♯7";
  }
  .fifth-7::after {
    content: "D♯7";
  }
  .sixth-m::after {
    content: "Fm";
  }
  .seventh-d::after {
    content: "Gdim";
  }
}
/* Chord Logic Ends */
/* //////////////////////////////////////////////////////*/

/* Variables */
:root {
  --bg-color: black;
  --text-color: white;
  --link-color: orange;
  --link-alt-color: yellow;
  --font-size: 1rem;
}

/* General */
* {
  background-color: var(--bg-color);
  max-width: 100%;
}

body {
  padding: 0 1.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font: var(--font-size) -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
}

/* Nav bar at top of screen */
header {
  padding-top: 1rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: transparent;

  li {
    list-style-type: none;
    font-size: 2rem;
    color: var(--text-color);
  }
  svg {
    fill: var(--text-color);
    min-height: 44px;
    min-width: 44px;
  }

  #header-buttons-left,
  #header-buttons-right {
    display: flex;
    margin: 0;
    background-color: transparent;

    li {
      background-color: transparent;
    }
  }

  #header-buttons-left {
    padding-left: 0;

    li {
      padding-right: 1.5rem;
    }
  }

  #header-buttons-right {
    padding-right: 0;
    padding-left: 0;

    #chord-btn-li {
      padding-left: 1.5rem;
    }
  }

  label {
    list-style-type: none;
    cursor: pointer;
    background-color: transparent;
    color: var(--text-color);
  }

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

section {
  margin-left: auto;
  margin-right: auto;
  scroll-snap-align: start;
  scroll-margin: 7rem;
  color: var(--text-color);
  width: max-content;

  h1 {
    text-align: center;
    font-size: 2rem;
  }
  .lyrics {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
  a {
    color: var(--link-color);
    text-decoration-thickness: 1px;
    line-height: 44px;
    min-height: 44px;
    min-width: 44px;
  }
  a:active {
    color: var(--link-alt-color);
  }
  li {
    list-style-type: none;
    text-align: center;
    min-height: 44px;
    min-width: 44px;
  }
  ul {
    padding-left: 0;
  }
  p {
    overflow-wrap: break-word;
    line-height: 1.5rem;
  }
}

footer {
  padding: 2rem 0;

  p {
    text-align: center;
    color: var(--text-color);
  }
}

@media screen and (min-width: 650px) {
  header,
  #key-panel,
  section,
  footer {
    max-width: 650px;
  }
  #key-grid {
    li {
      label:hover {
        color: gray;
        cursor: pointer;
      }
    }
  }
  header {
    a:hover svg,
    label:hover svg {
      fill: gray;
    }
    :hover,
    :focus{
      color: gray;
    }
  }
  section {
    a:hover,
    a:focus {
      font-size: 110%;
      text-decoration-thickness: 2px;
    }
  }
}

/* Light/Dark Theme Toggle */
:has(#theme-toggle:checked) {
  --bg-color: white;
  --text-color: black;
  --link-color: blue;
  --link-alt-color: red;
}
@media (prefers-color-scheme: light) {
  body {
    --bg-color: white;
    --text-color: black;
    --link-color: blue;
    --link-alt-color: red;
  }
  :has(#theme-toggle:checked) {
    --bg-color: black;
    --text-color: white;
    --link-color: orange;
    --link-alt-color: yellow;
  }
}