@font-face {
  font-family: indie-flower;
  src: url("fonts/IndieFlower-Regular.ttf");
}

@font-face {
  font-family: swanky;
  src: url("fonts/SwankyandMooMoo-Regular.ttf")
}

@font-face {
  font-family: covered;
  src: url("fonts/CoveredByYourGrace-Regular.ttf")
}

body {
  background-color: black;
  font-family: indie-flower;
  height: 1100vh;
  /* fixes address bar resizing issue on mobile */
  height: calc((var(--vh, 1vh) * 100) + 1000vh);
}

#top-piano {
  width: 100vw;
  height: 90vh;
  background: url("images/pink-blue-piano.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform-origin: 100% 50%;
}

#key1 {
  top: 25vh;
  left: 34vw;
  right: 25vw;
  transform: translateY(-50%);
}

#key2 {
  top: 62vh;
  left: 30vw;
  right: 25vw;
  transform: translateY(-50%);
}

#key3 {
  top: 112vh;
  left: 27vw;
  right: 1vw;
  transform: translateY(-50%);
}

a {
  font-size: 1.8vmax;
}

.navbar
{
  height: 10vh;
  z-index: 7;
  background-color: black;
}

.navbar-brand
{
  font-family: covered;
  font-size: 35px;
}

.nav-link
{
  font-family: covered;
  font-size: 30px;
}

h1 {
  color: white;
  font-size: 4.5vmax;
  text-align: center;
}

h2 {
  color: white;
  font-size: 8vmin;
  text-shadow:-1px -1px 0 grey,-1px 1px 0 grey,1px -1px 0 grey,1px 1px 0 grey;
}

h3 {
  position: relative;
  margin: 0;
  font-family: indie-flower;
  color: white;
  font-size: 2.2vmax;
  text-shadow: -1px -1px 0 grey,-1px 1px 0 grey,1px -1px 0 grey,1px 1px 0 grey; 
  transform: translateX(-40%);
  left: 25px;
}

.video {
  position: absolute;
  visibility: hidden;
  opacity: 0.8;
  left: 25vw;
  top: -12vh;
}

.original {
  position: absolute;
  text-align: left;
  cursor: pointer;
}

.play-original {
  position: absolute;
  left: 8vw;
}

.piano {
  cursor: pointer;
}

.play-piano {
  position: absolute;
  top: 20vh;
  left: 8vw;
}

.pause {
  visibility: hidden;
}

.sheet {
  position: absolute;
  top: 40vh;
  left: 8vw;
}

.track {
  position: absolute;
  top: 60vh;
  left: 4vw;
  text-align: left;
}

/* foreground 1 */
div#parallax-bg-1 {
  position: fixed;
  width: 100vw;
  top: 0;
  z-index: 6;
}

/* foreground 2 */
div#parallax-bg-2 {
  position: fixed;
  width: 100vw;
  top: 0;
  z-index: 5;
}
/* middle layer 1 - piano keys */
div#parallax-bg-3 {
  position: fixed;
  width: 100vw;
  top: 0;
  z-index: 4;
}

/* middle layer 2 - details */
div#parallax-bg-4 {
  position: fixed;
  width: 100vw;
  top: 0;
  z-index: 3;
}

/* background - section dividers */
div#parallax-bg-5 {
  position: fixed;
  width: 100vw;
  top: 0;
  z-index: 2;
}

/* background - images */
div#parallax-bg-6 {
  position: fixed;
  width: 100vw;
  top: 0;
  z-index: 1;
}

/* foreground 1 */
div#parallax-bg-1 div {
  background-repeat: no-repeat;
  position: absolute;
  display: block;
  overflow: hidden;
}
div#bg-1-1 {
  background: url("images/redstripe-smaller.png");
  background-size: contain;
  width: 50vmax;
  height: 50vmax;
  left: -10vmax;
  top: 340vh;
}

div#bg-1-2 {
  background: url("images/white-music-note.png");
  background-size: contain;
  width: 7vmax;
  height: 7vmax;
  right: 20vw;
  top: 350vh;
}
div#bg-1-3 {
  background: url("images/white-music-note.png");
  background-size: contain;
  width: 7vmax;
  height: 7vmax;
  right: 30vw;
  top: 300vh;
}
div#bg-1-4 {
  background: url("images/white-music-note.png");
  background-size: contain;
  width: 7vmax;
  height: 7vmax;
  right: 10vw;
  top: 400vh;
}

/* foreground 2 */
div#parallax-bg-2 div {
  background-repeat: no-repeat;
  position: absolute;
  display: block;
  overflow: hidden;
}
div#bg-2-1 {
  background: url("images/redstripe-smaller.png");
  background-size: contain;
  width: 40vmax;
  height: 40vmax;
  left: 2vmax;
  top: 190vh;
}
div#bg-2-2 {
  background: url("images/pink-shades.png");
  background-size: contain;
  width: 30vmax;
  height: 30vmax;
  left: 50vw;
  top: 280vh;
  transform: translateX(-50%);
}

/* middle layer 1 - piano keys */
div#parallax-bg-3 div {
  background-repeat: no-repeat;
  position: absolute;
  display: block;
  overflow: hidden;
}
div#bg-3-1 {
  background: url("images/upper-keys-cropped-smaller.jpg");
  top: 100vh;
  background-size: cover;
  background-position: center;
  width: 100vw;
  height: 130vh;
}

/* middle layer 2 - details */
div#parallax-bg-4 div {
  background-repeat: no-repeat;
  position: absolute;
  display: block;
  overflow: visible;
}

div#bg-4-1 {
  top: 190vh;
  width: 100vw;
  height: 100vh;
}
div#bg-4-2 {
  top: 320vh;
  width: 100vw;
  height: 100vh;
}
div#bg-4-3 {
  top: 450vh;
  width: 100vw;
  height: 100vh;
}
div#bg-4-4 {
  top: 580vh;
  width: 100vw;
  height: 100vh;
}

/* background - section divider */
div#parallax-bg-5 div {
  background-repeat: no-repeat;
  position: absolute;
  display: block;
  overflow: hidden;
}
div#bg-5-1 {
  background-color: black;
  top: 128vh;
  width: 100vw;
  height: 9vh;
}
div#bg-5-2 {
  background-color: black;
  top: 236vh;
  width: 100vw;
  height: 9vh;
}
div#bg-5-3 {
  background-color: black;
  top: 345vh;
  width: 100vw;
  height: 9vh;
}
div#bg-5-4 {
  background-color: black;
  top: 454vh;
  width: 100vw;
  height: 9vh;
}
div#bg-5-5 {
  background-color: black;
  top: 566vh;
  width: 100vw;
  height: 9vh;
}
/* background - image */
div#parallax-bg-6 div {
  background-repeat: no-repeat;
  position: absolute;
  display: block;
}
div#bg-6-1 {
  background: url("images/green-rave-resized.jpg");
  top: 150vh;
  background-size: cover;
  width: 100vw;
  height: 120vh;
}
div#bg-6-2 {
  background: url("images/purple-rave-resized.jpg");
  top: 260vh;
  background-size: cover;
  width: 100vw;
  height: 120vh;
}
div#bg-6-3 {
  background: url("images/lasers-resized.jpg");
  top: 380vh;
  background-size: cover;
  width: 100vw;
  height: 120vh;  
}
div#bg-6-4 {
  background: url("images/decks-resized.jpg");
  top: 500vh;
  background-size: cover;
  width: 100vw;
  height: 120vh;
}

/* small screens portrait */
@media screen and (max-width: 1000px) and (orientation: portrait) {
  h3 {
    font-size: 3.2vmax;
  }
  h1 {
    font-size: 5vmax;
  }
  .navbar-brand
  {
    font-size: 28px;
  }

  .nav-link
  {
    font-family: covered;
    font-size: 25px;
  }

  div#bg-3-1 {
    height: 120vh;
  }

  #key1 {
    top: 23vh;
  }
  
  #key2 {
    top: 57vh;
  }
  
  #key3 {
    top: 103vh;
    left: 22vw;
  }

  .sheet {
    left: 40vw;
  }

  .play-original {
    left: 40vw;
  }

  .play-piano {
    left: 40vw;
  }

  .track {
    width: 100vw;
    left: 0;
    text-align: center;
  }

  .video {
    left: 8vw;
    top: -18vh;
  }

}

/* small screens landscape */
@media screen and (max-width: 1000px) and (orientation: landscape) {
  h1 {
    font-size: 5vmax;
  }

  h2 {
    font-size: 9vmin;
  }

  h3 {
    font-size: 3.2vmax;
  }
  .navbar-brand
  {
    font-size: 28px;
  }

  .nav-link
  {
    font-family: covered;
    font-size: 25px;
  }
  #key1 {
    top: 29vh;
  }
  
  #key2 {
    top: 73vh;
  }
  
  #key3 {
    top: 134vh;
    left: 22vw;
  }

  div#bg-3-1 {
    height: 155vh;
  }

  .play-original {
    top: -15vh;
  }

  .play-piano {
    top: 12vh;
  }

  .sheet {
    top: 35vh;
  }

  .track {
    top: 60vh;
  }

  .video {
    left: 30vw;
  }
}