html, body {
  height     : 100%;
  margin     : 0;
  padding    : 0;

  background : #e1f3d7;
}

body {
  margin-top : 40px;
  /*margin-bottom : 71px;*/
}

.container {
  position : relative;

  width    : 530px;
  margin   : 0 auto;
}

.heading:after {
  content : "";

  display : block;
  clear   : both;
}

h1.title {
  position    : relative;
  display     : block;
  float       : left;

  width       : 100%;
  margin      : auto;

  font-size   : 60px;
  font-weight : bold;
  text-align  : center;
}

.game-container {
  position      : relative;
  box-sizing    : border-box;

  height        : 500px;
  width         : 500px;
  margin-top    : 40px;
  padding       : 15px;

  cursor        : default;
  background    : #bbada0;
  border-radius : 6px;
}

.fadein-container {
  animation : fadein 1s;
  -moz-animation : fadein 1s;
  -webkit-animation : fadein 1s;
  -o-animation : fadein 1s;
}

.grid-container {
  position : absolute;
  z-index  : 1;
}

.grid-row {
  margin-bottom : 4px;
}

.grid-row:nth-child(3n+3) {
  margin-bottom : 7px;
}

.grid-row:last-child {
  margin-bottom : 0;
}

.grid-row:after {
  content : "";

  display : block;
  clear   : both;
}

.grid-cell {
  float         : left;

  height        : 48px;
  width         : 48px;
  margin-right  : 4px;
  padding       : 0;

  background    : rgba(238, 228, 218, 0.35);
  border-radius : 3px;
}

.grid-cell:nth-child(3n+3) {
  margin-right : 7px;
}

.grid-cell:last-child {
  margin-right : 0;
}

input[type=text], input[type=number] {
  height           : 48px;
  width            : 48px;
  padding          : 0;

  background-color : transparent;
  font-size        : 30px;
  color            : white;
  text-align       : center;
  border           : 0;
  outline          : none;
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  margin             : 0;
  -webkit-appearance : none;
}

.button-container {
  position      : relative;

  margin-top    : 40px;
  margin-bottom : 100px;
}

.button-container > * {
  margin-bottom : 20px;
}

.footer {
  position   : fixed;
  display    : block;
  bottom     : 0;
  z-index    : 3;

  width      : 100%;
  margin-top : 150px;
  padding    : 15px;

  background : #f56868;
  text-align : center;
  border-top : 3px solid grey;
}

.btn-social {
  color : white;
}

.btn-social:hover {
  color : grey;
}

/* Keyframes for fadein/out animations?*/

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}