@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');

* {
	box-sizing: border-box;
	font-family: "Roboto Mono", monospace;

	--fgcolor: #151111;
	--fgaccent: #200000;
	--bgcolor: #ffefef;
	
	--codeblockfg: white;
	--codeblockbg: #222;
	--codeinlinefg: #020202;
	--codeinlinebg: #dccccc;
}

::selection {
	background-color: var(--fgcolor);
	color: var(--bgcolor);
}

.fade {
	opacity: 0.5;
}

html {
	margin: 0;
	background-color: var(--bgcolor);
	color: var(--fgcolor);
}

body {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	
	font-size: 1.25rem;
	line-height: 135%;
}

:not(h1) > a:not(.logo) {
	color: var(--bgcolor);
	background-color: var(--fgcolor);
	text-decoration: none;
	font-weight: bold;
	padding: 0.1em 0.3em;
}

h1 a {
	color: inherit;
	text-decoration: none;
}

:not(h1) > a:not(.logo):hover, :not(h1) > a:not(.logo):focus {
	color: var(--fgaccent);
	background-color: var(--bgcolor);
}

a:hover, a:focus {
	text-decoration: underline;
}

a:active {
	color: red;
}

header {
	width: 100%;
	height: 7rem;

	background-color: var(--fgcolor);
	padding: 0px;
	
	display: flex;
	align-items: center;
}

header .logo {
	margin: 0 .5rem;
}

header h1 {
	color: var(--bgcolor);

	margin: 0;

	text-transform: uppercase;
	font-size: min(4em, 5.7vw);
	line-height: 100%;
}

header .spacefiller {
	flex-grow: 1;
}

header nav {
	margin-right: .5rem;
}

article {
	width: 70rem;
	max-width: 90%;
	margin: 0 auto;

	padding: 0 1em;
}

article h1 {
	font-size: 2.3em;
	
	margin: 1.6rem 0;
	line-height: 110%;
}

article h1, article h2 {
	width: 100%;

	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5em;
	align-items: center;
}

article h1, article h2, article h3 {
	color: var(--fgaccent);
}

article h1:after, article h2:after {
	content: "";
	border-top: 2px solid var(--fgaccent);
}

article .byline {
	position: relative;
	top: -2em;
	font-size: 75%;
	text-align: right;
	margin-bottom: -2em;
}

article blockquote {
	font-size: 80%;
	
	border-left: 0.5em solid var(--fgcolor);
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	padding-left: 2em;
	line-height: 110%;
}

article ul {
	list-style-type: '- ';
}

article ul li {
	margin-top: 1em;
}

/* Unfortunately my current markdown parser outputs <code> for both inline code and codeblocks. That's annoying. */
article code[class^="language"] {
	display: block;
	color: var(--codeblockfg);
	padding: 1em;
	background-color: var(--codeblockbg);
	max-width: 100%;
	overflow-x: auto;
	
	tab-size: 4;
	-moz-tab-size: 4;
}

article code:not([class^="language"]) {
	background-color: var(--codeinlinebg);
	color: var(--codeinlinefg);
}

/* Quick hack lmao */
h1 code, h2 code, h3 code, h4 code {
	padding: .5em;
}

hr {
	border: none;
	border-top: 1px solid var(--fgcolor);
	overflow: visible;
	text-align: center;
	width: 70%;
	height: 0;
	margin: 3em auto;
}

hr:after {
	content: "";
	display: inline-block;
	
	width: 48px;
	height: 24px;
	position: relative;
	top: -12px;
	
	background-color: var(--bgcolor);
	background-image: url("img/tiny_dragnmlem.png");
	background-position: center;
	background-repeat: no-repeat;
}

hr.cool:after {
	background-image: url("img/tiny_dragncool.png");
}

hr.think:after {
	background-image: url("img/tiny_dragnthink.png");
}

.youtube {
	display: block;
	margin: 0 auto;
}

@media (max-width: 40rem) {
	body {
		font-size: 1em;
	}
	
	article {
		max-width: 95%;
		padding: unset;
	}
	
	header h1 {
		font-size: 1.5em;
		max-width: 5em; /* forces a line break after all three words */
	}
	
	:not(h1) > a {
		padding: unset;
	}
}