/* mobile landscape */
@media only screen and (max-width:813px) and (orientation:landscape){
    .game_name {
        max-width: 360px;
    }
}


/*rotateMessage*/
.rotateMessage{
    text-align: center;
    display: none;
    position: absolute;
    top: 0;
    background-color: #000000e3;
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    z-index: 11;
    
}
.rotateMessage-container{
  width: 100%;
  height: 100%;
  position: relative;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;

}
.rotateMessage-content{
  position: relative;
  background-color: #FFF;
  width: 100%;
  max-width: 80%;
  height: 100%;
  max-height: 32%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
}
.rotateMessage-text{
  text-align: center;
  color: #01303f;
  font-family: 'Nexa Bold';
  font-size: 27px;
  line-height: 29px;
}
@media only screen and (max-width:860px) and (orientation:portrait){ 
  .rotateMessage-text{
    text-align: center;
    color: #01303f;
    font-family: 'Nexa Bold';
    font-size: 20px;
    line-height: 22px;
  }
}

@media only screen and (min-device-height: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  .game-over , .time-up{
    height: auto;
  }
}


@media only screen and (min-device-height: 820px) and (max-device-width: 1180px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  .game-over , .time-up{
    height: auto;
  }
}

@media only screen and (max-device-width: 1180px) and (orientation: landscape) {
  .page_container{
  width: 50%;
  }
}
@media only screen and (min-device-width: 1024px) and (orientation: landscape) {
  .login .login_container{
 top: -9%;
  }
}