@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Source+Serif+Pro:ital,wght@1,900&family=JetBrains+Mono&display=swap');

/* settings */
* {
	box-sizing: border-box;
}

/* fonts */

body {
	font-family: "Crimson Pro", sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.4;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Source Serif Pro", serif;
	font-weight: 900;
	font-style: italic;
}

code {
	font-family: "JetBrains Mono", monospace;
	font-size: 18px; /* optically comparable to 22px Crimson Pro */
}

/* colors */

* {
	--fgcolor: black;
	--linkcolor: #950000;
	--linecolor: #cbbbbb;
	
	--bgcolor: #fcf8f4;
	--bgaccentcolor: #f5eeeb;
	
	--blockbgcolor: rgba(0, 0, 0, 0.05);
	--inlinecodebgcolor: rgba(50, 0, 0, 0.1);
}

.fade {
	opacity: 0.5;
}

a {
	color: var(--linkcolor);
}

a:active {
	color: red !important;
}

blockquote, code[class^="language"] {
	background-color: var(--blockbgcolor);
}

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

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

/* high level layout */

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

body {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
}

/* page header */

header {
	width: 100%;
	height: 130px;
	
	background-color: var(--bgaccentcolor);
	
	padding: 0px;
	
	display: flex;
	align-items: center;
	
	/* used in rotator.css */
	--size: 120px;
}

header .logo {
	background-color: var(--fgcolor);
	border-radius: 100%;
	margin: 0 .5rem;
	padding: .5rem;
}

header h1 {
	font-size: min(5vw, 100px); /* might have to poke at this when changing the font lol */
	font-family: "JetBrains Mono", monospace;
	font-style: normal;
	font-weight: 900;
	
	line-height: 1;
	text-transform: uppercase;
	overflow-wrap: normal !important;
}

header h1 a {
	text-decoration: none;
	color: var(--fgcolor);
	overflow-wrap: normal !important;
}

header nav a {
	padding: 0.1em 0.3em;
}

/* bigheader (for article pages) */

.bigheader {
	width: 100%;
	text-align: center;
}

.bigheader h1 {
	font-size: 65px;
	padding: 0.3em 1em;
	line-height: 110%;
	background-color: var(--fgcolor);
	color: var(--bgcolor);
}

.draftmarker {
	background: repeating-linear-gradient(135deg, black 0px, black 40px, #F5A601 40px, #F5A601 80px);
	background-attachment: fixed; /* ;) */
	color: white;
	font-family: "JetBrains Mono", monospace;
	height: 70px;
	font-size: 70px;
	line-height: 70px;
}

/* most page content */

article {
	width: 57rem;
	max-width: 85%;
	margin: 1em auto;
}

article h1 {
	font-size: 50px;
	border-bottom: 5px solid var(--linecolor);
}

article h2 {
	border-bottom: 2px solid var(--linecolor);
}

article blockquote {
	border-left: 2px solid var(--fgcolor);
	padding: 0.25em 1.5em;
}

article ul {
	padding-left: 2em; /* override browser style */
	list-style: '- ';
}

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

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

/* This is inline code */
article code:not([class^="language"]) {
	background-color: var(--inlinecodebgcolor);
	padding: 0.1em 0.2em;
}

/* fix inline code in headings */
h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
	padding: .45em;
	font-style: normal;
}

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

hr {
	border: none;
	border-top: 2px solid var(--linecolor);
	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");
}

/* "mobile" layout */
@media (max-width: 40rem) {
	/* use more of the screen */
	article { max-width: 95%; }
	
	/* reduce the font size a little bit */
	body { font-size: 18px; }
	code { font-size: 15px; }
	.bigheader h1 { font-size: 38px; }
	
	/* try to avoid horizontal scroll at all costs (long words in eg codeblocks can do it */
	* { overflow-wrap: anywhere; }
	
	/* hardcode a font size for the top homepage link, and force it to wrap onto three lines */
	header h1 a {
		font-size: min(8vw, 1.4em);
		display: block;
		max-width: 1px;
	}
	
	header {
		--size: 100px;
	}
	
	/* desktop layouts place list bullets in the gutter, but this falls off the page with a thin left margin */
	article ul {
		padding-left: 1em;
	}
	
	/* force a line break after dates in post listings */
	li .date {
		display: block;
	}
}