@import url('https://fonts.googleapis.com/css?family=Audiowide');

html, body, ul, li {
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	height: 100%;
	background-color: #222;
	position: relative;
}

body {
	/*background: repeating-linear-gradient(45deg, #2b2b2b 0%, #2b2b2b 10%, #222222 0%, #222222 50%) 0 / 15px 15px; */
	overflow: hidden;
}

.no-transitions * {
	transition: none !important;
}

#grid {
	list-style: none;
	font-family: AudioWide;
	color: #444;
	height: 100%;
}

	li {
		float: left;
		text-align: center;
		font-size: 7vh;
		transition: all 1s ease-in-out;
		transition-property: color, text-shadow;
		pointer-events: none;
	}

	@media screen and (orientation:portrait) {
		li {
			font-size: 7vw;
		}
	}

	li.dot {
		margin-top: -3vh;
		font-size: 10vh;
	}

	li.break {
		clear: left;
	}

	.on {
		color:#FFF;
		text-shadow: 0 0 5px #AAA, 0 0 10px #AAA, 0 0 15px #AAA, 0 0 20px #AAA, 0 0 25px #AAA, 0 0 30px #AAA;
		/*text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #AAA, 0 0 35px #AAA, 0 0 40px #AAA, 0 0 50px #AAA, 0 0 75px #AAA;*/
	}

#overlay {
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0.50;
	mix-blend-mode: overlay;
	transition: background-color 1s ease-in-out;
	display: none;
}