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

	background-color: black;
}

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


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

/************************/
/* CSS for the HEADERS. */
/************************/

h2 {
	display: block;
	width: 100%;

	padding: 5% 0% 0% 0%;

	font-family: "Barcade Brawl";
	font-size: 270%;
	color: yellow;

	text-align: center;
}

/******************************/
/* CSS for the FORM ELEMENTS. */
/******************************/

form {
	display: block;
	width: 100%;
}

form input {
	display: block;
	width: 25%;

	margin: 0.5% auto;
	padding: 1%;

	border: none;
	border: 3px solid purple;

	font-size: 140%;
	font-family: "Pixellari";
	color: yellow;
	background-color: transparent;
}

form input:focus {
	background-color: purple;
}

a, form a, form button {
	display: block;
	width: 27.3%;

	margin: 0.5% auto;
	padding: 1%;

	border: none;
	border: 3px solid purple;

	font-size: 140%;
	font-family: "Pixellari";
	color: yellow;

	background-color: purple;
	cursor: pointer;
}

a, form a {
	width: 25%;

	text-decoration: none;
	text-align: center;
}

form a:hover, form button:hover {
	background-color: yellow;
	color: purple;
}

/**********************/
/* CSS for the BREAK. */
/**********************/

span {
	display: block;
	border: none;
	margin: 6% 0%;
}

/***************************/
/* CSS for the BODY-LINKS. */
/***************************/

a {
	border: 3px solid purple;
	background-color: yellow;
	color: purple;
}

a:hover {
	background-color: purple;
	color: yellow;
}

/***************************/
/* CSS for the PACMAN DIVS. */
/***************************/

.pacman {
	position: fixed;
	width: 7%;
	
	padding-bottom: 7%;

	background-image: url('../img/pacman-open.png');
	background-size: 100% 100%;
	z-index: 1;

	margin-left: 5%;
	margin-top: 40%;

	animation: pacman-eating 0.3s infinite, pacman-moving 30s 2 steps(20,end);

}

.mrs-pacman {
	margin-left: 5%;
	margin-top: 80%;

	animation: pacman-eating 0.3s infinite, pacman-moving 30s 2 steps(20,end) 10s;
}

.pacman-jr {
	margin-left: 5%;
	margin-top: 100%;

	animation: pacman-eating 0.3s infinite, pacman-moving 30s 2 steps(20,end) 20s;
}

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

@keyframes pacman-eating {
	0% { background-image: url('../img/pacman-closed.png'); }
	49% { background-image: url('../img/pacman-closed.png'); }
	50% { background-image: url('../img/pacman-open.png'); }
	99% { background-image: url('../img/pacman-open.png'); }
}

@keyframes pacman-moving {
	0%   { margin-left: 5%; margin-top: 40%; transform: rotate(-90deg); }
	11%  { margin-left: 5%; margin-top: 10%; transform: rotate(-90deg); }
	12%  { margin-left: 5%; margin-top: 10%; transform: rotate(0deg); }
	23%  { margin-left: 25%; margin-top: 10%; transform: rotate(0deg); }
	24%  { margin-left: 25%; margin-top: 10%; transform: rotate(90deg); }
	35%  { margin-left: 25%; margin-top: 28%; transform: rotate(90deg); }
	36%  { margin-left: 25%; margin-top: 28%; transform: rotate(0deg); }
	47%  { margin-left: 70%; margin-top: 28%; transform: rotate(0deg); }
	48%  { margin-left: 70%; margin-top: 28%; transform: rotate(-90deg); }
	59%  { margin-left: 70%; margin-top: 10%; transform: rotate(-90deg); }
	60%  { margin-left: 70%; margin-top: 10%; transform: rotate(0deg); }
	71%  { margin-left: 85%; margin-top: 10%; transform: rotate(0deg); }
	72%  { margin-left: 85%; margin-top: 10%; transform: rotate(90deg); }
	83%  { margin-left: 85%; margin-top: 48%; transform: rotate(90deg); }
	84%  { margin-left: 85%; margin-top: 48%; transform: rotate(180deg); }
	95%  { margin-left: 5%; margin-top: 48%; transform: rotate(180deg); }
	100% { margin-left: 5%; margin-top: 40%; transform: rotate(270deg); }
}