body {
}

.above-board {
  text-align: center;
  width: 320px;
  margin: auto;
  color: rgb(119, 110, 101);
  display: block;
  font-size: 18px;
  padding-bottom: 0px;
  padding-top: 0px;

}

.below-board {
  text-align: center;
  width: 320px;
  margin: auto;
  color: rgb(119, 110, 101);
  display: block;
  font-size: 22px;
  padding-bottom: 0px;
  padding-top: 0px;
}

h1 {
  color: #776e65;
  font-family: 'geometos', 'Helvetica Neue', Arial, sans-serif;
  font-size: 40px;
  font-weight: bold;
  float: left;
  margin: 0;
}

.score {
  color: white;
  font-family: 'geometos', 'Helvetica Neue', Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  margin-top: 0px;
  margin: 0 auto;
}

button {


}

.modal-text {
  text-align: center;
  font-size: 30px;
  font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
  color: #f9f6f2;
  top: 250px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  z-index: 1000;
  width: 500px;
  height: 200px;
  opacity: 0.9;
  background-color: #776e65;
  border-radius: 10%;
}

.modal-button button{
  float: none;
}


figure {
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  display: inline-block;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;

}


.board {
  width: 288px;
  height: 288px;
  background-color: #1E0837;
  border-radius: 10%;
}

.grid-square {
  height: 72px;
  width: 72px;
  float: left;
  border: 8px solid #1E0837;
  background-color: #c2c8d2;
  box-sizing: border-box;
  border-radius: 0;
}

.tile {
  height: 54px;
  width: 54px;
  margin: 8px;
  color: red;
  float: left;
  position: absolute;
  line-height: 49px;
  font-weight: bold;
  font-size: 32px;
  text-align: center;
  border: 1px solid black;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  transition: all 0.1s linear;
}

.foot-text {
  font-size: 14px;
  line-height: 14px;
  font-family: sans-serif;
}



.value_1, .value_1:after {
  color: #776e65;
  background-color: red;
  content: "1"
}

.value_2, .value_2:after  {
  color: #776e65;
  background-color: #eee4da;
  content: "2";
}


.value_4, .value_4:after {
  color: #776e65;
  background-color: #ede0c8;
  content: "4";
}

.value_8, .value_8:after {
  color: #f9f6f2;
  background-color: #f2b179;
  content: "8";
}

.value_16, .value_16:after {
  color: #f9f6f2;
  background-color: #f59563;
  content: "16";
}

.value_32, .value_32:after {
  color: #f9f6f2;
  background-color: #f67c5f;
  content: "32";
}

.value_64, .value_64:after {
  color: #f9f6f2;
  background-color: #f65e3b;
  content: "64";
}

.value_128, .value_128:after {
  color: #f9f6f2;
  background-color: #edcf72;
  content: "128";

}

.value_256, .value_256:after {
  color: #f9f6f2;
  background-color: #edcc61;
  content: "256";
}

.value_512, .value_512:after {
  color: #f9f6f2;
  background-color: #edc850;
  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
  content: "512";
}

.value_1024, .value_1024:after {
  color: #f9f6f2;
  background-color: #edc53f;
  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
  content: "1024";
}

.value_2048, .value_2048:after {
  color: #f9f6f2;
  background-color: #edc22e;
  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
  content: "2048";
}

.tile_00{
  left: 0px;
  top: 0px;
}

.tile_01{
  left: 72px;
  top: 0px;
}

.tile_02{
  left: 144px;
  top: 0px;
}

.tile_03{
  left: 216px;
  top: 0px;
}

 .tile_10{
  left: 0px;
  top: 72px;
}

.tile_11{
  left: 72px;
  top: 72px;
}

.tile_12{
  left: 144px;
  top: 72px;
}

.tile_13{
  left: 216px;
  top: 72px;
}

.tile_20{
 left: 0px;
 top: 144px;
}

.tile_21{
 left: 72px;
 top: 144px;
}

.tile_22{
 left: 144px;
 top: 144px;
}

.tile_23{
 left: 216px;
 top: 144px;
}

.tile_30{
 left: 0px;
 top: 216px;
}

.tile_31{
 left: 72px;
 top: 216px;
}

.tile_32{
 left: 144px;
 top: 216px;
}

.tile_33{
 left: 216px;
 top: 216px;
}

.merged, .merged:before, .new, .new:after{
  -webkit-animation: fadein 0.4s;
     -moz-animation: fadein 0.4s;
      -ms-animation: fadein 0.4s;
       -o-animation: fadein 0.4s;
          animation: fadein 0.4s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}