@import "./reset.css";

@font-face {
	font-family: "Rubik";
	src: local("Rubik"), url("../fonts/Rubik.ttf");
	font-weight: normal;
}

/* VARIABLES START */
:root {
	font-family: "Rubik", sans-serif;
	font-size: 14px;
	--body-width: 50rem;
	--body-font: "Rubik";
	--body-font-size: 1rem;
	--body-fg: #000000;
	--body-bg: #000000;

	--nav-width: var(--body-width);
	--nav-font: inherit;
	--nav-font-size: 1.8rem;
	--nav-margin: 1rem;
	--nav-fg: #ffffff;
	--nav-bg: #000000;
	--nav-link-color: #9155a3;
	--nav-visited-color: var(--nav-link-color);
	--nav-hover-color: #6afb4c;
	/* old value */
	/* --nav-hover-color: #fb4cee; */

	--content-width: var(--body-width);
	--content-font: inherit;
	--content-font-size: 1rem;
	--content-margin: 2.5rem;
	--content-fg: #ccd;
	--content-bg: #2865bc;

	--article-fg: #000;
	/* this one is more saturated, harder to get contrast */
	/* --article-bg: #488dd2; */
	--article-bg: #9bb1c4;
	--article-font: inherit;
	--article-font-size: 1.4rem;
	--article-margin: calc(var(--content-margin) / 2);
	--article-link-color: #0067d4;
	--article-visited-color: #9a36be;
	--article-hover-color: #6afb4c;
	/* cyan #8dff99 */
	/* green #0a511b */
	/* pink #fb4cee */

	--filter-font-size: 1.5rem;
	--filter-link-color: #7df;
	--filter-visited-color: #6cf;
	--filter-hover-color: '';

	--footer-width: var(--body-width);
	--footer-font: inherit;
	--footer-font-size: 1rem;
	--footer-margin: 1rem;
	--footer-fg: #aab;
	--footer-bg: inherit;
	--footer-link-color: #9155a3;
	--footer-visited-color: var(--nav-link-color);
	--footer-hover-color: #6afb4c;

	--code-font: monospace;
	--code-font-size: 1.4rem;
	--code-fg: #000;
	--code-bg: #88a5bc77;
	/* --code-bg: #0a1a2e; */
}

/* threshold for mobile-centric layout */
/* TODO: fix to not need 'important' */
@media (max-width: 700px) {
	.paginator {
		flex-direction: column !important;
	}
	.paginator > div {
		text-align: center !important;
	}

	#footer_bars {
		flex-direction: column !important;
		align-items: center;
		gap: 1rem;
		font-size: 1.6rem !important;
	}

	#footer_bars > article {
		max-width: calc(var(--body-width) - 4rem) !important;
		width: 70%;
	}

	div.showcase {
		grid-template:
			"i" "b" !important;
		grid-template-rows: 1fr;
		justify-items: center;
	}
}

@media (min-width: 850px) {
	:root {
		font-size: 16px;
		--body-width: 60rem;
	}
	header#top h1 a {
		height: 6rem;
	}
}

@media (min-width: 1200px) {
	:root {
		font-size: 18px;
	}
	header#top h1 a {
		height: 6rem;
	}
	#content {
		background-size: 128px;
		image-rendering: pixelated;
	}
}

html {
}

body {
	background-color: var(--body-bg);
	font-size: var(--body-font-size);
	font-family: var(--body-font);
}

abbr {
	cursor: help;
}

blockquote {
	padding-left: var(--content-margin);
	font-style: italic;
}

em {
	font-style: italic;
}

strong {
	font-weight: bold;
}

.pixelart {
	image-rendering: pixelated !important;
}

/* HEADER START */

header#top {
	text-align: center;
	background: linear-gradient(to bottom, #68a128 0%, #2865bc 50%, #6c2cbf 100%), #000;
	/* background: linear-gradient(to bottom, #000 0%, #0e1930 45%, #281748 60%, #9425ba 80%, #d74edd 88%, #e46598 92%, #ff9900 100%), #000; */
}

header#top h1 {
	/* font-size: 3rem; */
}

header#top h1 a {
	display: inline-block;
	color: transparent;
	height: 8rem;
	width: calc((8rem * 2) + 2rem);
	background-image: url("../images/logo-standard.svg");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
}

header#top p {
	color: #fff;
	text-shadow: 0.1rem 0.1rem 0px #000;
	font-size: 1.2rem;
	padding-bottom: 0.5rem;
}

/* NAV START */

body > nav {
	font-family: var(--nav-font);
	background: var(--nav-bg);
	display: flex;
	align-items: center;
	justify-content: space-around;
}

body > nav ul {
	font-size: var(--nav-font-size);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex: 0 1 auto;
	align-items: center;
	justify-content: center;
	max-width: var(--body-width);
	gap: 0 0.5rem;
}

body > nav ul li {
	padding: 0.4rem 0.7rem;
}

body > nav ul li a {
	color: var(--nav-link-color);
	text-decoration: none;
}

body > nav ul li a:visited {
	color: var(--nav-visited-color);
}

body > nav ul li a:hover {
	color: var(--nav-hover-color);
	text-decoration: underline;
}

/* CONTENT START */

#content {
	background: var(--content-bg);
	color: var(--content-fg);
	padding: var(--content-margin) 0;
	background-image: url("../images/grid_full_25.png");
	background-position: top center;
}

h2.filter {
	max-width: var(--body-width);
	margin: var(--article-margin) auto;
	margin: 0 auto;
	text-align: center;
	font-size: 1.5rem;
}

div.paginator {
	display: flex;
	flex-direction: row;
	max-width: var(--body-width);
	margin: var(--article-margin) auto;
	justify-content: center;
	font-size: 1.5rem;
}

div.paginator,
h2.filter {
	text-shadow: 2px 2px 1px #1350a7;
}

div.paginator > div {
	flex: 1 0 0;
}

.newest, .newer {
	text-align: left;
}

.label {
	text-align: center;
}

.older, .oldest {
	text-align: right;
}

#content .post_meta {
	color: #034097;
}

#content article:not(:last-of-type) {
	margin-bottom: var(--content-margin);
}

#content article {
	margin-left: auto;
	margin-right: auto;
	font-family: var(--article-font);
	font-size: var(--article-font-size);
	max-width: var(--body-width);
	background: var(--article-bg);
	box-shadow: 0 0.5rem 0 #07122488;
	border: 0.1rem solid #071224;
	/* backdrop-filter: blur(1px); */
	color: var(--article-fg);
	box-sizing: border-box;
	padding: calc(var(--content-margin) / 2);
}

#content article h1,
#content article h2,
#content article h3,
#content article h4,
#content article h5,
#content article h6 {
	text-transform: uppercase;
	line-height: 1.1;
}

#content article h1 {
	font-size: 3rem;
}

#content article h2 {
	font-size: 2.7rem;
}

#content article h3 {
	font-size: 2.5rem;
}

#content article h4 {
	font-size: 2.2rem;
}

#content article h5 {
	font-size: 2rem;
}

#content article h6 {
	font-size: 1.8rem;
}

#content article p,
#content article ul,
#content article ol,
#content article dl,
#content article table {
	font-size: 1em;
}

#content article h1,
#content article h2,
#content article h3,
#content article h4,
#content article h5,
#content article h6,
#content article p,
#content article ol,
#content article ul,
#content article dl,
#content article pre,
#content article table
{
	margin-bottom: var(--article-margin);
}

#content article p {
	text-align: justify;
}

#content article img {
	max-width: 100%;
	image-rendering: smooth;
}

#content article ul {
	list-style: square inside;
	padding-left: calc(var(--content-margin));
}

#content article ol {
	list-style: decimal inside;
	padding-left: calc(var(--content-margin));
}

#content article dl {
	list-style: inside;
	padding-left: calc(var(--content-margin));
}

#content article dl dt {
	font-weight: bold;
	font-size: 1.1em;
}

#content article dl dd {
}

#content article code,
#content article pre {
	font-family: var(--code-font);
	font-size: var(--code-font-size);
}

#content article pre {
	color: var(--code-fg);
	background: var(--code-bg);
	box-sizing: border-box;
	padding: 0.4rem;
}

.paginator a,
h2.filter a {
	color: var(--filter-link-color);
	text-decoration: none;
	font-weight: bold;
}

.paginator a:visited,
h2.filter a:visited {
	color: var(--filter-visited-color);
}

.paginator a:hover,
h2.filter a:hover {
	/* color: var(--article-hover-color); */
	text-decoration: underline;
}

#content article a {
	color: var(--article-link-color);
	text-decoration: none;
}

#content article a:visited {
	color: var(--article-visited-color);
}

#content article a:hover {
	color: var(--article-hover-color);
	text-decoration: underline;
}

div.showcase {
	display: grid;
	grid-template:
		"i b";
	grid-template-columns: 1fr 2fr;
	align-items: center;
	gap: var(--article-margin);
}

div.showcase img {
	grid-area: i;
	width: 100%;
	margin-bottom: var(--article-margin);
}

div.showcase div {
	grid-area: b;
}

div.showcase:nth-child(even) {
	grid-template:
		"b i";
	grid-template-columns: 2fr 1fr;
}

div.testimony > blockquote {
	padding-left: 0;
}

div.testimony > p:last-child {
	text-indent: calc(var(--content-margin)*2);
}

.footnote-ref {
	font-size: 0.8em;
	vertical-align: super;
}

hr {
	border: 0;
	margin: var(--article-margin) 0;
	padding: 0;
	height: 1px;
	background: #000;
}

#content article .footnote > ol,
#content article .footnote > ol li p {
	margin-bottom: 0;
}

#content article .footnote ol {
	list-style: decimal outside;
	margin-left: var(--article-margin);
}

.footnote ol li:target {
	background: #ffffff66;
}

table {
	border: 1px solid #000;
	border-collapse: separate;
	border-spacing: 0.2rem;
}

th {
	/* color: #281748; */
	background: #28174844;
	padding: 0.4rem;
	font-weight: bold;
}

tr:nth-of-type(2n) td {
	background: #ffffff55;
}

td {
	background: #ffffff33;
	padding: 0.4rem;
}

#content article > p.post_tags {
	margin-bottom: 0;
	color: #034097;
	text-align: right;
}

/* FOOTER START */

body > footer {
	/* background-color: #000; */
	color: var(--footer-fg);
	background: linear-gradient(to bottom, #0e1930 0%, #000 15%);
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: #071224;
}

body > footer p {
	text-align: center;
	font-size: 1.2rem;
	margin: 0 auto;
	max-width: var(--body-width);
	padding: 2rem 0;
}

body > footer a {
	color: var(--footer-link-color);
	text-decoration: underline;
}

body > footer a:visited {
	color: var(--footer-visited-color);
}

body > footer a:hover {
	color: var(--footer-hover-color);
	text-decoration: underline;
}

#footer_bars {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	max-width: var(--body-width);
	margin: 0 auto;
	font-size: 1.2rem;
	justify-content: center;
	gap: 1rem;
}

#footer_bars > article {
	flex: 1 0 0;
	max-width: 15rem;
}

/* this should be done via 'gap' */
/* #footer_bars > article:not(:last-child) { */
/* 	margin-right: 1rem; */
/* } */

#footer_bars h1 {
	margin-bottom: 0.7rem;
}

#fullnav {
	background:
		radial-gradient(circle at 10% 45%, #66ccff11 0%, #66ccff00),
		linear-gradient(to top, #1350a722 0%, #2865bc44 100%)
	;
	padding: 0.6rem;
	margin: 0.2rem;
	border-radius: 0.2rem;
	border: 1px solid #2865bc44;
	box-shadow: 0 0 0.5rem #2865bc99;
}

#fullnav h1 {
	text-transform: uppercase;
	color: #66ccff;
	text-shadow: 0.1rem 0.1rem 0px #000;
}

#fullnav ul li a {
	text-decoration: none;
	color: #2865bc;
}

#fullnav ul li a:hover {
	color: #66ccff;
	text-decoration: underline;
}

#thirdparties {
	background:
		radial-gradient(circle at 10% 45%, #9425ba11 0%, #9425ba00),
		linear-gradient(to top, #18073822 0%, #28174844 100%)
	;
	padding: 0.6rem;
	margin: 0.2rem;
	border-radius: 0.2rem;
	border: 1px solid #9425ba44;
	box-shadow: 0 0 0.5rem #9425ba99;
}

li.twitch a {
	display: inline-block;
	background-image: url("../images/twitch.png");
	background-position: left center;
	background-size: 1.4rem;
	background-repeat: no-repeat;
	padding-left: 2rem;
}

li.kofi a {
	display: inline-block;
	background-image: url("../images/kofi.png");
	background-position: left center;
	background-size: 1.4rem;
	background-repeat: no-repeat;
	padding-left: 2rem;
}

li.fourthwall a {
	display: inline-block;
	background-image: url("../images/fourthwall.svg");
	background-position: left center;
	background-size: 1.4rem;
	background-repeat: no-repeat;
	padding-left: 2rem;
}

li.retroachievements a {
	display: inline-block;
	background-image: url("../images/ra.webp");
	background-position: left center;
	background-size: 1.4rem;
	background-repeat: no-repeat;
	padding-left: 2rem;
}

#thirdparties h1 {
	text-transform: uppercase;
	color: #b73ae2;
	text-shadow: 0.1rem 0.1rem 0px #000;
}

#thirdparties ul li a {
	text-decoration: none;
	color: #8654b8;
}

#thirdparties ul li a:hover {
	color: #b73ae2;
	text-decoration: underline;
}

#personals {
	background:
		radial-gradient(circle at 10% 45%, #26c96c11 0%, #26c96c00),
		linear-gradient(to top, #02841622 0%, #208f3144 100%)
	;
	padding: 0.6rem;
	margin: 0.2rem;
	border-radius: 0.2rem;
	border: 1px solid #208f3144;
	box-shadow: 0 0 0.5rem #208f3199;
}

#personals h1 {
	text-transform: uppercase;
	color: #26c96c;
	text-shadow: 0.1rem 0.1rem 0px #000;
}

#personals ul li a {
	text-decoration: none;
	color: #208f31;
}

#personals ul li a:hover {
	color: #26c96c;
	text-decoration: underline;
}