Project.css

html, body {
	 margin: 0;
	 padding: 0;
	 background: #faf8ef;
	 color: #776e65;
	 font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
	 font-size: 18px;
}
 body {
	 margin: 80px 0;
}
 .heading:after {
	 content: "";
	 display: block;
	 clear: both;
}
 h1.title {
	 font-size: 80px;
	 font-weight: bold;
	 margin: 0;
	 display: block;
	 float: left;
}
 @-webkit-keyframes move-up {
	 0% {
		 top: 25px;
		 opacity: 1;
	}
	 100% {
		 top: -50px;
		 opacity: 0;
	}
}
 @-moz-keyframes move-up {
	 0% {
		 top: 25px;
		 opacity: 1;
	}
	 100% {
		 top: -50px;
		 opacity: 0;
	}
}
 @keyframes move-up {
	 0% {
		 top: 25px;
		 opacity: 1;
	}
	 100% {
		 top: -50px;
		 opacity: 0;
	}
}
 .score-container {
	 position: relative;
	 float: right;
	 background: #bbada0;
	 padding: 15px 25px;
	 font-size: 25px;
	 height: 25px;
	 line-height: 47px;
	 font-weight: bold;
	 border-radius: 3px;
	 color: white;
	 margin-top: 8px;
}
 .score-container:after {
	 position: absolute;
	 width: 100%;
	 top: 10px;
	 left: 0;
	 content: "Score";
	 text-transform: uppercase;
	 font-size: 13px;
	 line-height: 13px;
	 text-align: center;
	 color: #eee4da;
}
 .score-container .score-addition {
	 position: absolute;
	 right: 30px;
	 color: red;
	 font-size: 25px;
	 line-height: 25px;
	 font-weight: bold;
	 color: rgba(119, 110, 101, .9);
	 z-index: 100;
	 -webkit-animation: move-up 600ms ease-in;
	 -moz-animation: move-up 600ms ease-in;
	 -webkit-animation-fill-mode: both;
	 -moz-animation-fill-mode: both;
}
 p {
	 margin-top: 0;
	 margin-bottom: 10px;
	 line-height: 1.65;
}
 a {
	 color: #776e65;
	 font-weight: bold;
	 text-decoration: underline;
	 cursor: pointer;
}
 strong.important {
	 text-transform: uppercase;
}
 hr {
	 border: none;
	 border-bottom: 1px solid #d8d4d0;
	 margin-top: 20px;
	 margin-bottom: 30px;
}
 .container {
	 width: 500px;
	 margin: 0 auto;
}
 @-webkit-keyframes fade-in {
	 0% {
		 opacity: 0;
	}
	 100% {
		 opacity: 1;
	}
}
 @-moz-keyframes fade-in {
	 0% {
		 opacity: 0;
	}
	 100% {
		 opacity: 1;
	}
}
 @keyframes fade-in {
	 0% {
		 opacity: 0;
	}
	 100% {
		 opacity: 1;
	}
}
 .game-container {
	 margin-top: 40px;
	 position: relative;
	 padding: 15px;
	 cursor: default;
	 -webkit-touch-callout: none;
	 -webkit-user-select: none;
	 -moz-user-select: none;
	 background: #bbada0;
	 border-radius: 6px;
	 width: 500px;
	 height: 500px;
	 -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	 box-sizing: border-box;
}
 .game-container .game-message {
	 display: none;
	 position: absolute;
	 top: 0;
	 right: 0;
	 bottom: 0;
	 left: 0;
	 background: rgba(238, 228, 218, .5);
	 z-index: 100;
	 text-align: center;
	 -webkit-animation: fade-in 800ms ease 1200ms;
	 -moz-animation: fade-in 800ms ease 1200ms;
	 -webkit-animation-fill-mode: both;
	 -moz-animation-fill-mode: both;
}
 .game-container .game-message p {
	 font-size: 60px;
	 font-weight: bold;
	 height: 60px;
	 line-height: 60px;
	 margin-top: 222px;
}
 .game-container .game-message .lower {
	 display: block;
	 margin-top: 59px;
}
 .game-container .game-message a {
	 display: inline-block;
	 background: #8f7a66;
	 border-radius: 3px;
	 padding: 0 20px;
	 text-decoration: none;
	 color: #f9f6f2;
	 height: 40px;
	 line-height: 42px;
	 margin-left: 9px;
}
 .game-container .game-message.game-won {
	 background: rgba(237, 194, 46, .5);
	 color: #f9f6f2;
}
 .game-container .game-message.game-won, .game-container .game-message.game-over {
	 display: block;
}
 .grid-container {
	 position: absolute;
	 z-index: 1;
}
 .grid-row {
	 margin-bottom: 15px;
}
 .grid-row:last-child {
	 margin-bottom: 0;
}
 .grid-row:after {
	 content: "";
	 display: block;
	 clear: both;
}
 .grid-cell {
	 width: 106.25px;
	 height: 106.25px;
	 margin-right: 15px;
	 float: left;
	 border-radius: 3px;
	 background: rgba(238, 228, 218, .35);
}
 .grid-cell:last-child {
	 margin-right: 0;
}
 .tile-container {
	 position: absolute;
	 z-index: 2;
}
 .tile {
	 width: 106.25px;
	 height: 106.25px;
	 line-height: 116.25px;
}
 .tile.tile-position-1-1 {
	 position: absolute;
	 left: 0px;
	 top: 0px;
}
 .tile.tile-position-1-2 {
	 position: absolute;
	 left: 0px;
	 top: 121px;
}
 .tile.tile-position-1-3 {
	 position: absolute;
	 left: 0px;
	 top: 243px;
}
 .tile.tile-position-1-4 {
	 position: absolute;
	 left: 0px;
	 top: 364px;
}
 .tile.tile-position-2-1 {
	 position: absolute;
	 left: 121px;
	 top: 0px;
}
 .tile.tile-position-2-2 {
	 position: absolute;
	 left: 121px;
	 top: 121px;
}
 .tile.tile-position-2-3 {
	 position: absolute;
	 left: 121px;
	 top: 243px;
}
 .tile.tile-position-2-4 {
	 position: absolute;
	 left: 121px;
	 top: 364px;
}
 .tile.tile-position-3-1 {
	 position: absolute;
	 left: 243px;
	 top: 0px;
}
 .tile.tile-position-3-2 {
	 position: absolute;
	 left: 243px;
	 top: 121px;
}
 .tile.tile-position-3-3 {
	 position: absolute;
	 left: 243px;
	 top: 243px;
}
 .tile.tile-position-3-4 {
	 position: absolute;
	 left: 243px;
	 top: 364px;
}
 .tile.tile-position-4-1 {
	 position: absolute;
	 left: 364px;
	 top: 0px;
}
 .tile.tile-position-4-2 {
	 position: absolute;
	 left: 364px;
	 top: 121px;
}
 .tile.tile-position-4-3 {
	 position: absolute;
	 left: 364px;
	 top: 243px;
}
 .tile.tile-position-4-4 {
	 position: absolute;
	 left: 364px;
	 top: 364px;
}
 .tile {
	 border-radius: 3px;
	 background: #eee4da;
	 text-align: center;
	 font-weight: bold;
	 z-index: 10;
	 font-size: 55px;
	 -webkit-transition: 100ms ease-in-out;
	 -moz-transition: 100ms ease-in-out;
	 -webkit-transition-property: top, left;
	 -moz-transition-property: top, left;
}
 .tile.tile-2 {
	 background: #eee4da;
	 box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0);
}
 .tile.tile-4 {
	 background: #e40000;
	 box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0);
}
 .tile.tile-8 {
	 color: #f9f6f2;
	 background: #ea4e28;
}
 .tile.tile-16 {
	 color: #f9f6f2;
	 background: #e83419;
}
 .tile.tile-32 {
	 color: #f9f6f2;
	 background: #e51c1c;
}
 .tile.tile-64 {
	 color: #f9f6f2;
	 background: #e10000;
}
 .tile.tile-128 {
	 color: #f9f6f2;
	 background: #b20000;
	 box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.23809523809524), inset 0 0 0 1px rgba(255, 255, 255, 0.14285714285714);
	 font-size: 45px;
}
 @media screen and (max-width: 480px) {
	 .tile.tile-128 {
		 font-size: 25px;
	}
}
 .tile.tile-256 {
	 color: #f9f6f2;
	 background: #a80000;
	 box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746031746032), inset 0 0 0 1px rgba(255, 255, 255, 0.19047619047619);
	 font-size: 45px;
}
 @media screen and (max-width: 480px) {
	 .tile.tile-256 {
		 font-size: 25px;
	}
}
 .tile.tile-512 {
	 color: #f9f6f2;
	 background: #9e0000;
	 box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.3968253968254), inset 0 0 0 1px rgba(255, 255, 255, 0.23809523809524);
	 font-size: 45px;
}
 @media screen and (max-width: 480px) {
	 .tile.tile-512 {
		 font-size: 25px;
	}
}
 .tile.tile-1024 {
	 color: #f9f6f2;
	 background: #940000;
	 box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619047619048), inset 0 0 0 1px rgba(255, 255, 255, 0.28571428571429);
	 font-size: 35px;
}
 @media screen and (max-width: 480px) {
	 .tile.tile-1024 {
		 font-size: 15px;
	}
}
 .tile.tile-2048 {
	 color: #f9f6f2;
	 background: #8a0000;
	 box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55555555555556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333333333333);
	 font-size: 35px;
}
 @media screen and (max-width: 480px) {
	 .tile.tile-2048 {
		 font-size: 15px;
	}
}
 @-webkit-keyframes appear {
	 0% {
		 opacity: 0;
		 -webkit-transform: scale(0);
		 -moz-transform: scale(0);
	}
	 100% {
		 opacity: 1;
		 -webkit-transform: scale(1);
		 -moz-transform: scale(1);
	}
}
 @-moz-keyframes appear {
	 0% {
		 opacity: 0;
		 -webkit-transform: scale(0);
		 -moz-transform: scale(0);
	}
	 100% {
		 opacity: 1;
		 -webkit-transform: scale(1);
		 -moz-transform: scale(1);
	}
}
 @keyframes appear {
	 0% {
		 opacity: 0;
		 -webkit-transform: scale(0);
		 -moz-transform: scale(0);
	}
	 100% {
		 opacity: 1;
		 -webkit-transform: scale(1);
		 -moz-transform: scale(1);
	}
}
 .tile-new {
	 -webkit-animation: appear 200ms ease 100ms;
	 -moz-animation: appear 200ms ease 100ms;
	 -webkit-animation-fill-mode: both;
	 -moz-animation-fill-mode: both;
}
 @-webkit-keyframes pop {
	 0% {
		 -webkit-transform: scale(0);
		 -moz-transform: scale(0);
	}
	 50% {
		 -webkit-transform: scale(1.2);
		 -moz-transform: scale(1.2);
	}
	 100% {
		 -webkit-transform: scale(1);
		 -moz-transform: scale(1);
	}
}
 @-moz-keyframes pop {
	 0% {
		 -webkit-transform: scale(0);
		 -moz-transform: scale(0);
	}
	 50% {
		 -webkit-transform: scale(1.2);
		 -moz-transform: scale(1.2);
	}
	 100% {
		 -webkit-transform: scale(1);
		 -moz-transform: scale(1);
	}
}
 @keyframes pop {
	 0% {
		 -webkit-transform: scale(0);
		 -moz-transform: scale(0);
	}
	 50% {
		 -webkit-transform: scale(1.2);
		 -moz-transform: scale(1.2);
	}
	 100% {
		 -webkit-transform: scale(1);
		 -moz-transform: scale(1);
	}
}
 .tile-merged {
	 z-index: 20;
	 -webkit-animation: pop 200ms ease 100ms;
	 -moz-animation: pop 200ms ease 100ms;
	 -webkit-animation-fill-mode: both;
	 -moz-animation-fill-mode: both;
}
 .game-intro {
	 margin-bottom: 0;
}
 .game-explanation {
	 margin-top: 50px;
}
 @media screen and (max-width: 480px) {
	 html, body {
		 font-size: 15px;
	}
	 body {
		 margin: 20px 0;
		 padding: 0 20px;
	}
	 h1.title {
		 font-size: 50px;
	}
	 .container {
		 width: 280px;
		 margin: 0 auto;
	}
	 .score-container {
		 margin-top: 0;
	}
	 .heading {
		 margin-bottom: 10px;
	}
	 .game-container {
		 margin-top: 40px;
		 position: relative;
		 padding: 10px;
		 cursor: default;
		 -webkit-touch-callout: none;
		 -webkit-user-select: none;
		 -moz-user-select: none;
		 background: #bbada0;
		 border-radius: 6px;
		 width: 280px;
		 height: 280px;
		 -webkit-box-sizing: border-box;
		 -moz-box-sizing: border-box;
		 box-sizing: border-box;
	}
	 .game-container .game-message {
		 display: none;
		 position: absolute;
		 top: 0;
		 right: 0;
		 bottom: 0;
		 left: 0;
		 background: rgba(238, 228, 218, .5);
		 z-index: 100;
		 text-align: center;
		 -webkit-animation: fade-in 800ms ease 1200ms;
		 -moz-animation: fade-in 800ms ease 1200ms;
		 -webkit-animation-fill-mode: both;
		 -moz-animation-fill-mode: both;
	}
	 .game-container .game-message p {
		 font-size: 60px;
		 font-weight: bold;
		 height: 60px;
		 line-height: 60px;
		 margin-top: 222px;
	}
	 .game-container .game-message .lower {
		 display: block;
		 margin-top: 59px;
	}
	 .game-container .game-message a {
		 display: inline-block;
		 background: #8f7a66;
		 border-radius: 3px;
		 padding: 0 20px;
		 text-decoration: none;
		 color: #f9f6f2;
		 height: 40px;
		 line-height: 42px;
		 margin-left: 9px;
	}
	 .game-container .game-message.game-won {
		 background: rgba(237, 194, 46, .5);
		 color: #f9f6f2;
	}
	 .game-container .game-message.game-won, .game-container .game-message.game-over {
		 display: block;
	}
	 .grid-container {
		 position: absolute;
		 z-index: 1;
	}
	 .grid-row {
		 margin-bottom: 10px;
	}
	 .grid-row:last-child {
		 margin-bottom: 0;
	}
	 .grid-row:after {
		 content: "";
		 display: block;
		 clear: both;
	}
	 .grid-cell {
		 width: 57.5px;
		 height: 57.5px;
		 margin-right: 10px;
		 float: left;
		 border-radius: 3px;
		 background: rgba(238, 228, 218, .35);
	}
	 .grid-cell:last-child {
		 margin-right: 0;
	}
	 .tile-container {
		 position: absolute;
		 z-index: 2;
	}
	 .tile {
		 width: 57.5px;
		 height: 57.5px;
		 line-height: 67.5px;
	}
	 .tile.tile-position-1-1 {
		 position: absolute;
		 left: 0px;
		 top: 0px;
	}
	 .tile.tile-position-1-2 {
		 position: absolute;
		 left: 0px;
		 top: 68px;
	}
	 .tile.tile-position-1-3 {
		 position: absolute;
		 left: 0px;
		 top: 135px;
	}
	 .tile.tile-position-1-4 {
		 position: absolute;
		 left: 0px;
		 top: 203px;
	}
	 .tile.tile-position-2-1 {
		 position: absolute;
		 left: 68px;
		 top: 0px;
	}
	 .tile.tile-position-2-2 {
		 position: absolute;
		 left: 68px;
		 top: 68px;
	}
	 .tile.tile-position-2-3 {
		 position: absolute;
		 left: 68px;
		 top: 135px;
	}
	 .tile.tile-position-2-4 {
		 position: absolute;
		 left: 68px;
		 top: 203px;
	}
	 .tile.tile-position-3-1 {
		 position: absolute;
		 left: 135px;
		 top: 0px;
	}
	 .tile.tile-position-3-2 {
		 position: absolute;
		 left: 135px;
		 top: 68px;
	}
	 .tile.tile-position-3-3 {
		 position: absolute;
		 left: 135px;
		 top: 135px;
	}
	 .tile.tile-position-3-4 {
		 position: absolute;
		 left: 135px;
		 top: 203px;
	}
	 .tile.tile-position-4-1 {
		 position: absolute;
		 left: 203px;
		 top: 0px;
	}
	 .tile.tile-position-4-2 {
		 position: absolute;
		 left: 203px;
		 top: 68px;
	}
	 .tile.tile-position-4-3 {
		 position: absolute;
		 left: 203px;
		 top: 135px;
	}
	 .tile.tile-position-4-4 {
		 position: absolute;
		 left: 203px;
		 top: 203px;
	}
	 .game-container {
		 margin-top: 20px;
	}
	 .tile {
		 font-size: 35px;
	}
	 .game-message p {
		 font-size: 30px !important;
		 height: 30px !important;
		 line-height: 30px !important;
		 margin-top: 90px !important;
	}
	 .game-message .lower {
		 margin-top: 30px !important;
	}
}