/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 
 /* Composition */
 
 #outilsharmony #gammename{
     font-size: 1.4em;
     text-align: center;
     font-family: roboto slab,serif;
     margin-bottom: 15px;
     padding-top: 22px;
     display: inline;
     position: relative;
 }
 
 #composition{
     text-align: center;
 }
 
 #composition .interval{
     display: inline-block;
 }
 
 #composition .interval img{
    max-width:85px;   
 }
 
 /* Piano */
 
 #outilsharmony.view-piano .piano {
   width: 100%;
   height: 220px;
   display: flex;
   align-items: flex-start;
   max-width: 1130px;
   margin: auto;
 }
 
#outilsharmony.view-piano .key {
   height: 100%;
   box-sizing: border-box;
   border: 1px solid #000;
   border-radius: 0px 0px 3px 3px;
 }
 
#outilsharmony.view-piano .white {
   background: #fff;
   flex: 1;
 }
 
#outilsharmony.view-piano .black {
   background: #000;
   flex: 0.5;
   height: 60% !important;
   margin: 0 -10px;
   z-index: 1;
 }
 
 
 #outilsharmony.view-piano .key.pressed {
   animation: pianoKeyPress 0.45s ease-out forwards;
 }
 
 @keyframes pianoKeyPress {
    0% {
      -webkit-box-shadow: inset 12px -8px 0px 0px rgba(0,0,0,0.40);
      box-shadow: inset 12px -8px 0px 0px rgba(0,0,0,0.40);
      height: 99%;
    }
    100% {
      -webkit-box-shadow: none;
      box-shadow: none;
      height: 100%;
    }
  }