.scene {
    position: relative;
    width: 105px;
    height: 50px;
    margin-bottom: 40px;
    perspective: 275px;
  }
  .re {
    position: absolute;
      color: gray;
      width: 30px;
      height: 22px;
      margin: 19px 49px auto;
      transform: rotateY(0deg) translateZ(200px);
      z-index: 2;
  }
  .re:after {
    content:"Re";
      position:absolute;
      font-size:4px;
      bottom:-1px;
      left:1px;
  }
  .mi {
    position: absolute;
      color: gray;
      width: 30px;
      height: 22px;
      margin: 18px 42px auto;
      transform: rotateY(347.143deg) translateZ(200px);
      z-index: 2;
  }
  .mi:after {
    content:"Mi";
      position:absolute;
      font-size:4px;
      bottom:-1px;
      left:1px;
  }
  .ti {
    position: absolute;
      color: gray;
      width: 30px;
      height: 22px;
      margin: 17px 47px auto;
      transform: rotateY(340deg) translateZ(200px);
      z-index: 2;
  }
  .ti:after {
    content:"Ti";
      position:absolute;
      font-size:4px;
      bottom:-1px;
      left:1px;
  }
  .sol {
    position: absolute;
      color: gray;
      width: 30px;
      height: 22px;
      margin: 19px 33px auto;
      transform: rotateY(12.587deg) translateZ(200px);
      z-index: 2;
  }
  .sol:after {
    content:"Sol";
      position:absolute;
      font-size:4px;
      bottom:-1px;
      left:1px;
  }
  .fa {
    position: absolute;
    width: 30px;
    height: 22px;
    margin: 16.5px 34.5px auto;
    transform: rotateY(24.0deg) translateZ(200px);
    z-index: 2;
}
.fa:after{
    content:"Fa";
    position:absolute;
    font-size:4px;
    bottom:-1px;
    left:1px;
}
  .major {
      position: absolute;
      border-left: 2px solid green;
      border-right: 2px solid green;
      color: green;
      background-color: rgba(0, 255, 0, 0.33);
      width: 30px;
      height: 22px;
      margin: 19px 10px auto;
      transform: rotateY(25.7143deg) translateZ(200px);
      z-index: 2;
  }
  .major:after{
      content:"Major: Do";
      position:absolute;
      font-size:4px;
      bottom:-1px;
      left:4px;
  }
  .minor {
      position: absolute;
      border-left: 2px solid blue;
      border-right: 2px solid blue;
      color: blue;
      background-color: rgba(0, 0, 255, 0.33);
      width: 31px;
      height: 24px;
      margin: 18px 47px auto;
      transform: rotateY(347.143deg) translateZ(190px);
      z-index: 2;
  }
  .minor:after{
      content:"minor: La";
      position:absolute;
      font-size: 4px;
      bottom:-1px;
      right: 5px;
  }
  .carousel {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: translateZ(-288px);
    transform-style: preserve-3d;
    transition: transform 1s;
  }
  .carousel__cell {
    position: absolute;
    width: 95px;
    height: 60px;
    left: 5px;
    top: 5px;
    border: 2px solid black;
    line-height: 58px;
    font-size: 60px;
    font-weight: bold;
    color: white;
    text-align: center;
    transition: transform 1s, opacity 1s;
    background: rgb(162, 178, 185); 
    backface-visibility: hidden;
  }
  .abcjs-note, .abcjs-time-signature { fill: #FFFFFF00;}
  .slider {
      width:60%;
  }