/*
	CSS for onionblaze.com
	Made by Arwyn Silva
	For questions, you can contact me at hi@onionblaze.com
	If you made something nice by using this as a reference, feel free to send it to me as well!
*/

body, li, #header, #navigation, #navigation ul, #introduction, #content, #about, #intro-links, #content .blog-entry-short, #content .blog-entry-short-no-img, #content .solo-img-caption, #featured-game-list, .featured-game, .featured-game ul, .featured-game-info, .game-list, .game-listing, .game-listing ul, .game-listing-info, .see-more-link, #recent-blog-posts, #footer {
	margin: 0;
	padding: 0;
}

body {
	background: linear-gradient(to left, #ffd1cc, #ffd699);
	color: #743127;
	font-size: 1.1em;
	font-family: Arial, Helvetica, sans-serif;
}

p, #content li, #content #blog-entry-skip-summary, .featured-game-caption, .game-listing-caption {
	line-height: 1.5em;
}

h1, h2, h3 {
	padding: 0;
}

h1 {
	font-size: 2em;
	margin: 0.7em 0em;
}

h2 {
	font-size: 1.5em;
	margin: 0.65em 0em;
}

h3 {
	font-size: 1.17em;
	margin: 0.6em 0em;
}

a {
	color: #397969;
	font-weight: 600;
	text-decoration: none;
}

a:hover, a:focus {
	color: #1573d1;
	text-decoration: underline solid 10%;
}

.crisp-edge {
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;
}

#skip-to-content {
	float: left;
	margin: 0 0 1em;
	padding: 0;
	text-align: left;
}

#container {
	background-color: #f4f4f4;
	margin: 2em auto;
	padding: 1em 50px;
	max-width: 1020px;
}

#header, #recent-blog-posts, .image-column-clear, #content, #content .blog-entry-short, #content .blog-entry-short-no-img, #content #summary, #content #summary-skip, #content .blog-nav h2, #content .blog-nav h3, #footer, #footer-text, .see-more-link, #back-to-top, #back-to-top-afterlist {
	content: "";
	clear: both;
	display: block;
}

#logo {
	float: left;
	width: 35%;
	max-width: 22.7em;
}

#logo img {
	width: 100%;
	max-width: 1080px;
}

#logo img:hover, #logo:focus img {
	opacity: 0.75;
}

#navigation {
	float: right;
	width: 65%;
	font-size: 1.5em;
	text-align: right;
	line-height: 3.14em;
}

#navigation a {
	color: #d11544;
	font-weight: 900;
	text-underline-offset: 0.4em;
}

#navigation a:hover, #navigation a:focus {
	color: #1573d1;
	text-decoration: underline solid 15%;
}

#navigation ul {
	float: right;
	list-style: none;
}

#navigation li {
	float: left;
	margin: 0 0 0 1.1em;
	padding: 0;
}

#introduction {
	float: left;
	width: 25%;
	padding: 0 3% 0 0;
}

#introduction p {
	width: 95%;
	margin: 1em 0 1em 1em;
}

#profile-picture {
	display: block;
	width: 75%;
	max-width: 450px;
	margin: 0 auto;
}

#intro-stamps ul {
	list-style: none;
	padding: 0;
}

#intro-stamps ul li img {
	display: block;
	width: 50%;
	max-width: 450px;
	margin: 0 auto;
}

#intro-links ul {
	float: right;
	position: relative;
	right: 50%;
	margin: 0;
	list-style: none;
}

#intro-links li {
	float: left;
	position: relative;
	left: 50%;
	margin: 0 0.5em 1em;
	padding: 0;
}

#content {
	float: right;
	width: 69%;
	margin: 0 1% 0 2%;
}

#content p {
	width: 95%;
	margin: 1em auto;
}

.solo-img, .two-col-img-a, .two-col-img-b {
	line-height: 0;
}

.solo-img {
	display: block;
	margin: 0 auto 1em;
	max-width: 95%;
}

.solo-img-caption {
	text-align: center;
	font-style: italic;
}

.two-col-img-a, .two-col-img-b {
	float: left;
	width: 50%;
	margin: 0 0 1em;
}

.two-col-img-a img, .two-col-img-b img {
	max-width: 95%;
}

.two-col-img-a {
	text-align: right;
}

.two-col-img-b {
	text-align: left;
}

.col-img-stack {
	margin-bottom: 0;
	line-height: 0;
}

#content .blog-entry-short, #content .blog-entry-short-no-img {
	padding-top: 2em;
}

#content .blog-entry-short h2, #content .blog-entry-short-no-img h2 {
	display: block;
	width: 100%;
	margin-top: 0;
}

#content #blog-entry-first, #content #home-blog-entry-first {
	margin-top: 0;
	padding-top: 0;
}

#content #home-blog-entry-last, #archive-list, #tag-list-last {
	margin-bottom: 2.5em;
}

#content .blog-entry-short .blog-entry-short-img img {
	max-width: 100%;
	max-height: 5em;
	margin: 0;
	padding: 0;
}

#content .blog-entry-short-img {
	float: left;
	width: 25%;
	margin: 0 1em;
	padding: 0;
	text-align: center;
}

#content .blog-entry-desc {
	margin-bottom: 0;
	padding-bottom: 0;
}

#content #blog-entry-publish-info p {
	float: right;
	text-align: right;
	width: 75%;
	margin: 0 0 1em;
}

#content #blog-entry-skip-summary {
	margin: 0;
	padding: 0;
	text-align: left;
}

#content #summary {
	content: "";
	clear: both;
	display: block;
	width: 75%;
	margin: 0 auto;
	padding: 1em 0 0;
}

#content #summary-skip {
	padding-top: 1em;
}

#content #blog-entry-main-pic {
	margin-top: 1em;
}

#content .blog-nav {
	margin-top: 2.5em;
}

#content .blog-nav h3, #content .blog-nav li {
	text-align: center;
}

#content .blog-nav ul {
	list-style: none;
	float: right;
	position: relative;
	right: 50%;
	margin: 0 0 1em;
	width: 75%;
}

#content .blog-nav li {
	float: left;
	position: relative;
	left: 50%;
	width: 31%;
	margin: 0 1.15%;
	padding: 0;
}

#content .blog-nav .next-prev-half {
	width: 50%;
}

#content .blog-nav .next-prev-half li {
	width: 47.7%;
	margin: 0 1.15%;
}

#content .blog-nav .next-prev-none {
	width: 75%;
}

#content .blog-nav .next-prev-none li {
	width: 100%;
	margin: 0;
}

#featured-game-list h2, #featured-game-list h3, .game-list h2, .game-list h3 {
	text-align: center;
}

.featured-game, .game-listing {
	float: left;
	width: 33%;
}

.featured-game ul, .game-listing ul {
	float: right;
	position: relative;
	right: 50%;
	list-style: none;
	margin: 0 0 1.5em;
}

.featured-game li, .game-listing li {
	float: left;
	position: relative;
	left: 50%;
	margin: 0 0.6em 1em;
	padding: 0;
}

.featured-game-info img, .game-listing-info img {
	display: block;
	width: 95%;
	height: auto;
	max-width: 400px;
	margin: 0 auto;
}

.featured-game-caption, .game-listing-caption {
	width: 85%;
	margin: 0 auto;
	padding: 0;
}

.see-more-link, #back-to-top, #back-to-top-afterlist {
	display: block;
	float: right;
	text-align: right;
}

.blogroll-button {
	text-align: center;
}

.see-more-link {
	margin: 0 0 2em 0;
}

#back-to-top {
	margin: 3em 0 3em 0;
	padding: 0;
}

#back-to-top-afterlist {
	margin: 1em 0 3em 0;
	padding: 0;
}

#footer {
	text-align: center;
	margin: 0 1em;
	padding-top: 1em;
}

@media (max-width: 1220px) {
	#container {
		padding: 1em 4%;
		max-width: none;
	}

	#logo {
		float: none;
		display: block;
		width: 100%;
		max-width: 25em;
		margin: 1em auto 2em;
	}

	#navigation {
		float: none;
		width: 100%;
		text-align: center;
	}

	#navigation ul {
		float: right;
		position: relative;
		right: 50%;
	}

	#navigation li {
		float: left;
		position: relative;
		left: 50%;
		line-height: 2em;
		margin: 0 0.65em 0 0.65em;
	}

	#intro-links li {
		margin: 0 0.75em 1.5em;
	}

	#content #blog-entry-publish-info p {
		float: none;
		text-align: center;
		width: auto;
		margin: 2em 0 1em;
	}

	.featured-game, .game-listing {
		width: 100%;
	}

	.featured-game ul, .game-listing ul {
		margin-bottom: 1em;
	}

	.featured-game li, .game-listing li {
		margin: 0 0.75em 1.5em;
	}
}

@media (max-width: 768px) {
	#skip-to-content {
		margin: 0 0 1.5em;
	}

	#container {
		margin: 1em auto;
	}

	#logo {
		max-width: 20em;
	}

	#navigation li {
		margin: 0 0.75em 0.5em 0.75em;
	}

	#introduction {
		float: none;
		width: 100%;
		margin: 0;
		padding: 0;
		content: "";
		clear: both;
		display: block;
	}

	#introduction p {
		margin: 1em auto;
	}

	#profile-picture {
		float: left;
		display: inline;
		width: 20%;
		margin: 0 2.27% 2.27%;
	}
	
	#intro-stamps ul li img {
		width: 25%;
	}

	#intro-links {
		content: "";
		clear: both;
		display: block;
	}

	#intro-links li {
		margin: 0 0.85em 2em;
	}

	#content {
		float: none;
		width: 100%;
		content: "";
		clear: both;
		display: block;
		margin: 0;
	}

	#content .blog-entry-short img {
		max-height: 3.5em;
	}

	.two-col-img-a, .two-col-img-b {
		float: none;
		display: block;
		width: 100%;
		margin: 0 auto 1em;
		text-align: center;
	}

	.two-col-img-a {
		margin-bottom: 0;
		line-height: 0;
	}

	#content .blog-nav ul {
		width: 100%;
	}

	#content .blog-nav .next-prev-half {
		width: 66.6%;
	}

	#content .blog-nav .next-prev-none {
		width: 90%;
	}

	.featured-game ul, .game-listing ul {
		margin-bottom: 0.5em;
	}

	.featured-game li, .game-listing li {
		margin: 0 0.85em 2em;
	}

	.featured-game-caption, .game-listing-caption {
		width: 90%;
	}

	#back-to-top, #back-to-top-afterlist {
		margin-bottom: 2em;
	}
}

@media (prefers-color-scheme: dark) {
	body {
		background: linear-gradient(to left, #1e1c1b, #312724);
		color: #f4f4f4;
	}

	a {
		color: #7fe68f;
	}

	a:hover, a:focus, #navigation a:hover, #navigation a:focus {
		color: #72b4fc;
	}

	#container {
		background-color: #3e3e3e;
	}

	#navigation a {
		color: #ffa8ca;
	}
}