/* ============================================================================
	BASE
   ============================================================================ */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans Light';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

*
{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	-webkit-print-color-adjust: exact;
}
html
{
	font-family: 'Open Sans', Helvetica,Verdana,Arial,sans-serif;
	color: #333333;
	font-size: 16px;
	height: 100%;
}
body
{
	background-color: #f4f4f4;
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

p
{
	margin-bottom: 20px;
	line-height: 24px;
}

a
{
	color: #4db9da;
	text-decoration: none;
	transition: all 0.2s;
}
a:hover
{
	color: #4db9da;
	text-decoration: underline;
}

h3 > a
{
	color: #333333;
}
h3 > a:hover
{
	text-decoration: none;
}

h2
{
	font-size: 180%;
	font-family: 'Roboto';
	font-weight: lighter;
	margin: 10px;
}

main
{
	margin-top: 10px;
	margin-bottom: 0px;
	flex-grow: 1;
}

li
{
	margin-left: 20px;
}

section
{
	position: relative;
}

.page
{
	max-width: 1000px;
	margin: auto;
	overflow: visible;
}

/* ============================================================================
	HEADER
   ============================================================================ */
h1
{
	font-family: 'Open Sans Light', sans-serif;
	font-weight: lighter;
	font-size: 180%;
}
header
{
	background-color: white;
}
header > .page
{
	padding: 15px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
header > .page img
{
	width: 96px;
	height: 96px;
}
#title
{
	margin-left: 40px;
}
#title > div
{
	font-size: 120%;
	font-style: lighter;
	font-family: Inconsolata, courier, sans-serif;
}

/* ============================================================================
	ABOUT
   ============================================================================ */
#about
{
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: wrap;
}
#about > article
{
	width: 50%;
	padding: 10px;
}
#d2p
{
	padding: 10px;
}
#d2p > article
{
	overflow: hidden;
	box-shadow: 0 0 3px rgba(0,0,0,0.2);
	padding: 10px;
	background-color: white;
	width: 100%;
	height: 100%;
}
#d2p p
{
	margin: 10px;
	line-height: 200%;
}
#d2p img
{
	float: right;
	margin-top: 30px;
	margin-right: 10px;
}
#about article > div
{
	box-shadow: 0 0 3px rgba(0,0,0,0.2);
	padding: 10px;
	background-color: white;
	width: 100%;
	height: 100%;
}
#about article > div.lightkeeper
{
	background-color: #2f2017;
	background-image: url('images/lightkeeper.png');
	background-size: cover;
	color: white;
	position: relative;
	text-shadow: black 1px 0 10px;
	min-height: 200px;
}
#about article > div p
{
	margin: 10px;
}
#about article > div.lightkeeper > a
{
	display: block;
	position: absolute;
	bottom: 0;
	color: white;
}
#about > #author > div
{
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
#about > #author > div > a > img
{
	margin-top: 10px;
	margin-bottom: 10px;
}
@media screen and (max-width: 650px)
{
	#about > article
	{
		width: 100%;
	}
}

/* ============================================================================
	COVERS
   ============================================================================ */
#covers
{
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-wrap: wrap;
}
#covers > a
{
	display: block;
	width: 25%;
	padding: 10px;
	position: relative;
}
#covers > a > img
{
	display: block;
	width: 100%;
	box-shadow: 0 0 3px rgba(0,0,0,0.2);
}
#covers > a:after
{
	content: '\A';
	position: absolute;
    top:10px;
	left:10px;
	bottom: 10px;
	right: 10px;
	background-color: rgba(77,185,218,0.4);
	transition: all 0.3s;
	opacity: 0;
}
#covers > a:hover:after
{
	opacity: 1;
}
@media screen and (max-width: 700px)
{
	#covers > a
	{
		width: 33%;
	}
}
@media screen and (max-width: 550px)
{
	#covers > a
	{
		width: 50%;
	}
}

/* ============================================================================
	DETAILS
   ============================================================================ */
#details ul
{
	list-style-type: square;
	margin: 0;
	padding: 0;
}
#details li
{
	margin-bottom: 10px;
}
/* #details li::before
{
  content: "■";
  color: #5e788f;
  margin-right: 5px;
}
 */
#details > h2
{
	font-size: 180%;
	font-family: 'Open Sans Light';
	margin: 10px;
	margin-top: 20px;
}
#details > section
{
	box-shadow: 0 0 3px rgba(0,0,0,0.2);
	margin: 10px;
	padding: 10px;
	background-color: white;
	overflow: hidden;
}
#details > section > article
{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
}
#details > section > article:not(:last-child)
{
	padding-bottom: 20px;
	border-bottom: solid 1px #DDD;
	margin-bottom: 20px;
}
#details > section > article > div.screenshots
{
	width: 30%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
}
#details > section > article > div.content
{
	width: 70%;
	padding-left: 10px;
}
@media screen and (max-width: 500px)
{
	#details > section > article > div.screenshots
	{
		width: 100%;
	}
	#details > section > article > div.content
	{
		width: 100%;
		padding-left: 0px;
	}
}
#details > section > article > div.screenshots > div
{
	display: block;
	width: 50%;
	padding: 5px;
}
#details > section > article > div.screenshots > img
{
	display: block;
	width: 100%;
	padding: 5px;
	cursor: pointer;
}
#details > section > article > div.screenshots > div > img
{
	display: block;
	width: 100%;
	cursor: pointer;
}
#details > section > article > div
{
	width: 75%;
	position: relative;
}
#details > section > article > div > h3
{
	text-align: left;
}
#details .genre
{
	display: none;
	position: absolute;
	top: 13px;
	right: 13px;
	color: white;
	padding-left: 5px;
	padding-right: 5px;
	background-color: rgb(77,185,218);
	font-size: 80%;
}
@media screen and (max-width: 500px)
{
	#details > section > article > img
	{
		width: 100%;
	}
	#details > section > article > div
	{
		width: 100%;
	}
}

#details > section > article#others
{
	display: block;
}
#others h3
{
	text-align: left;
	margin: 5px;
}
#details > section > article#others > div.screenshots
{
	width: 100%;
}
#details > section > article#others > div.screenshots > div
{
	display: block;
	width: 33%;
	padding: 5px;
}

.tech
{
	text-align: right;
	font-family: Inconsolata, courier, sans-serif;
	line-height: 32px;
}
.tech img
{
	vertical-align:middle;
}

.date
{
	float: right;
	font-family: Inconsolata, courier, sans-serif;
	font-size: 130%;
	margin-top: 16px;
}

.flag
{
	width: 24px;
	height: 16px;
	background-image: url('images/en.png');
	position: absolute;
	top: 13px;
	right: 13px;
	cursor: help;
}
.flag.en
{
	background-image: url('images/en.png');
}
.flag.fr
{
	background-image: url('images/fr.png');
}

.media
{
	position: absolute;
	top: 13px;
	left: 13px;
	color: white;
	padding-left: 5px;
	padding-right: 5px;
	background-color: rgb(77,185,218);
	font-size: 80%;
}

.byline
{
	text-align: right;
	color: #BBB;
	margin-top: 10px;
}

div.backlink
{
	display: none;
}

h3
{
	font-size: 160%;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: center;
	font-family: 'Open Sans Light';
}

/* ============================================================================
	FOOTER
   ============================================================================ */

footer
{
	display: none;
}
footer a , header a
{
	color: white;
}
footer a:hover , header a:hover
{
	color: #4db9da;
}

/* ============================================================================
	ARTICLE
   ============================================================================ */
#article
{
	box-shadow: 0 0 3px rgba(0,0,0,0.2);
	margin: 10px;
	background-color: white;
	overflow: hidden;
}
#article img
{
	width: 100%;
}
#article > article
{
	margin: 10px;
}

#lightbox
{
	background-color: rgba(0,0,0,0.8);
	position: fixed;
	width: 100%;
	height: 100%;
	display: none;
	align-items: center;
	justify-content: center;
}
#lightbox img
{
	max-width: 90%;
	max-height: 90%;
}

#print_only
{
	margin-left: 10px;
}

/* ============================================================================
	NEW
   ============================================================================ */
h2.category
{
	font-size: 200%;
	font-family: 'Open Sans Light';
	margin-bottom: 20px;
	margin-top: 40px;
	padding: 0;
}

section.cards
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
}

@media screen and (max-width: 800px)
{
	section.cards
	{
		grid-template-columns: 1fr;
	}
}

section.cards > article
{
	width: 100%;
	display: block;
	
	display: grid;
	grid-template-rows: 1fr 48px;
	grid-gap: 20px;
}

section.cards > article > div > img, section.cards > article > div > video
{
	width: 100%;
}
a.button, .icons img
{
	display: none;
}