html,
body {
  margin: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  line-height: 1.25;
  font-size: 20px;
  position: relative;
  color: white;
  background-color: #000000;
  cursor: pointer;
}

.preloader {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ----------------------------------------------------------------------------
   GAME CONTROL BUTTONS AND MENU
---------------------------------------------------------------------------- */
.gamedialog {
  position: absolute;
  z-index: 11;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 20px;
  border: none;
  outline: none;
  color: #fff;
  background: #222;
  opacity: 0.95;
  /* transition: opacity 1s; */
  cursor: pointer;
  border-radius: 25px;
  display: none;
  -moz-transition:all 500ms ease-in;
  -webkit-transition:all 500ms ease-in;
  -o-transition:all 500ms ease-in;
  transition:all 500ms ease-in;  
}

.mainmenu {
  top: 50%;
  left: -700px;
  transform: translate(-50%, -50%);
}

@media only screen and (min-width: 576px) {
  .mainmenu {
    width: 600px;
  }
}

#listpreview-div {
  /* We might not want to set this here... */
  height: 80vh;
}

.centereddialog {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dropdowninline {
  display: inline;
}

.mainmenucontrols button {
  opacity: 0.95;
}

.gamebtn {
  position: absolute;
  width: 110px;
  height: 110px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
  background: #111;
  cursor: pointer;
  border: none;
  outline: none;
  border-radius: 10px;
  border: 2px solid transparent;
  display: none;
  z-index: 98;
}

.gamebtn:focus { 
  outline: none; 
}

.gamegood {
  background: #17b967;
}

.gameskip {
  background: #F13D49;
}

.gamegood:hover {
  background: #26e482;
}

.gameskip:hover {
  background: #f46872;
}

.controlbtn {
  position: absolute;
  /* top: 3vw; */
  padding: 0;
  margin: 0;
  /* left: calc(97vw - 50px); */
  color: #fff;
  background: #222;
  cursor: pointer;
  border-radius: 10px;
  border: 2px solid transparent;
  z-index: 99;
}

.controlbtn img {
  margin: 6px;
}

.big-green-button {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
}

#test-btn {
  bottom: 3vw;  
  top: 90%;
  left: -300px;
  transform: translate(-50%, -50%);
}

.controlbtn:hover {
  background: #393939;
}

.controlbtn:focus { 
  outline: none; 
}

.controlpause {
  /* right: 3vw; */
  display: none;
}

.controlexitapp {
  left: 3vw;
  display: block;
}

.controlmainmenu {
  /* left: 3vw; */
  display: none;
}

#exitapp-btn {
  top: 3vw;
  left: 3vw;
}

#listpreview-div {
  min-width: 300px;
}

#listpreview-listname {
  text-align: center;
}

#listpreview-btn {
  height: 47px;
}

.dialog-full-height-contents {
  height: 78%;
  overflow: scroll;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 20px;
  font-weight: 200;
}

.button-at-bottom {
  bottom: 0;
}

/* ----------------------------------------------------------------------------
   Book and Drop History
---------------------------------------------------------------------------- */

#current-phrase-div {
  position: absolute;
  top: 17vh;
  width: 100%;
  text-align: center;
  font-size: 36px;
  transition: transform 0.5s ease;
  color: #999;
  /* background-color: #00FF00; */
  display: none;
}

#successful-drop-div {
  position: absolute;
  top: 27vh;
  height: 50vh;
  width: 300px;
  opacity: 0.75;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  color: #ddd;
  font-family: Arial, sans-serif;
  /* background-color: #0000AA; */
  display: none;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

/* ----------------------------------------------------------------------------
   Progress and Score Display
---------------------------------------------------------------------------- */

#gamescore {
  position: absolute;
  top: 2vh;
  left: calc(50% - 210px);
  font-size: 36px;
  transition: transform 0.5s ease;
  color: #999;
}

#gametimer {
  position: absolute;
  top: 2vh;
  left: calc(50% + 140px);
  font-size: 36px;
  transition: transform 0.5s ease;
  color: #999;
}

.dropaccuracycontainer {
  top: 3vh;
  left: calc(50% - 100px);
  width: 60px;
  text-align: center;
  position: absolute;
  display: none;
}

.bonusbarcontainer {
  /* #LAYOUT-SCORE bonusbarcontainer */
  top: 3vh;
  left: calc(50% - 40px);
  width: 140px;
  text-align: center;
  position: absolute;
  display: none;
}

.progressframe {
  border-radius: 0px;
  background-color: #333344;
}

#dropaccuracyscore {
  height: 28px;
  border-radius: 0px;
  transition: 0.25s linear;
  transition-property: width, background-color;
  background-color: #17b967;
  /* margin-left: auto; */
  /* margin-right: 0; */
  width: 0%;
  box-shadow: 0 0 40px #0c5530;
  /* transform: rotate(180deg); */
}

#bonusbarscore {
  height: 28px;
  border-radius: 0px;
  transition: 0.5s linear;
  transition-property: width, background-color;
  background-color: #4099ff;
  /* background-color: linear-gradient(.25turn, #4099ff, #0e509c); */
  width: 0%;
  box-shadow: 0 0 40px #0547c2;
}

.mainmenustatus {
  font-size: 16px;
  display: none;
}

/* ----------------------------------------------------------------------------
   Explosion Stuff
---------------------------------------------------------------------------- */

.exploding, .exploding1, .exploding2, .exploding3, .exploding4, .exploding5 {
  pointer-events: none;
  position: relative;
  will-change: transform;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.particle {
  position: absolute;
  top: 50vh;
  left: 50vw;
}

.particle--debris {
  background: #255ff4;
}

.particle--fire {
  border-radius: 50%;
}

/* ----------------------------------------------------------------------------
   Media/Mobile Styling Adjustments
---------------------------------------------------------------------------- */

@media (orientation:portrait) {

  #gamescore {
    top: 2vh;
    left: calc(50% - 90px);
    font-size: 30px;
  }

  #gametimer {
    top: 2vh;
    left: calc(50% + 25px);
    font-size: 30px;
  }
  
  .dropaccuracycontainer {
    top: 10vh;
    left: calc(50% - 90px);
    width: 50px;
  }

  .bonusbarcontainer {
    /* The Bonus Bar */
    top: 10vh;
    left: calc(50% - 40px);
    width: 130px;
  }

  #current-phrase-div {
    top: 18vh;
  }
  
  #successful-drop-div {
    top: 26vh;
  }

}

@media (max-height: 600px) and (orientation: landscape) {

  body {
    line-height: 1.1;
    font-size: 16px;
  }    
 
  .mainmenu {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 10px;
  }

  .gamebtn {
    /* width: 100px; */
    /* height: 100px; */
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
  }

  .big-green-button {
    padding: 0.25rem 1rem;
    font-size: 16px;
    /* font-size: 1.00rem; */
  }   

  .btn-responsive {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 16px;
    line-height: 1.1;
  }  

  .mainmenustatus {
    padding-bottom: 8px;
  }

  #successful-drop-div {
    top: 30vh;
  }
}

@media (max-height: 600px) and (orientation: portrait) {
 
  body {
    line-height: 1.1;
    font-size: 16px;
  }    

  .mainmenu {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 10px;
  }

  .gamebtn {
    /* width: 100px; */
    /* height: 100px; */
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
  }

  .big-green-button {
    padding: 0.25rem 1rem;
    font-size: 16px;
    /* font-size: 1.00rem; */
  }   

  .btn-responsive {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 16px;
    line-height: 1.1;
  }  

  .mainmenustatus {
    padding-bottom: 8px;
  }
}