/*

Pallet (dark to light)
#00040f
#030b21
#081230
#0b193f
#142451
#1f3160
#2b3e70
#3b4e82
#4d5f91
#5d6fa3
#7082b2
#8998c1
#a1adce
#b8c2dd
#d7deef
*/

@font-face {
  font-family: 'visitor_tt1_brkregular';
  src: url('../font/visitor1-webfont.eot');
  src: url('../font/visitor1-webfont.eot?#iefix') format('embedded-opentype'),
       url('../font/visitor1-webfont.woff2') format('woff2'),
       url('../font/visitor1-webfont.woff') format('woff'),
       url('../font/visitor1-webfont.ttf') format('truetype'),
       url('../font/visitor1-webfont.svg#visitor_tt1_brkregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

html {
  font-family: 'visitor_tt1_brkregular';
  font-size: 16px;
  letter-spacing: 0.1em;
}

body {
}

.the_screen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #00040f;
  -webkit-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
}

.show-menu .the_screen {
  -webkit-transform: translate3d(-80%, 0, 0);
  transform: translate3d(-80%, 0, 0);
}

.the_bg {
  width: 5121px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  background: #d7deef url('../assets/bg_scroll.jpg');
  -webkit-transition: transform 1s ease;
  transition: transform 1s ease;
}

.the_grid {
  font-size: 0;
  text-align: center;
  width: 100%;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.the_grid_item {
  vertical-align: top;
  display: inline-block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 33%;
  height: 33%;
  margin: 1px;
  position: relative;
  background-color: rgba(0, 0, 0, 0.2);
}

.the_grid_item.is-selected {
}

.the_grid_item.is-selected-computer {
  background-color: rgba(242, 55, 33, 0.6);
}

.the_grid_item.is-selected.is-selected-computer {
  background-color: rgba(242, 55, 33, 1);
}

.the_grid_item.is-flashing {
  background-color: rgba(242, 55, 33, 0.6);
}

.grid-six .the_grid_item {
  height: 50%;
}

.grid-four .the_grid_item {
  width: 49.7%;
  height: 50%;
}

.grid-two .the_grid_item {
  width: 49.7%;
  height: 100%;
}

.the_player,
.the_player_death {
  display: block;
  width: 30%;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.dialog {
  display: table;
  opacity: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  -webkit-transition: opacity 0.2s ease, visibility 0.2s ease;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.turn-end .dialog {
  opacity: 1;
  visibility: visible;
}

.dialog-inner {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  width: 100%;
  height: 100%;
  padding: 5%;
}

.dialog-message {
  font-size: 280%;
  color: #d7deef;
  padding: 4% 3% 6%;
  border: 5px solid #d7deef;
  background-color: #142451;
  -webkit-box-shadow: inset 0 0 20px 0 #00040f;
  box-shadow: inset 0 0 20px 0 #00040f;
}

.dialog-message p {
  padding: 0 0 5%;
  margin: 0;
}

.btn-reset {
  font-family: 'visitor_tt1_brkregular';
  font-size: 100%;
  color: #d7deef;
  text-align: center;
  display: inline-block;
  padding: 2% 5% 2.5%;
  border: 2px solid #d7deef;
  background-color: #2B3E70;
}

.scores {
  font-size: 200%;
  white-space: nowrap;
  padding: 2% 2% 0;
  position: absolute;
  bottom: 2.5%;
  right: 2.5%;
}

.scores-current,
.scores-high {
  padding: 0 1%;
}

.credits {
  display: none;
}

.btn-show-menu {
  width: 45px;
  height: 45px;
  margin-top: -22px;
  position: absolute;
  bottom: 2.5%;
  right: 2%;
  border: 2px solid #d7deef;
  border-radius: 3px;
  background-color: #d7deef;
  z-index: 300;
  -webkit-transition: border 0.2s ease, background-color 0.2s ease;
  transition: border 0.2s ease, background-color 0.2s ease;
}

.btn-show-menu span,
.btn-show-menu span::before,
.btn-show-menu span::after {
  content: '';
  display: block;
  width: 26px;
  height: 4px;
  margin-left: -13px;
  position: absolute;
  left: 50%;
  background: #333;
  -webkit-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
}

span {
  margin-top: -1px;
  top: 50%;
}

.btn-show-menu span::before {
  top: -10px;
}

.btn-show-menu span::after {
  bottom: -10px;
}

.show-menu .btn-show-menu {
  /*background-color: transparent;*/
}

.show-menu .btn-show-menu span {
  background-color: transparent;
}

.show-menu .btn-show-menu span::before,
.show-menu .btn-show-menu span::after {
  top: 0;
}

.show-menu .btn-show-menu span::before {
  transform: rotate(45deg);
}

.show-menu .btn-show-menu span::after {
  transform: rotate(-45deg);
}

.app-nav {
  width: 80%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  background-color: #333;
}

.app-nav ul {
  padding: 2% 0;
  margin: 0;
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
}

.app-nav li {
  font-size: 200%;
  text-align: center;
  list-style: none;
}

.app-nav a {
  color: #d7deef;
  text-decoration: none;
  display: block;
  padding: 2% 0;
}