@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap" rel="stylesheet');
 
 h1 {
 font-family: "Silkscreen", sans-serif;
 color: #eef00;
   display: flex;
  justify-content: center;
 }
 
 body {
   background-image: url('BWADJ.png'), 
  radial-gradient(circle,rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 100%);
  background-size: 100% 120%;
  background-blend-mode:screen;
background-position: center;
background-repeat: no-repeat;
  background-attachment: fixed; 
}


 #shadowBox 

.rainbow {
    text-align: center;
    text-decoration: underline;
 
    letter-spacing: 5px;
}
.rainbow_text_animated {
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation 3s ease-in-out infinite;
    background-size: 400% 100%;
}

@keyframes rainbow_animation {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}
.hidden {
  display: none;
  
 
}

.container {
    display: flex;
  justify-content: center;
  /*justify-content: center;*/
  overflow-x: hidden;
  overflow-y: hidden;
  width: 1720px;
  height: 110px;
  white-space: nowrap;
  margin: 10px;
}

.keyboard {
    display: flex;
  justify-content: center;
  width: 100px;
  padding: 0;
  margin: 0;
}

.key {
  
  cursor: pointer;
  font:
    16px "Open Sans",
    "Lucida Grande",
    "Arial",
    sans-serif;
  border: 1px solid black;
  border-radius: 5px;
  width: 20px;
  height: 80px;
  text-align: center;
  box-shadow: 2px 2px darkgray;
  display: inline-block;
  position: relative;
  margin-right: 3px;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.key div {

  position: relative;
  bottom: 0;
  text-align: center;
  width: 100%;
  pointer-events: none;
}

.key div sub {
  font-size: 10px;
  pointer-events: none;
}

.key:hover {
  background-color: #986779;
  
  
}

.key:active,
.active {
  background-color: #94d629;
  color: white;

}

.octave {
  display: inline-block;
  padding-right: 6px;
}

/*.settingsBar {*/
  /*justify-content: center;*/
/*  padding-top: 8px;*/
/*  font:*/
/*    14px "Open Sans",*/
/*    "Lucida Grande",*/
/*    "Arial",*/
/*    sans-serif;*/
/*  position: relative;*/
/*  vertical-align: middle;*/
/*  width: 100%;*/
/*  height: 30px;*/
/*}*/

.left {
  width: 50%;
  position: absolute;
  left: 0;
  display: table-cell;
  vertical-align: middle;
}

.left span,
.left input {
  vertical-align: middle;
}

.right {
  width: 50%;
  position: absolute;
  right: 0;
  display: table-cell;
  vertical-align: middle;
}

.right span {
  vertical-align: middle;
}

.right input {
  vertical-align: baseline;
}