:root {
	--var-background: #0A2647;
	--var-primary: #2C74B3;
	--var-secondary: #144272;
}

html {
	height: 100%;
}

body {
	min-height: 100%;
	margin: 0;
	padding: 16px;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 14px;
	line-height: 1.42857143;
	color: #DEDEDE;
	background-color: var(--var-background);
}

.container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.section {
	width: 100%;
	margin-bottom: 16px;
	background-color: var(--var-secondary);
	border-radius: 8px;
}

.section .header {
	margin: 0 0 8px 0;
	padding: 4px;
	line-height: 1;
	color: #DEDEDE;
	background-color: var(--var-primary);
	border-radius: 8px;
}

.section .header h1 {
	font-size: 24px;
}

.section .header h2 {
	font-size: 20px;
}

.section .header p {
	font-size: 16px;
}

.section .header > * {
	margin: 8px 16px;
}

.hidden {
	display: none;
}

.games {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}

.games .game {
	width: 100%;
	max-width: 240px;
	margin: 8px;
	transition: transform 0.2s ease-in-out;
}

@media (max-width: 768px) {
	.games .game {
		max-width: calc(50% - 16px);
	}
}

@media (hover: hover) and (pointer: fine) {
	.games .game:hover {
		transform: scale(1.1);
	}
}

.games .game-image {
	width: 100%;
	height: 160px;
	background-size: cover;
	background-position: center;
	border-radius: 8px 8px 0 0;
}

@media (max-width: 768px) {
	.games .game-image {
		height: 120px;
	}
}

.game span {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: nowrap;
	padding: 4px;
	background-color: var(--var-primary);
	border-radius: 0 0 8px 8px;
}

.game span > * {
	margin: 0;
	padding: 8px;
	display: inline-block;
	font-size: 16px;
}

.game .favourite {
	cursor: pointer;
}

.game .favourite.enabled {
	color: #FFD700;
	animation: pulse 0.5s linear;
}

.sr-only {
	font-size: 16px;
	margin-right: 8px;
}

.search {
	margin-bottom: 16px;
	font-size: 16px;
}

.no-results {
	font-size: 16px;
	color: #F13268;
}

@keyframes pulse {
	0% {
		transform: rotate(0deg) scale(1);
	}
	50% {
		transform: rotate(180deg) scale(1.5);
	}
	100% {
		transform: rotate(360deg) scale(1);
	}
}

@font-face {
	font-family: 'icomoon';
	src:  url('fonts/icomoon.eot?g8cxqm');
	src:  url('fonts/icomoon.eot?g8cxqm#iefix') format('embedded-opentype'),
	  url('fonts/icomoon.ttf?g8cxqm') format('truetype'),
	  url('fonts/icomoon.woff?g8cxqm') format('woff'),
	  url('fonts/icomoon.svg?g8cxqm#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
  }
  
  [class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
  
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  }
  
  .icon-star:before {
	content: "\f005";
  }
  .icon-star-o:before {
	content: "\f006";
  }