:root {
  --octave-height: 100px;
  --octave-width: 120px;
  --accidentals-height: 55px;
  --naturals-height: 80px;
  --accidentals-margin-top: -80px;
  --octave-width: 120px;
  --octave-height: 80px;
  --octave-width-mobile: 100px;
  --octave-height-mobile: 80px;

  --left-hand-color: #016162;
  --active-key-color: #a1e9de;
  --hilite_left2: #009dc4;
  --hilite_left: #1d6142;
  --hilite_left_optional: #01a368;
  --hilite_left_optional2: #327da0;
  /* --hilite_active2:#7dc8f7; */
  --hilite_active2: #36747d;
  --hilite_active3: #056f57;
  --hilite_active: #36747d;
  --hilite_optional: #3f5d53;
  --hilite_optional2: #29ab87;
  --border-width: 0.001rem;
  --button-hover: #738678;
}

html, body {
  margin: 0;
  box-sizing:border-box;
}

main.piano {
  width: calc(var(--octave-width) * 6.1);
  margin: 0 auto;
  position:sticky;
  top:0;
  z-index: 5;
}

h1.title {
  position:sticky;
  top:94px;
  z-index: 5;
}


/* .chords {
  position:sticky;
  top:0;
  z-index: 5;
} */



.octave {
  height: var(--octave-height);
  width: var(--octave-width);
  position: relative;
  display: inline-grid;
}

.octave-offset {
  margin-left: -4px;
}

.naturals {
  display: grid;
  grid-template-columns: 0.55fr 0.35fr 0.15fr 0.6fr 0.15fr 0.35fr 0.55fr 0.55fr 0.4fr 0.1fr 0.6fr 0.25fr 0.25fr 0.6fr 0.1fr 0.4fr 0.55fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  height: var(--naturals-height);
  grid-template-areas: "C C D D D E E F F G G G A A A B B";
}

.accidentals {
  display: grid;
  grid-template-columns: 0.55fr 0.35fr 0.15fr 0.6fr 0.15fr 0.35fr 0.55fr 0.55fr 0.4fr 0.1fr 0.6fr 0.25fr 0.25fr 0.6fr 0.1fr 0.4fr 0.55fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  height: var(--accidentals-height);
  margin-top: var(--accidentals-margin-top);
  grid-template-areas: ". Db Db . Eb Eb . . Gb Gb . Ab Ab . Bb Bb .";
}

.white {
  background: #fff;
  border: var(--border-width) solid #222;
  border-radius: 0 0 0.2rem 0.2rem;
}

.black {
  background: #222;
  border: var(--border-width) solid #ccc;
  border-radius: 0 0 0.2rem 0.2rem;
}

.C {
  grid-area: C;
}

.D {
  grid-area: D;
}

.E {
  grid-area: E;
}

.F {
  grid-area: F;
}

.G {
  grid-area: G;
}

.A {
  grid-area: A;
}

.B {
  grid-area: B;
}

/* html,
body  {
  height: 100%;
  margin: 0;
} */

.Db {
  grid-area: Db;
}

.Eb {
  grid-area: Eb;
}

.Gb {
  grid-area: Gb;
}

.Ab {
  grid-area: Ab;
}

.Bb {
  grid-area: Bb;
}

/* html,
body {
  height: 100%;
  margin: 0;
} */

.key {
  cursor: pointer;
}
.key:active {
  /*   margin:-0.05rem 0.05rem 0.05rem -0.05rem; */
}

.key.C:active {
  /*   margin:0.0rem 0.0rem 0.0rem 0.0rem; */
}

.key:active {
  background: var(--active-key-color);
  border: var(--border-width) solid #444;
}

.key.active {
  background: var(--active-key-color);
  border: var(--border-width) solid #444;
}

.key.active-left {
  background: #4fa83d;
  border: var(--border-width) solid #444;
}

.key.optional {
  background: var(--hilite_optional);
  border: var(--border-width) solid #444;
}

/*******************************/

button {
  cursor: pointer;
  text-align: center;
}

button.active,
button:active,
button:focus {
  border: var(--border-width) solid #444;
  outline: rgba(225, 225, 225, 0);
  background: var(--hilite_active);
  background: -moz-linear-gradient(
    45deg,
    var(--hilite_active) 0%,
    var(--hilite_active2) 100%
  );
  background: -webkit-linear-gradient(
    45deg,
    var(--hilite_active) 0%,
    var(--hilite_active2) 100%
  );
  background: linear-gradient(
    45deg,
    var(--hilite_active) 0%,
    var(--hilite_active2) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--hilite_active)', endColorstr='var(--hilite_active2)',GradientType=1 );
}

button.activeL {
  border: var(--border-width) solid var(--hilite_left);
  outline: rgba(225, 225, 225, 0);
  background: var(--hilite_left);
  background: -moz-linear-gradient(
    45deg,
    var(--hilite_left) 0%,
    var(--hilite_left2) 100%
  );
  background: -webkit-linear-gradient(
    45deg,
    var(--hilite_left) 0%,
    var(--hilite_left2) 100%
  );
  background: linear-gradient(
    45deg,
    var(--hilite_left) 0%,
    var(--hilite_left2) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--hilite_left)', endColorstr='var(--hilite_left2)',GradientType=1 );
}

button.activeLO {
  border: var(--border-width) solid var(--hilite_left_optional);
  outline: rgba(225, 225, 225, 0);
  background: var(--hilite_left_optional);
  background: -moz-linear-gradient(
    45deg,
    var(--hilite_left_optional) 0%,
    var(--hilite_left_optional2) 100%
  );
  background: -webkit-linear-gradient(
    45deg,
    var(--hilite_left_optional) 0%,
    var(--hilite_left_optional2) 100%
  );
  background: linear-gradient(
    45deg,
    var(--hilite_left_optional) 0%,
    var(--hilite_left_optional2) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--hilite_left_optional)', endColorstr='var(--hilite_left_optional2)',GradientType=1 );
}


button.activeO {
  border: var(--border-width) solid var(--hilite_left);
  outline: rgba(225, 225, 225, 0);
  background: var(--hilite_optional);
  background: -moz-linear-gradient(
    45deg,
    var(--hilite_optional) 0%,
    var(--hilite_optional2) 100%
  );
  background: -webkit-linear-gradient(
    45deg,
    var(--hilite_optional) 0%,
    var(--hilite_optional2) 100%
  );
  background: linear-gradient(
    45deg,
    var(--hilite_optional) 0%,
    var(--hilite_optional2) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--hilite_optional)', endColorstr='var(--hilite_optional2)',GradientType=1 );
}

.section h3 {
  margin: 0.25rem;
  color: #555;
  text-shadow: 0.05rem 0.05rem 0.05rem #ccc, 0.055rem 0.055rem 0.055rem #999,
    0.06rem 0.06rem 0.06rem #333;
  font-weight: normal;
  width: 98%;
  text-align: center;
  background: rgba(200, 200, 200, 0.1);
  border-radius: 0.5rem;
  border: 1px solid rgba(200, 200, 200, 0.1);
}

.now_playing {
  /* position:absolute; */
  position:sticky;
  top:145px;
  z-index: 5;
  /* position: relative; */
  /* top: 0; */
  height: 2rem;
  /* margin-top: 150px; */
  font-size: 2rem;
  width: 94%;
  text-align: center;
  /* left:50%; */
  /* margin-left: -300px; */
  margin: 0 auto;
  font-family: sans-serif;
  color: #fff;
  font-weight: bold;
  padding: 0.25rem;
  background: rgba(100,100,100,0.75);
}

#content {
  position: relative;
  display: block;
  top: 2px;
  margin-top: 3px;
  margin: 0.25rem auto;
  width: calc(var(--octave-width) * 6);
  max-width: calc(var(--octave-width) * 6);
  text-align: center;
  /* background-color: rgba(0, 95, 95, 0.85); */
  /* background-image: linear-gradient(red, yellow, green); */
  /* background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); */
  /* background-image: linear-gradient(var(--left-hand-color),var(--active-key-color),var(--hilite_left2)); */
  /* background-image: linear-gradient(var(--hilite_left), var(--hilite_active2),var(--hilite_active)); */
  background-image: linear-gradient(
    var(--left-hand-color),
    /* var(--hilite_active2), */
    var(--hilite_active)
  );
  /* background-image: linear-gradient(var(--hilite_active2),var(--left-hand-color), var(--hilite_left2)); */
  color: #fff;
  font-family: sans-serif;
  border-radius: 0.5rem;
  border: 2px groove #055;
  margin-bottom: 2rem;
}
.chords,
.title,
.intro,
.verse,
.chorus,
.bridge {
  display: inline-block;
  position: relative;
  margin: 0.25rem auto;
  width: 100%;
  color: #fff;
}

.title {
  border-radius: 0.5rem;
  border: 2px groove #555;
  width: calc(var(--octave-width) * 6 - 20px);
  max-width: calc(var(--octave-width) * 6);
  padding: 0.25rem;
  background: #555;
}

span.normal {
  color:var(--active-key-color);
  text-shadow: 0.05rem 0.05rem 0.05rem #ccc, 0.055rem 0.055rem 0.055rem #999,
    0.06rem 0.06rem 0.06rem #333;
  font-weight: normal;
}
.none {
  display: none;
}

.artist {
  color: #0aa;
  font-weight: normal;
  display: inline-block;
}

.hilite_left {
  /* background-color: var(--hilite_left); */
  background-image: linear-gradient(var(--left-hand-color), var(--hilite_left));
}

button.chord {
  border-radius: 0.25rem;
  font-size: 1.05rem;
  border: 1px solid #aaa;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9), 0 -1px 1px rgba(0, 0, 0, 0.1);
  padding: 0.35rem;
  margin: 0.25rem;
  transition: 2s;
  z-index: 2;
}

button.chord:hover {
  /* background: #31728d; */
  /* color: #ddd; */
  transition: 0.5s;
}

nav {
  position: relative;
  /* bottom:5rem; */
  width: 800px;
  margin: 2rem auto;
  text-align: center;
  font-family: sans-serif;
  z-index: 1;
  height: 150px;
}

nav a {
  border-radius: 0.5rem;
  border: 1px solid #aaa;
  margin: 0.4rem;
  color: #ccc;
  font-family: sans-serif;
  text-decoration: none;
  background-color: #077;
  padding: 0.5rem;
  line-height: 2.5;
}

nav a:hover {
  color: #eee;
  background-color: 088;
}

footer {
  position: absolute;
  left: 50%;
  bottom: 2.5rem;
  width: 600px;
  margin: 0.2rem auto;
  color: #999;
  text-align: center;
  font-family: sans-serif;
  margin-left: -300px;
  font-size: 0.75rem;
  font-style: italic;
  z-index: -1;
}

footer a {
  color: #0c8990;
}


  /************************************/
  .modern {
    display: inline-block;
    margin: 10px;
    padding: 8px 15px;
    background: var(--hilite_active);
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;
    transition: all 0.3s ease-out;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.5),
      0 2px 2px rgba(0,0,0,0.3),
      0 0 4px 1px rgba(0,0,0,0.2);
    /* Font styles */
    text-decoration: none;
    text-shadow: 0 1px rgba(255,255,255,0.7);
    font-family: sans-serif;
  }
  .modern:hover  { background:var(--button-hover); }
  .embossed-link {
    font-family: sans-serif;
    box-shadow: 
      inset 0 3px 2px rgba(255,255,255,.22), 
      inset 0 -3px 2px rgba(0,0,0,.17), 
      inset 0 20px 10px rgba(255,255,255,.12), 
      0 0 4px 1px rgba(0,0,0,.1), 
      0 3px 2px rgba(0,0,0,.2);
  }
  .modern.embossed-link {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.5),
      0 2px 2px rgba(0,0,0,0.3),
      0 0 4px 1px rgba(0,0,0,0.2),
      inset 0 3px 2px rgba(255,255,255,.22), 
      inset 0 -3px 2px rgba(0,0,0,.15), 
      inset 0 20px 10px rgba(255,255,255,.12), 
      0 0 4px 1px rgba(0,0,0,.1), 
      0 3px 2px rgba(0,0,0,.2);
  }
  .modern.embossed-link:active {
    box-shadow: 
      inset 0 -2px 1px rgba(255,255,255,0.2),
      inset 0 3px 2px rgba(0,0,0,0.12);
  }
  button.modern.embossed-link:hover {
    position: relative;
    z-index: 2;
  }
  button.modern.embossed-link:hover:after {
    content: "";
    z-index: -1;
    position: absolute;
    border-radius: 6px;
    box-shadow: 
  inset 0 1px 0 rgba(0,0,0,0.1),
  inset 0 -1px 0 rgba(255,255,255,0.7);
    top: -6px; bottom: -6px;
    right: -6px; left: -6px;
    background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0));
  }

  
    @media only screen and (max-width: 999px) {
      #content {
        /* background: rgba(0,100,100,0.95); */
        background-image: linear-gradient(var(--hilite_active3),var(--hilite_active2));
        width: calc(var(--octave-width)* 6);
        max-width:100vw;
      }  
      .title {
        width: calc(var(--octave-width)* 5.5);
        max-width:100vw;
       }
    }    

    @media only screen and (max-width: 600px) {

      #content {
        /* background: rgba(0,100,100,0.95); */
        background-image: linear-gradient(var(--hilite_active3),var(--hilite_active2));
        width: calc(var(--octave-width)* 4);
        max-width:100vw;
      }  

      .title {
        width:100vw;
        max-width:100vw;
       }
      #oct1,
      #oct6 {
        display: none;
      }
    
      .piano {
        width: calc(var(--octave-width-mobile) * 6);
      }
    
      .octave {
        width: var(--octave-width-mobile);
      }
    
      .black-keys {
        width: var(--octave-width-mobile);
        grid-template-rows: var(--black-key-height-mobile);
      }
    
      .keys-white {
        margin-top: var(--black-key-height-offset-mobile);
        width: var(--octave-width-mobile);
        grid-template-rows: var(--octave-height-mobile);
      }
      .black {
        border:white;
      }
    }
  
    #volume_control {
      width: 120px;
      margin: 0 auto;
      font-family: sans-serif;
      text-align: center;
      font-size: 0.75rem;
      border-radius: 0.5rem;
      border: 1px solid #aaa;
      background: rgba(100,100,100,0.75);
      vertical-align: top;
      color:white;
      padding: 0.25rem;
      text-shadow: 0.05rem 0.05rem 0.05rem #ccc, 0.055rem 0.055rem 0.055rem #999, 0.06rem 0.06rem 0.06rem #333;
    }