/*                                                                                                               ,,
     ,.-==-.           mm                       mm                                                   mm       *MM
  ,pd'      `g.        MM                       MM                                                   MM        MM
 ,P   ,dMb.A  Y.     mmMMmm      ,pW"Wq.      mmMMmm      ,pW"Wq.       ,p6"bo      `7MMpdMAo.     mmMMmm      MM,dMMb.       .P"Ybmmm     `7MMpMMMb.
,P   dP  ,MP  j8       MM       6W'   `Wb       MM       6W'   `Wb     6M'  OO        MM   `Wb       MM        MM    `Mb     :MI  I8         MM    MM
8:  dM'  dM   d'       MM       8M     M8       MM       8M     M8     8M             MM    M8       MM        MM     M8      WmmmP"         MM    MM
Wb  YML.dML..d'        MM       YA.   ,A9       MM       YA.   ,A9     YM.    ,       MM   ,AP       MM        MM.   ,M9     8M              MM    MM
 Wb  ``""^`"'          `Mbmo     `Ybmd9'        `Mbmo     `Ybmd9'       YMbmd'        MMbmmd'        `Mbmo     P^YbmdP'       YMMMMMb      .JMML  JMML.
  `M..     .,!                                                                        MM                                     6'     dP
    `Ybmmd'                                                                         .JMML.                                   Ybmmmd'
*/


html {
  display: table;
  width: 100%;
  height: 100%;
}

body {
  display: table-row;
  background: #071115;
  font-family: 'Bree Serif', serif;
}

.wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.content {
  display: inline-block;
  width: 668px;
  margin: 0 auto;
  padding: 10px 20px;
}

.sidebar {
  float: left;
  margin-right: 20px;
  width: 220px;
  text-align: left;
  color: black;
}

h1 {
  height: 68px;
  line-height: 68px;
  font-size: 40px;
  text-align: left;
  color: white;
  margin: 0;
  font-weight: normal;
}

h2 {
  font-size: 20px;
  color: white;
  margin: 0;
  font-weight: normal;
}

div.credits {
  padding: 12px;
  margin-bottom: 20px;
  background-color: #202b30;
  border-radius: 3px;
  color: #9ca6aa;
  font-size: 70%;
}

a {
  text-decoration: none;
  color: #0ec689;
}

a.me {
  color: #ffb642;
}

button.translate {
  float: right;
  background-color: #202b30;
  font-family: inherit;
  font-size: 15px;
  border: none;
  border-radius: 4px;
  background-color: #202b30;
  color: #fff;
  cursor: pointer;
  padding: 0px 6px;
}

.flag {
  height: 18px;
  position: relative;
  top: 3px;
}

.panel {
  padding: 12px;
  margin-bottom: 20px;
  background-color: #202b30;
  border-radius: 3px;
  color: #9ca6aa;
}

.dif-options {
  clear: both;
  overflow: hidden;
  margin: 20px -7px 0;
}

.dif-options div {
  float: left;
  width: 20%;
}

.dif-options input {
  display: none;
}

.dif-options input:checked+label  {
  color: #fff;
  background: rgb(227,89,217);
  background: linear-gradient(53deg, rgba(227,89,217,1) 0%, rgba(63,16,250,1) 100%);
  border-color: #fff;
  cursor: default;
}

.dif-options label {
  display: block;
  margin: 0 auto;
  width: 24px;
  height: 24px;
  background: rgb(190,209,59);
  background: linear-gradient(53deg, rgba(190,209,59,1) 0%, rgba(252,105,0,1) 100%);
  border-radius: 2px;
  color: #fff;
  text-align: center;
  line-height: 24px;
  cursor: pointer;
}

.freeze .dif-options input:not(:checked)+label {
  font-size: 0;
  margin: 7px auto;
  width: 10px;
  height: 10px;
  border-radius: 4px;
  color: transparent;
  line-height: 10px;
  cursor: default;
  transition: .2s;
}

.start {
  margin-top: 20px;
}


.start button {
  display: block;
  width: 100%;
  padding: 2px 12px 4px;
  font-family: inherit;
  font-size: 24px;
  border: none;
  border-radius: 4px;
  background: rgb(85,209,59);
  background: linear-gradient(90deg, rgba(85,209,59,1) 0%, rgba(0,215,255,1) 89%);
  color: #fff;
  cursor: pointer;
}

.start button:hover {
  background: rgb(85,209,59);
  background: linear-gradient(90deg, rgba(0,215,255,1) 0%, rgba(85,209,59,1) 89%);
}

.start button:focus {
  outline: none;
}

.freeze .start {
  display: none;
}

.info div {
  margin-top: 10px;
}

.board {
  position: relative;
  float: left;
  width: 428px;
  height: 428px;
  margin-top: 68px;
  background-image: url('../img/board.png');
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4);
}

.lit-columns,
.lit-cells,
.chips,
.click-columns {
  position: absolute;
  width: 428px;
  height: 428px;
}

.lit-columns div {
  float: left;
  width: 60px;
  height: 426px;
  margin: 1px 0 1px 1px;
  transition: background-color 0.1s;
}

.lit-columns .lit {
  background-color: rgba(0, 0, 0, 0.6);
  transition: background-color 0.1s;
}

.lit-cells div {
  position: absolute;
  width: 60px;
  height: 60px;
  background-image: url("../img/winningToken.png");
  z-index: 1000;
}

.chips div {
  position: absolute;
  width: 60px;
  height: 60px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.chips .p1 {
  background-image: url("../img/p1Token.png");
}

.chips .p2 {
  background-image: url("../img/p2Token.png");
}

.chips .cursor {
  bottom: 428px;
  transition: left 0.1s ease-out;
}

.chips .dropped {
  transition: bottom ease-in;
  animation: bounce 0.3s;
}

.click-columns div {
  float: left;
  width: 61px;
  height: 428px;
}

.click-columns div:first-child {
  padding-left: 1px;
}

.click-columns .hover {
  cursor: pointer;
}

.blurb div{
  color: #9ca6aa;
}

@keyframes bounce {
  0% {
    animation-timing-function: ease-out;
    transform: translateY(0);
  }
  30% {
    animation-timing-function: ease-in;
    transform: translateY(-40px);
  }
  60% {
    animation-timing-function: ease-out;
    transform: translateY(0);
  }
  80% {
    animation-timing-function: ease-in;
    transform: translateY(-10px);
  }
  100% {
    animation-timing-function: ease-out;
    transform: translateY(0);
  }
}