@font-face {
    font-family:'BebasNeue Regular';
    src: url('/fonts/BebasNeue Regular.otf') format('opentype');i
}

html {
    min-height: 100%;
    background-image: url("/img/yqjZ1b3.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

body {
	color:#FFF;
	margin-bottom:128px;
    touch-action:none;
    font-family:"BebasNeue Regular";
}

#grid {
	width:256px;
	height:256px;
	background:#333;
	margin:0px;
	-webkit-transform-origin:left top;
	-moz-transform-origin:left top;
	-o-transform-origin:left top;
	transform-origin:left top;
}

#overlay {
	width: 257px;
	height: 262px;
	position: absolute;
	top: 54px;
	left: 8px;
	background: rgba(34, 34, 34, 0.9);
	display: block;
	
	-webkit-transform-origin:left top;
	-moz-transform-origin:left top;
	-o-transform-origin:left top;
	transform-origin:left top;
}

#counter {
	font-size:18px;
	text-align:center;
}

.b2 {
	background: #777
}
.b4 {
	background: #666
}
.b8 {
	background:#766
}
.b16 {
	background:#866
}
.b32 {
	background:#a66
}
.b64 {
	background:#a76
}
.b128 {
	background:#a86
}
.b256 {
	background:#aa6
}
.b512 {
	background:#aa7
}
.b1024 {
	background:#aa8
}
.b2048 {
	background:#aaa
}
.b4096 {
	background:#000
}
.b8192 {
	background:#00F
}

.blk {
	width:64px;
	height:46px;
	position:absolute;
	display:inline-block;
	margin:0px;
	
	padding-top:18px;
	text-align:center;
	font-size:24px;
	
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;

	transition:left .15s, top .2s;
	
	animation: blkIntro .2s;
	-webkit-animation: blkIntro .2s;
	
	/*-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);*/
}

.btn {
	font-size:18px;
	background:#777;
	padding:5px 7px 7px 7px;
	display:inline;
	cursor:pointer;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
		
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	
	-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5), inset 0px -2px 0px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5), inset 0px -2px 0px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5), inset 0px -2px 0px 0px rgba(0,0,0,0.2);
}
.btn:hover {
	background:#888;
}
.btn:active {
	padding:7px 7px 5px 7px;
	margin-top:2px;
	-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
}

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

@keyframes blkIntro {
    from {opacity:0}
    to {opacity:1}
}

.f2 {
background:#CCC;
}