.game-canvas-container{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    opacity: 0;
  }
  .game-canvas-relative{
    position: relative;
    width: 100%;
    height: 100%;
  }
  .key-container{
    width: 100%;
    position: absolute;
  }
  .bottom-box{
    width: 90%;
    margin: 0 5%;
    opacity: 0.7;
  }

  .bottom-box-row{
    margin-top: 10px;
    height: 50px;
  }

  .single-key{
    opacity: 1;
    position: relative;
    width: 50px;
    height: 50px;
    margin: auto;
    border-radius: 10px;
    vertical-align: middle;
    border: 1px solid #fff;
    color: #fff;
    font-size:25px;
    text-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px #0fa,
      /* 0 0 82px #0fa, */
      /* 0 0 92px #0fa, */
      /* 0 0 102px #0fa, */
      0 0 151px #0fa;
    box-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px #0fa,
      /* 0 0 82px #0fa, */
      /* 0 0 92px #0fa, */
      /* 0 0 102px #0fa, */
      0 0 151px #0fa;
    /* text-shadow: 2px 0 0 #86377b, -2px 0 0 #86377b, 0 2px 0 #86377b, 0 -2px 0 #86377b, 1px 1px #86377b, -1px -1px 0 #86377b, 1px -1px 0 #86377b, -1px 1px 0 #86377b;text-shadow: 2px 0 0 #86377b, -2px 0 0 #86377b, 0 2px 0 #86377b, 0 -2px 0 #86377b, 1px 1px #86377b, -1px -1px 0 #86377b, 1px -1px 0 #86377b, -1px 1px 0 #86377b;
    box-shadow: 2px 0 0 #86377b, -2px 0 0 #86377b, 0 2px 0 #86377b, 0 -2px 0 #86377b, 1px 1px #86377b, -1px -1px 0 #86377b, 1px -1px 0 #86377b, -1px 1px 0 #86377b;text-shadow: 2px 0 0 #86377b, -2px 0 0 #86377b, 0 2px 0 #86377b, 0 -2px 0 #86377b, 1px 1px #86377b, -1px -1px 0 #86377b, 1px -1px 0 #86377b, -1px 1px 0 #86377b; */
  }
  .single-key.light-shine{
    background-color: black;
    text-shadow:
      0 0 7px purple;
    box-shadow:
      0 0 7px #fff,
      0 0 10px #0fa;
      /* 0 0 21px #fff, */
      /* 0 0 42px #0fa, */
      /* 0 0 82px #0fa, */
      /* 0 0 92px #0fa, */
      /* 0 0 102px #0fa, */
      /* 0 0 151px #0fa; */
  }
  .selectable-keyboard{
    cursor: pointer;
  }
  .selectable-keyboard:hover{
    transform: scale(1.1);
  }
  .clickable-key{
    cursor: pointer;
    z-index: 100;
    transition: all .2s ease-in-out;
  }
  .single-key.inactive-key{
    text-shadow:
    0 0 7px purple;
  box-shadow:
    0 0 7px #000;
  }
  .clickable-key:hover{
    transform: scale(1.1);
  }
  .key-reverse .single-key{
    opacity: 0.2;
    width: 20px;
    height: 20px;
    border-radius: 2px;
    font-size:12px;
  }
  .neon-success{
    text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #0fa,
    /* 0 0 82px #0fa, */
    /* 0 0 92px #0fa, */
    /* 0 0 102px #0fa, */
    0 0 151px #0fa;
  box-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #0fa,
    /* 0 0 82px #0fa, */
    /* 0 0 92px #0fa, */
    /* 0 0 102px #0fa, */
    0 0 151px #0fa;
  }
  .neon-danger{
    text-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px rgb(255, 122, 122),
      0 0 82px rgb(255, 88, 88),
      0 0 92px rgb(255, 44, 44),
      0 0 102px rgb(255, 22, 22),
      0 0 151px rgb(255, 0, 0) !important;
    box-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px rgb(255, 122, 122),
      0 0 82px rgb(255, 88, 88),
      0 0 92px rgb(255, 44, 44),
      0 0 102px rgb(255, 22, 22),
      0 0 151px rgb(255, 0, 0) !important;
  }
  .single-key span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .key-row-1.side-right{
    left: 30px;
  }
  .key-row-1.side-left{
    right: 30px;
  }

  .single-key.key-col-left1{
    right: 60px;
  }

  .full-keyboard .key-row-1.side-right{
    left: 0px;
  }
  .full-keyboard .key-row-1.side-left{
    right: 60px;
  }

  .full-keyboard .key-row-2.side-right{
    right: 35px;
  }
  .full-keyboard .key-row-2.side-left{
    right: 35px;
  }

  .full-keyboard .key-row-0.side-right{
    right: 40px;
  }
  .full-keyboard .key-row-0.side-left{
    right: 40px;
  }

  .full-keyboard .single-key.key-col-left1{
    right: 60px;
  }

  .full-keyboard .key-row-0{
    bottom: 70px;
  }

  .full-keyboard .key-row-1{
    bottom: 130px;
  }

  .full-keyboard .key-row-2{
    bottom: 190px;
  }


  .full-keyboard.game-keyboard .key-row-0{
    bottom: 280px;
  }

  .full-keyboard.game-keyboard .key-row-1{
    bottom: 340px;
  }

  .full-keyboard.game-keyboard .key-row-2{
    bottom: 400px;
  }

  .full-keyboard.game-keyboard .key-reverse.key-row-0{
    bottom: 100%;
  }

  .full-keyboard.game-keyboard .key-reverse.key-row-1{
    bottom: 100%;
  }

  .full-keyboard.game-keyboard .key-reverse.key-row-2{
    bottom: 100%;
  }
  .single-key.key-col-left2{
    right: 120px;
  }
  .single-key.key-col-left3{
    right: 180px;
  }
  .single-key.key-col-left4{
    right: 240px;
  }
  .single-key.key-col-left5{
    right: 300px;
  }
  .single-key.key-col-right1{
    left: 60px;
  }
  .single-key.key-col-right2{
    left: 120px;
  }
  .single-key.key-col-right3{
    left: 180px;
  }
  .single-key.key-col-right4{
    left: 240px;
  }
  .single-key.key-col-right5{
    left: 300px;
  }
  .single-key.key-col-right6{
    left: 360px;
  }
  .single-key.key-col-right7{
    left: 420px;
  }

  .keyboard-key{
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    margin: 0 5px;
    color: #fff;
    border-radius: 10px;
    text-align: center;
    box-shadow: 2px 2px 5px black, -2px -2px 5px black, 2px -2px 5px black, -2px 2px 5px black;
    text-shadow: 2px 2px 5px black, -2px -2px 5px black, 2px -2px 5px black, -2px 2px 5px black;
  }

  .keyboard-key.keyboard-enter,.keyboard-key.keyboard-capslock{
    width: 100px;
  }
  .keyboard-tab{
    width: 65px;
  }
  .keyboard-pipe{
    width: 75px;
  }
  .keyboard-shift-right{
    width: 140px;
  }
  .keyboard-shift-left{
    width: 120px;
  }
  .keyboard-space{
    width: 380px;
  }
  .dark-keyboard .keyboard-key{
    border: 1px solid #000;
    color: #000;
  }
  .keyboard-message{
    font-size: 30px;
  }