@import url('https://fonts.googleapis.com/css?family=Monda|Open+Sans+Condensed:300&subset=latin-ext');

/* vars */
:root {
	--dayz: 5;
	--zomboid: 2;
	--long-dark: 3;
	--astroneer: 4;
	--minecraft: 1;
	--elite: 6;
}

/*----------------------------------------------------------------------------------------------*/
/*                                                                               !| reset       */
/*----------------------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent
}
blockquote, q {
	quotes:none
}
blockquote:before, blockquote:after, q:before, q:after {
	content:'';
	content:none
}
:focus {
	outline:0
}
ins {
	text-decoration:none
}
del {
	text-decoration:line-through
}
table {
	border-collapse:collapse;
	border-spacing: 0
}
form {
	margin: 1em 0
}

/*----------------------------------------------------------------------------------------------*/
/*                                                                          !| typography       */
/*----------------------------------------------------------------------------------------------*/

h1, h2 {
	font-family: 'Monda', sans-serif;
	font-weight: 400;
	font-size: 2em;
	margin: 1rem 0 .6rem;
	line-height: 1.2em
}
#global_search {
	margin: 2rem 3rem
}
#global_search h1 {
	margin-bottom: 1.2rem;
}
#global_search h1::before {
	content: '';
	display: inline-block;
	vertical-align: bottom;
	margin-right: 1rem;
	width: 64px;
	height: 64px;
	background: url(../img/favicon/android-chrome-512x512.png);
	background-size: contain;
	box-shadow: 0 .4rem 1rem #0000003d
}
.col_set h2:first-child {
	margin-top: 0
}
p, input[type=text], input[type=password], textarea, button {
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 300;
	font-size: 1em;
}
p {
	margin: .8em 0 .8em
}
p strong {
	font-weight: 700
}
a {
	text-decoration: none;
	color: #85b5db
}
a:hover {
	color: #57b0f7
}
ul {
	list-style: none
}
input[type=text], input[type=password], textarea, button {
	background-color: #555;
	border-radius: 3px;
	padding: .2em .6em
}
input[type=text], input[type=password], textarea {
	color: #aaa;
	border: 1px solid #555;
	box-shadow: 0 3px 8px rgba(0,0,0,.6) inset;
}
button {
	border: none;
	text-transform: uppercase;
	font-weight: 700;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus, button:hover {
	background-color: #666;
}
label, button {
	cursor: pointer
}
hr {
	border: none;
	border-top: 1px solid #555
}
.note {
	font-size: .8em;
	color: #9d9d9d
}

/*----------------------------------------------------------------------------------------------*/
/*                                                                              !| layout       */
/*----------------------------------------------------------------------------------------------*/

body {
	background-color: #414141;
	color: #aaa;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 300;
	font-size: 22px;
}
.cards {
	display: flex;
	flex-wrap: wrap;
	padding: 0 2rem;
}
.card {
	flex-basis: 36rem;
	padding: 1rem
}

.card--dayz {
	order: var(--dayz);
}

.card--zomboid {
	order: var(--zomboid);
}

.card--long-dark {
	order: var(--long-dark);
}

.card--astroneer {
	order: var(--astroneer);
}

.card--minecraft {
	order: var(--minecraft);
}

.card--elite {
	order: var(--elite);
}

@media only screen  
and (max-width : 700px) {
	#global_search {
		margin: 2rem
	}
	.cards {
		padding: 0 1rem
	}
}

@media only screen  
and (max-width : 420px) {
	h1, h2 {
		font-size: 1.5em
	}
}