body {
	font-family: "Open Sans", arial, helvetica, sans-serif;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body .content {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}

header {
	padding: 1em;
	background-color: #303030;
	color: white;
	border-bottom: 0.25em solid #dd5533;
}

header .content {
	display: flex;
	justify-content: space-between;
	min-height: 5em;
}

header a {
	text-decoration: none;
	color: inherit;
}

header #header_title {
	display: block;
	font-size: 2em;
	font-weight: bold;
}

header #header_subtitle {
	font-size: 1.5em;
}

header img {
	height: 5em;
}

footer {
	padding: 1em;
	background-color: #303030;
	color: white;
	text-align: center;
	border-top: 0.25em solid #dd5533;
}

footer a {
	color: #ff8866;
	text-decoration: none;
}

#content {
	flex-grow: 1;
}

#content, #page_description {
	background-color: #f3f3f3;
	text-align: center;
}

#page_description p {
	padding: 2em;
}

#page_description a {
	color: #dd5533;
	text-decoration: none;
}

#error-page {
	padding: 5em;
}

#error-page img,
#no-games img {
	width: 50%;
}

#games {
	padding: 0.5em;
}

.game {
	margin: 1em;
	background: white;
	border-radius: 0.5em;
	display: flex;
	text-align: left;
}

.game .league_img {
	width: 20%;
	margin: 0.5em;
	/* Display flex aligns the logo vertically centered */
	display: flex; 
	align-items: center;
}

.game .league_img img {
	width: 100%;
}

.game_info {
	margin: 1em;
}

.game_info .game_title {
	font-size: larger;
	font-weight: bold;
}

.game_info .game_details {
	color: #303030;
}

.game_info .referees {
	margin-top: 0.5em;
}

.game_info .referees span.ref-list {
	display: inline-block;
}

.game_info .referees  span.ref{
	color: #303030;
}

/* Loading spinner */
#loading_screen {
	text-align: center;
	font-size: x-large;
	padding: 5em 0;
}

.spinner {
    width: 512px;
	max-width: 50%;
	margin-left: auto;
	margin-right: auto;
	display: block;
	-webkit-animation: spin 2s infinite;
	animation: spin 2s infinite;
}

@-webkit-keyframes spin{
	from {
		-webkit-transform: rotateY(0deg);
	}
	to {
		-webkit-transform: rotateY(-360deg);
	}
}

@keyframes spin{
	from {
		-moz-transform: rotateY(0deg);
		-ms-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}

	to {
		-moz-transform: rotateY(-360deg);
		-ms-transform: rotateY(-360deg);
		transform: rotateY(-360deg);
	}
}