body{
    background: #666;
}

h1 {
    text-align: center;
    font-size: min(2.5em,8vw);
    font-family: 'Secular One',monospace;
    color: #fff;
    margin-top:0px;
    margin-bottom:0px;
  }
  
  h2,p {
      font-family: sans-serif;
      color: #fff;
  }
  .keyboard {
      text-align: center;
      font-size: 14px;
      font-family: sans-serif;
      position:fixed;
      bottom:5vh;
      width: 100%;
      left: 50%;
      margin-left: -50%;
  }
  
  .keyboard__row {
      display: inline-block;
      height: 9vh;
      margin: 0.2em;
      max-width:100vh;
  }
  
  
  .keyboard__row > * {
      position: relative;
      background: #333;
      text-align: center;
      color: #eee;
      float: left;
      border-radius: 0.3em;
      margin: 0.1em;
      padding: 0.2em;
      width: 1.5em;
      height: 9vh;
      box-sizing: border-box;
      cursor: pointer;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select:none;
      border: 1px solid #444;
      box-shadow: 0 0.2em 0 0.05em #222;
      border-bottom-color: #555;
  }
  
  /* Maximum aspect ratio */
  @media (max-aspect-ratio: 3/2) {
  .keyboard__row > * {
      width: 1.4em;
    }
  }

    
  .keyboard__row > div[data-pressed],
  .keyboard__row > div:active {
      background: #2a2a2a;
      color: #aaa;
      position: relative;
      top: 0.2em;
      box-shadow: 0 0 0 0.05em black;
  }
  

  
  .key--letter {
      line-height: 7.5vh; 
  }
  
  .key--delete {
      width: 1.7em;
      text-indent: -5%;
  }
  
    .key--enter {
        width: 1.7em;
    }
    
      .key--letter--wrong {
          color:#333; 
          background:#111; 
      }
      .key--letter--wrong-place {
          text-color:#333; 
          background:yellow; 
      }
      .key--letter--correct {
          background:green; 
      }


  .keyboard > .keyboard__row {
      text-align: center;
  }
  
  .guesses{
      text-align: center;
  }
  .guess_row{
      margin-top: 0.8vh;
      margin-bottom: 0.8vh;
  }
  .guess_cell{
    width: min(15vw,9vh);
    max-width:9vh;
    height: min(15vw,9vh);
    max-height:10vh;
    font-family: 'Secular One',monospace;
      color: #eee;

      border-style: solid;
      display:inline-block;
      text-align: center;
      vertical-align: middle;
      line-height: 1.5em;
  
  }
  
  .correct_cell{
    background-color:green;
  }
  .wrong_cell{
    background-color:grey;
  }
  .wrong_place_cell{
    background-color:yellow;
  }
  
#share_to_facebook {
    background-image: url( 'facebook.png' );
    background-size: 50px;
    height: 50px;  
    width: 50px;
}
#share_to_twitter {
    background-image: url( 'twitter.png' );
    background-size: 50px;
    height: 50px;  
    width: 50px;
}
#share_to_whatsapp {
    background-image: url( 'whatsapp.png' );
    background-size: 50px;
    height: 50px;  
    width: 50px;
}

#copy_to_clipboard {
    background-image: url( 'copy.png' );
    background-size: 50px;
    height: 50px;  
    width: 50px;
}

.toast .ui-dialog-titlebar {
  display: none;
}

div[id$=dialog] { display: none; }

#help_icon{
    position: absolute;
    top: 0.4em;
    right: 0.5em;
}
i.help_icon{
    cursor: pointer;
}
i.help_icon:active{
      color: #aaa;
}