html {
	height: 100%;
}

body {
	margin: 0;
  	padding: 0;
  	height: 100%;
    background-color: #434343;
    background-image: radial-gradient(#81347D, #200320);
}

#bg-grid {
	background-color: transparent;
    background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
  	height: 100%;
  	background-size: 50px 50px;
}

.container {
	width: 815px;
	margin: 0 auto;
}

.container.mode-1p {
	width: 348px;
}

/* First player */
div.board {
	width: 348px;
	height: 580px;
	position: relative;
	float: left;
	background: rgba(226, 37, 224, 0.12);
	margin: 20px 10px 0 10px;
	/*border: 1px solid #EC55E4;
	box-shadow: 0px 0px 5px #EF93C7;*/
}

/* Second player */
div.board + div.board {
	background: rgba(97, 89, 213, 0.19);
	/*border: 1px solid rgb(0, 119, 255);
	box-shadow: 0px 0px 5px rgb(59, 81, 232), 0px 0px 10px rgb(77, 138, 207);*/
}

#game-over {
	color: rgb(48, 48, 48);
	position: relative;
	z-index: 3;
	font-size: 30px;
	font-family: Verdana;
	margin: auto auto;
	width: 183px;
	top: 127px;
	text-transform: uppercase;
}

#points {
	transform: translate(22em, 0em);
	width: 9em;
	font-size: 1.2em;
	text-align: right;
}

#points h1 {
	color: #9F9F9F;
	font-size: 1.5em;
	margin: 0;
}

#points .number {
	font-size: 2.1em;
	color: #FFF;
	background-color: rgb(173, 173, 173);
	border-radius: 9px;
	padding: 9px;
}

div.line {
	margin: 0;
}

.tile {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 3em;
	height: 3em;
	border-radius: 5px;
	/*transition: 0.1s linear;*/
}

#cursor {
	position: absolute;
	width: 6.7em;
	height: 3em;
	border: 0.35em dashed white;
	border-radius: 5px;
	z-index: 3;
	margin: 0;
	padding: 0;
	box-shadow: 0 0 1.5em white;
}

.empty {
	display: none;
	border: 0.35em solid rgb(189, 189, 189);
	background-color: #B8B8B8;
	border-radius: 10px;
	z-index: 1;
}

.block {
	border: 0.35em solid #4c4c4c;
	/*box-shadow: 2px 2px 5px #999;*/
	z-index: 2;
	transition: 0.03s ease-out;
}

/* Colours */
.block.red {
	background-color: rgb(255, 42, 42);
	border-color: rgb(191, 12, 12);
}

/* Colours */
.block.red.disabled {
	background-color: rgb(194, 34, 34);
	border-color: rgb(133, 44, 44);
}

.block.yellow {
	background-color: yellow;
	border-color: rgb(236, 175, 28);
}

.block.yellow.disabled {
	background-color: rgb(197, 197, 71);
	border-color: rgb(183, 148, 66);
}

.block.blue {
	background-color: rgb(51, 188, 241);
	border-color: rgb(8, 101, 165);
}

.block.blue.disabled {
	background-color: rgb(61, 135, 163);
	border-color: rgb(48, 102, 139);
}

.block.green {
	background-color: rgb(64, 192, 64);
	border-color: rgb(24, 131, 30);
}

.block.green.disabled {
	background-color: rgb(59, 146, 59);
	border-color: rgb(54, 105, 57);
}

.block.silver {
	background-color: #999;
	border-color: rgb(97, 97, 97);
}

.block.silver.disabled {
	background-color: #737373;
	border-color: rgb(99, 99, 99);
}

.block.purple {
	background-color: rgb(230, 70, 230);
	border-color: rgb(147, 52, 147);
}

.block.purple.disabled {
	background-color: rgb(188, 62, 188);
	border-color: rgb(141, 61, 141);
}

.right {
	/*transition: 0.15s linear;*/
}

.none {
	/*transition: 0.15s linear;*/
}

/* Combos */
.block.combo {
	background-color: white;
	border-color: white;
	animation-name: zoomOut;
	animation-duration: 1s;
}

/* Explosions */
.block.explode {
	animation-name: zoomOut;
	animation-duration: 1s;
}

.block.fall {
	
}

.block.disabled {
	border-bottom-width: 0;
	height: 0;
	position: absolute;
	box-shadow: none;
}