body.midi-keyboard-active{
  overflow: hidden;
}

body.midi-keyboard-active section#midi-piano{
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
}

body:not(.midi-keyboard-active) section#midi-piano{
  pointer-events: none;
}

body:not(.midi-keyboard-active) section#midi-piano .keyboard-container{
  display: none;
}

body:not(.midi-keyboard-active) section#midi-piano .close-icon{
  display: none;
}

body:not(.midi-keyboard-active) section#midi-piano .midi-icon{
  pointer-events: auto;
}

body.midi-keyboard-active section#midi-piano .midi-icon{
  display: none;
}

section#midi-piano {
  --hue1: 180;
  --saturation1: 100%;
  --lightness1: 71%;
  --hue2: calc(var(--hue1) - 20);
  --saturation2: 55%;
  --lightness2: 60%;
  --lightness3: 93%;
  --color1: hsla(var(--hue2), var(--saturation2), var(--lightness2), 1); /* rgb(104, 203, 165) */
  --color2: hsla(var(--hue2), var(--saturation2), var(--lightness2), 0.8); /* rgba(104, 203, 165, .8) */
  --color3: hsla(var(--hue2), var(--saturation2), var(--lightness3), 0); /* rgba(225, 249, 240, 0) */
  --color4: hsla(var(--hue1), var(--saturation1), var(--lightness1), 1); /* rgba(110, 255, 255, 1) */
  --color5: hsla(var(--hue2), var(--saturation2), var(--lightness2), 1); /* rgba(104, 203, 165, .6) */
}

section#midi-piano {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  min-height: 100vh;
  min-width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

#midi-piano .midi-icon,
#midi-piano .close-icon{
  height: 50px;
  width: auto;
  opacity: .6;
  position: absolute;
  transition: all .2s linear;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, .3);
}

#midi-piano .midi-icon{
  bottom: 60px;
  left: calc(0% + 100px);
  border: 2px solid white;
  border-radius: 50%;
}

#midi-piano .close-icon{
  top: 30px;
  right: calc(0% + 100px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 8px 8px 10px 0px rgba(0, 0, 0, .4);
}

#midi-piano .keyboard-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

#midi-piano .keyboard-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 86px;
  /* background-color: #000; */
  background: 
    linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 97%, rgba(0, 0, 0, 1) 99%, rgba(0, 0, 0, 1) 100%),
    linear-gradient(65deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 96.5%, rgba(0, 0, 0, 1) 99%, rgba(0, 0, 0, 1) 100%),
    linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.3) 90%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 97%, rgba(255, 255, 255, 0.15) 98.5%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 97%, rgba(255, 255, 255, 0.15) 99%, rgba(255, 255, 255, 0) 100%),
    rgba(20, 20, 20, 1);
  padding: 20px 10px 10px 10px;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 6px 8px rgba(0, 0, 0, .8);
  position: relative;
  /* border: 6px solid rgba(255, 255, 255, .8); */
  /* border-bottom: none; */
  /* filter: blur(2px); */
  column-gap: 10px;
  z-index: 1;
}

#midi-piano .animation,
#midi-piano .indicator {
  margin: 20px;
  width: 40px;
  height: 40px;
  background: linear-gradient(0deg, rgba(51, 51, 51, 1) 0%, rgba(51, 51, 51, .8) 30%, rgba(51, 51, 51, .7) 50%, rgba(51, 51, 51, .8) 80%, rgba(51, 51, 51, 1) 100%);
  /* color: rgb(51, 51, 51); */
  border: 2px solid #000;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#midi-piano .animation::before,
#midi-piano .indicator::before {
  content: '';
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  background-color: #0f0;
  border-radius: 50%;
  position: absolute;
}

#midi-piano.active-animation .animation:hover{
  opacity: .9;
}

#midi-piano .animation:hover,
#midi-piano .indicator:hover {
  opacity: .8;
}

#midi-piano.active-animation .animation{
  opacity: 1;
}

#midi-piano .animation{
  opacity: .5;
}

#midi-piano .animation::before{
  width: 30px;
  height: 30px;
  background: linear-gradient(180deg, hsl(183, 100%, 54%) 0%, hsl(274, 100%, 64%) 100%);
}

#midi-piano .oscillator-type-selector select:focus-visible {
  border: none;
  outline: none;
}

#midi-piano .oscillator-type-selector select {
  background-color: black;
  color: rgba(255, 255, 255, .55);
  font-size: 16px;
}

#midi-piano .arrow-button-wrap {
  background: linear-gradient(0deg, rgba(51, 51, 51, 1) 0%, rgba(51, 51, 51, .7) 50%, rgba(51, 51, 51, .8) 80%, rgba(51, 51, 51, 1) 100%);
  border-radius: 60px;
  overflow: hidden;
  border: 2px solid #000;
}

#midi-piano .arrow-button:active svg{
  color: #0f0;
}

#midi-piano .arrow-button svg{
  height: 10px;
  width: auto;
  color: #FFF;
}
  
#midi-piano .arrow-button.left svg{
  transform: rotate(180deg);
}

#midi-piano .arrow-button {
  color: #FFF;
  padding: 14px 20px;
  cursor: pointer;
}

#midi-piano .arrow-button:hover:active {
  background-color: #555;
  transform: translate(0.5px, 0.5px);
}

#midi-piano .arrow-button:hover {
  background-color: #444;
}

#midi-piano .brand {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(calc(-50% + 5px));
  color: rgba(255, 255, 255, .15);
  font-size: 30px;
  font-family: Arial, sans-serif;
  font-weight: 700;
}

#midi-piano .btn:hover{
  opacity: 1;
}

#midi-piano .piano {
  display: flex;
  border-radius: 10px;
  border-bottom: 0;
}

#midi-piano .key {
  height: calc(var(--width) * 4);
  width: var(--width);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  cursor: pointer;
  position: relative;
}

#midi-piano .key span {
  padding: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  z-index: 1;
}

#midi-piano .white {
  --width: 100px;
  background: linear-gradient(to top, var(--color4) 0%, var(--color4) 100%);
  border: 1px solid #333;
  color: rgba(255, 255, 255, 0.6);
  overflow: hidden;

  border-radius: 0 0 20px 20px;
  /* border: 3px solid #1d1d1d; */
  border: 3px solid rgba(0, 0, 0, .85);
  border-top: none;
  box-shadow: 20px 20px 20px 0px rgba(0, 0, 0, .5);

  transition: all .05s linear;
}

#midi-piano .white.active {
  background: linear-gradient(to top, #eee 0%, #fff 100%);
  color: #FFF;
  transform: scaleY(0.99);
  box-shadow: 20px 20px 20px -10px rgba(0, 0, 0, .5);
}

#midi-piano.active-animation .white.active {
  background: linear-gradient(180deg, hsl(183, 100%, 54%) 0%, hsl(274, 100%, 64%) 100%);
  animation: hueAnimation 2s infinite linear;
}

#midi-piano .white.active{
  border-left: 3px solid #333;
}

#midi-piano .white::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 20%;
  right: 0;
  top: 0;
  background: linear-gradient(to right, rgba(136, 136, 136, 0) 0%, rgb(136, 136, 136) 100%);
  transition: all .05s linear;
  transform: rotate(0deg) translateX(15px);
}

#midi-piano .white::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, var(--color1) 0%, var(--color2) 40%, var(--color3) 100%);
  filter: blur(6px);
  transition: all .05s linear;
}

#midi-piano .white.active::after{
  background: linear-gradient(to top, var(--color1) 0%, var(--color2) 40%, var(--color3) 100%);
  transition: all .05s linear;
  opacity: .7;
}

#midi-piano .white.active::before{
  transform: rotate(2.2deg) translateX(10px);
}
  
#midi-piano .black {
  --width: 60px;
  background-color: black;
  margin-left: calc(var(--width) / -2);
  margin-right: calc(var(--width) / -2);
  z-index: 2;
  box-shadow: 20px 20px 20px -10px rgba(0, 0, 0, .3);
  position: relative;
}

#midi-piano .black.active {
  color: #d5d5d5;
  transform: perspective(80px) rotateX(-1deg) scaleX(.95) translateY(3px);
  box-shadow: 20px 20px 20px -14px rgba(0, 0, 0, .3);
}

#midi-piano .black .top-glowing{
  content: '';
  position: absolute;
  top: 0;
  left: 10px;
  right: 11px;
  bottom: 36px;
  background: linear-gradient(to top, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .15) 40%, rgba(255, 255, 255, .15) 97%, rgba(255, 255, 255, .1) 100%);
  filter: blur(1px);
  opacity: 1;
  transition: all .05s linear;
  pointer-events: none;
  transform: perspective(80px) rotateX(-1deg) scaleX(.95) translateY(3px);
}

#midi-piano .black.active .top-glowing{
  transition: all .05s linear;
  background: linear-gradient(to top, var(--color5) 0%, var(--color5) 40%, hsl(var(--hue2), 85%, 73%) 100%);
}

#midi-piano.active-animation .black.active .top-glowing{
  background: linear-gradient(45deg, hsl(183, 100%, 54%) 0%, hsl(274, 100%, 64%) 100%);
  animation: hueAnimation 2s infinite linear;
}

#midi-piano .key-wrap{
  width: 60px;
  height: 85%;
  background-color: black;
  z-index: 2;
}

#midi-piano .black span,
#midi-piano .black::after,
#midi-piano .black::before{
  content: '';
  position: absolute;
  height: 95%;
  width: 20%;
  right: 0;
  top: 0;
  background: linear-gradient(to right, rgba(136, 136, 136, 1) 0%, rgb(136, 136, 136, .5) 100%);
  transform: rotate(0deg) translateX(-5px) scaleX(0.3);
  transition: all .05s linear;
  /* z-index: 1; */
}

#midi-piano .black span{
  padding: 9px 0 0;
  top: 85%;
  left: 0;
  width: 100%;
  height: 15%;
  /* background: linear-gradient(to top, rgba(255, 255, 255, .3) 0%, rgb(255, 255, 255, .5) 100%); */
  background: linear-gradient(to top, #4e4e4e 0%, #898989 100%);
  transform: perspective(40px) rotateX(22deg) scaleX(0.82) translateY(-6px);
  border-radius: 8px 8px 0px 0px;
  color: #DDD;
}
  
#midi-piano .black.active span{
  color: #FFF;
}

#midi-piano .black::after{
  left: 0;
  transform: rotate(0deg) translateX(5px) scaleX(0.25);
}

@keyframes hueAnimation {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

@media only screen and (max-width: 750px) {
  section#midi-piano .midi-icon{
    display: none;
  }
}