/*palette colors:
sky: #CAEBF2
carbon: #A9A9A9
watermelon: #FF3B3F
neutral: #EFEFEF
*/

body {
   background-color: #EFEFEF;
   text-align:center;
   font-size: 16px;
   font-family: 'Raleway', sans-serif;
   color: #A9A9A9;
}

.container {
   padding-top: 3%;
}
.PASS {
   /*visibility: hidden;*/
   background-color: #EFEFEF;
   border: none;

}
.text {
   text-align: center;
   font-size: 3em;
   /*background-color: #CAEBF2;*/
   /*display:inline-block;;*/
   /*height:2em;*/
}

span {
   background-color: #CAEBF2;
   min-width:50px;
   min-height: 70px;
   display:inline-block;
   border: 1px solid #A9A9A9;
}

#piano {
   /*padding-top:5%;*/
   height: 400px;
   width:1000px;
   padding-left: 13%;
}


.white-key {
   width: 50px;
   height: 250;
   fill:white;
   stroke: #CAEBF2;
   stroke-width:2px;
}
.pink-white {
   width: 50px;
   height: 250;
   fill:#FF3B3F;
   stroke: #CAEBF2;
   stroke-width:2px;
}
.black-key {
   width:30;
   height:150;
   fill:black;
}
.pink-black {
   width:30;
   height:150;
   fill:#FF3B3F;
}
.octaves {
   padding-top:5%;
   padding-bottom:0px;
}
.octave {
   font-size: .4em;
   background-color: transparent;
   border:none;
   color: black;
}
.btn {
   background-color: #CAEBF2;
   color: black;
   font-size: .4em;
}
.btn:hover {
   color: #A9A9A9;
   font-size:.4em;
}