@font-face {
    font-family: Roboto;
    src: url('../assets/fonts/Roboto-Condensed.ttf');
}

@font-face {
    font-family: RobotoBold;
    src: url('../assets/fonts/Roboto-BoldCondensed.ttf');
}

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
    margin:0;
    background-color:#000000;
    background-position:center;
    background-size:cover;
    font-family:Arial,Verdana,sans;
}

a {
  color:#000000;
}

.text_button {
   font-weight:bold;
   text-decoration:underline;
   cursor:pointer;
}

.editor_level_title {
  display:none;
  position:absolute;
  z-index:3;
  width:280px;
  font-size:32px;
  transform-origin:top left;
}

.foot_left {
  z-index:2;
  display:none;
  position:absolute;
  bottom:12px;
  left:12px;
  font-size:20px;
}

.foot_right {
  z-index:2;
  position:absolute;
  bottom:12px;
  right:12px;
  font-size:20px;
}

.ui {
  display:none;
  z-index:1;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-position:center;
  background-size:cover;
}

.ui canvas {
  -webkit-touch-callout:none;
  -webkit-text-size-adjust:none;
  -webkit-user-select:none;
  z-index:0;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
}

.ui .button {
  display:none;
  z-index:2;
  position:absolute;
  width:76px;
  height:76px;
  background-size:76px 76px;
  pointer-events:auto;
  cursor:pointer;
}

.ui .button_open {
  display:none;
  z-index:2;
  position:absolute;
  width:204px;
  height:268px;
  background-size:204px 268px;
  pointer-events:auto;
  cursor:pointer;
}

.ui .button_open .user_panel {
  display:inline-block;
  width:184px;
  height:184px;
  margin:74px 10px 10px 10px;
  text-align:center;
  font-size:24px;
}

.ui .button_fullscreen {
  background-image:url('../assets/images/button_fullscreen.svg');
}

.ui .button_hint {
  background-image:url('../assets/images/button_hint.svg');
}

.ui .button_prev {
  background-image:url('../assets/images/button_prev.svg');
}

.ui .button_settings {
  background-image:url('../assets/images/button_settings.svg');
}

.ui .button_shuffle {
  background-image:url('../assets/images/button_shuffle.svg');
}

.ui .button_user {
  background-image:url('../assets/images/button_user_small.svg');
}

.ui .button_user_open {
  background-image:url('../assets/images/button_user_large.svg');
}

.ui .text {
  display:none;
  position:absolute;
  top:-64px;
  width:204px;
  height:64px;
  color:#888888;
  font-size:48px;
  font-weight:bold;
  align-items:center;
  justify-content:center;
  user-select:none;
  background-image:url('../assets/images/button_wide.svg');
}

.ui .debugger {
  display:none;
  position:absolute;
  bottom:12px;
  left:12px;
  height:50%;
  font-size:16px;
  vertical-align:bottom;
}

.settings {
  display:none;
  overflow:hidden;
  z-index:10;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:rgba(255, 255, 255, 0.75);
  pointer-events:auto;
}

.settings .block {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
}

.settings .block .content {
  width:1920px;
  height:1080px;
  transform-origin:top left;
  color:#888888;
}

.settings .block .content h1 {
  margin:0;
  padding:48px 0 96px 0;
  text-align:center;
  font-size:64px;
}

.settings .block .content .option {
  width:calc(50% + 96px);
  height:96px;
  font-size:48px;
  text-align:right;
}

.settings .block .content .option .icon {
  float:right;
  width:48px;
  height:48px;
  margin:0 8px 0 40px;
  padding-top:4px;
  background-repeat:no-repeat;
  background-size:48px 48px;
  text-align:center;
  cursor:pointer;
}

.settings .block .content .option .icon_button {
  float:right;
  width:64px;
  height:70px;
  margin:-4px 0 0 32px;
  padding-top:4px;
  background-repeat:no-repeat;
  background-size:64px 70px;
  text-align:center;
  cursor:pointer;
}

.settings .block .content .option .loading {
  display:none;
  float:right;
  width:64px;
  height:64px;
  margin:-2px -84px 0 0;
  background-image:url('../assets/images/loading.svg');
  background-size:64px 64px;
}

.settings .block .content .close {
  position:absolute;
  left:858px;
  bottom:32px;
  width:204px;
  height:64px;
  color:#888888;
  font-size:48px;
  line-height:64px;
  font-weight:bold;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:pointer;
  background-image:url('../assets/images/button_wide.svg');
}

.interstitial {
  display: none;
  z-index: 11;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}