.playkeys_parent_container{
    /* Here is full keyboard placement class
    every key size and align is set in% of parent block
    that is assuming you don't add or remove keys
    The keyboard looks , only
     */
    margin: 15% auto;
     width: 43em; 
    height: 16em;
    background-color: #444;
  /*   
    min-width: 250px;
    max-width: 850px;
    min-height: 60px;
    max-height: 200px;  */
    /* sinze size is in em and not in some vh measurement you do not need this */
   
    /* font-size: 16px; default size */
    /* uncomment this if you want a border for a keyboard
      padding:0 auto;
    border:1px solid #160801;
    border-radius:1em;
    background:linear-gradient(to bottom right,rgba(0,0,0,0.3),rgba(200,200,200,0));
    box-shadow:0 0 50px rgba(0,0,0,0.5) inset,0 1px rgba(212,152,125,0.2) inset,0 5px 15px rgba(0,0,0,0.5) */
  }
  
  
  .playkey_button_container{
    padding:0;
    position:relative;
    float:left;
    margin:0 0 0 -3%;
    box-sizing: border-box;
  }
  .cf{ 
    margin:0;
  } 
  
  .playkey_button_container:not(.sharp){
    height: 100%;
    width:9.99%;
    z-index:1;
    border:1px solid #bbb;
    border-radius:0 0 5px 5px;
    box-shadow:-1px 0 0 rgba(255,255,255,0.8) inset,0 0 5px #ccc inset,0 0 3px rgba(0,0,0,0.2);
    background:linear-gradient(to bottom,#eee 0%,#fff 100%)
    }
  .playkey_button_container.sharp { 
      height: 60%;
      width:6%;
      z-index:2;
      border: 0.1px solid #000;
      border-radius:0 0 3px 3px;
      box-shadow:-1px -1px 2px rgba(255,255,255,0.2) inset,0 -5px 2px 3px rgba(0,0,0,0.6) inset,0 2px 4px rgba(0,0,0,0.5);
      background:linear-gradient(45deg,#222 0%,#555 100%);
      color: #eee;
      font-size: 0.75em;
  }
  
    .playkey_button_container:not(.sharp).now_playing{
      border: 1px solid #999;
      box-shadow:2px 0 3px rgba(0,0,0,0.1) inset,-5px 5px 20px rgba(0,0,0,0.2) inset,0 0 3px rgba(0,0,0,0.2);
      background:linear-gradient(to bottom,#fff 0%,#e9e9e9 100%)
    }
    .sharp.now_playing{
      box-shadow:-1px -1px 2px rgba(255,255,255,0.2) inset,0 -2px 2px 3px rgba(0,0,0,0.6) inset,0 1px 2px rgba(0,0,0,0.5);
      background:linear-gradient(to right,#444 0%,#222 100%)
    }
  
  .hints{
    display: block;
    width: 100%;
    opacity: 1;
    transition: opacity .3s ease-out;
  }
  .hints.h_note{

    text-align: center;
    font-size: 80%;
  }
  
  .hints.h_keyboard {
    /* keyboard_hints */
    position: absolute;
    bottom: 5%;
    left: 5%;
    font-size: 120%;
  }
 
  video#bgvid { 
    position: fixed;
     top: 50%;
    left: 50%; 
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover; 
  }