/********************/
/* EVENTS-INDEX.CSS */
/********************/

/* CSS for the BODY and HTML. */
body, html {
	margin: 0;
	padding: 0;
}

@font-face {
	font-family: "Barcade Brawl";
	src: url('../fonts/barcade.ttf');
}

@font-face {
	font-family: "Pixellari";
	src: url('../../../home/static/fonts/pixellari.ttf');
}

/* CSS for the SNAKE-HEADERS. */
.snake-headers {
	display: block;
	position: fixed;
	width: 100%;

	top: 0;
	left: 0;

	text-align: center;
	font-family: "Barcade Brawl";
	font-size: 165%;
	color: white;

	z-index: 11;
}

#snake-header {
	animation-name: flicker;
	animation-duration: 6s;
	animation-iteration-count: infinite;
}

#snake-score {
	display: none;
	top: 6%;

	font-size: 135%;
	color: yellow;
}

/* CSS for the SNAKE-POPUP BOX. */
#snake-popup {
	display: block;
	position: fixed;
	width: 100%;
	height: 100%;

	top: 0%;
	left: 0%;

	z-index: 12;
	overflow-y: scroll;

	background-image: url('../img/popupbackground.png');
	background-size: cover;
	background-repeat: no-repeat;

	visibility: hidden;
}

#snake-popup header {
	display: block;
	width: 100%;

	margin: 3% 0% 5% 0%;

	text-align: center;
	font-family: "Barcade Brawl";
	color: yellow;
	font-size: 160%;
}

#snake-popup button {
	display: block;
	width: 20%;

	margin: 1% auto;
	padding: 1%;

	border: none;
	border: 2px solid yellow;
	font-family: "Barcade Brawl";
	font-size: 120%;

	background-color: yellow;
	color: purple;
	cursor: pointer;
}

#snake-popup .event {
	display: block;
	width: 95%;

	margin: 5% auto;
}

#snake-popup .event header {
	width: 95%;

	margin: 2% auto;

	font-size: 140%;
	color: yellow;
	text-align: left;
}

#snake-popup .event p {
	width: 95%;

	margin: 1% auto;

	font-family: "Pixellari";
	font-size: 140%;
	text-align: left;
	color: white;
}

#snake-popup .event span {
	color: orange;
}

/* CSS for the RULES-POPUP. */

#rules-popup {
	display: none;
	position: fixed;
	width: 60%;
	height: 60%;

	top: 20%;
	left: 20%;

	background-image: url('../img/rulespopupbackground.png');
	background-size: cover;
	color: white;

	z-index: 13;
}

#rules-popup header {
	margin: 3% 0% 3% 0%;

	text-align: center;

	font-family: "Barcade Brawl";
	font-size: 140%;
}

#rules-popup button {
	display: block;
	width: 50%;

	margin: 0 auto 4% auto;
	padding: 1.5% 0.5%;

	border: none;
	border: 2px solid white;

	font-family: "Barcade Brawl";
	font-size: 100%;

	background-color: transparent;
	color: white;

	cursor: pointer;
}

#rules-popup button:hover {
	background-color: white;
	color: purple;
}

#rules-popup p {
	width: 95%;
	margin: 2% 2.5%;

	font-family: "Pixellari";
	font-size: 145%;
}

#rules-popup span {
	color: yellow;
}

/* CSS for the SNAKE-XENZIA PIXELS. */
.snake-xenzia {
	display: block;
	position: fixed;
	height: 100%;
	width: 100%;

	/* The following 2 props disenable spaces between pixels rows. */
	font-size: 0%; 
	line-height: 0;
	z-index: 10;

	background-color: black;
}

.snake-xenzia .pixels {
	display: inline-block;
	width: 2.5%; /* The original solution was to have height: 2.5em, width: 2.5em and padding-btm: 0.*/
	height: 0;

	margin: 0;
	padding: 0;
	padding-bottom: 2.5%;

	vertical-align: top;
	background-color: black;
}

.snake-xenzia img {
	width: 100%;
}

.snake-xenzia .material-icons {
	color: white;
	font-size: 35px;

	cursor: pointer;
}

.snake-xenzia .event-one {
	color: red;
}

.snake-xenzia .event-two {
	color: #2196f3;
}

.snake-xenzia .event-three {
	color: yellow;
}

.snake-xenzia .event-four {
	color: #E1BEE7;
}

/****************************/
/* CSS for the TILT SCREEN. */
/****************************/

.tilt-screen {
	display: none;
}

/***********************/
/* CSS for ANIMATIONS. */
/***********************/

@keyframes flicker {

	0% { color: white; }
	15% { color: white; }
	16% { color: red; }
	31% { color: red; }
	32% { color: yellow; }
	47% { color: yellow; }
	48% { color: blue; }
	63% { color: blue; }
	64% { color: orange; }
	81% { color: orange; }
	82% { color: purple; }
	100% { color: purple; }

}