/* The Opens Sans fonts: Copyright 2020 The Open Sans Project Authors (https://github.com/googlefonts/opensans).
 * This Font Software is licensed under the SIL Open Font License, Version 1.1. This license 
 * is available with a FAQ at: https://openfontlicense.org */
@font-face {
	font-family: 'Open Sans Light';
	src: url(fonts/OpenSans-Light.ttf);
}
@font-face {
	font-family: 'Open Sans Regular';
	src: url(fonts/OpenSans-Regular.ttf);
}

:root {
	--theme-background: #202020;
	--theme-text: #ffffff;
	--theme-gray: #444444;
	--theme-color-1: rgb(30, 10, 50);
	--theme-color-2: rgb(70, 35, 105);
	--theme-color-3: rgb(90, 0, 90);
	--theme-nav-background: rgba(255, 255, 255, 0.08);
	--theme-footer-background: #000000;
	color-scheme: dark;
	font-size: 18px;
}

.light-theme {
	--theme-background: #ffffff;
	--theme-text: #202020;
	--theme-gray: #dddddd;
	--theme-color-1: rgb(220, 240, 255);
	--theme-color-2: rgb(190, 220, 250);
	--theme-color-3: rgb(110, 190, 255);
	--theme-nav-background: rgba(255, 255, 255, 0.5);
	--theme-footer-background: #f8f8f8;
	color-scheme: light;
}

html {
	font-size: 18px;
}

* {
	margin: 0;
	padding: 0;
	font-family: 'Open Sans Regular', sans-serif;
	line-height: calc(4 / 3);
	box-sizing: border-box;
}

body {
	color: var(--theme-text);
	background-color: var(--theme-background);
}

h1 {
	font-size: 2rem;
	font-weight: 100;
	line-height: 1;
	flex-grow: 1;
	font-family: 'Open Sans Light', sans-serif;
}

h1 a {
	text-decoration: none;
	font-family: 'Open Sans Light', sans-serif;
}

h2 {
	font-size: calc(7rem / 3);
}

h3 {
	font-size: 2rem;
}

h4 {
	font-size: calc(5rem / 3);
}

h5 {
	font-size: calc(4rem / 3);
}

h6 {
	font-size: 1rem;
}

h2, h3, h4, h5, h6,
h2 a, h3 a, h4 a, h5 a, h6 a {
	font-family: 'Open Sans Regular', sans-serif;
	text-decoration: none;
	word-break: break-word;
}

a, a:active, a:hover, a:visited {
	color: var(--theme-text);
}

ul {
	margin-left: calc(4rem / 3);
}

.wrapper {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1rem;
}

header {
	text-align: left;
	background-image: linear-gradient(30deg, var(--theme-color-1), var(--theme-color-2), var(--theme-color-3));
	padding: calc(7rem / 3) 0;
}

header div.wrapper {
	display: flex;
	flex-wrap: wrap;
}

.nav-bar {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}

.nav-item {
	display: block;
	overflow: visible;
	min-height: fit-content;
}

.nav-item a {
	display: block;
	padding: calc(2rem / 3);
	text-decoration: none;
}

.nav-item a:hover {
	background-color: var(--theme-nav-background);
	color: var(--theme-text);
}

#theme-switcher div,
#search div,
#rss div {
	fill: var(--theme-text);
	width: calc(4rem / 3);
	height: 1rem;
	padding: 0 0 calc(4rem / 3) 0;
}

#theme-switcher div svg,
#search div svg,
#rss div svg {
	vertical-align: middle;
}

img.header-image {
	width: 100%;
	max-height: 30vh;
	object-fit: cover;
}

pre {
	padding: calc(2rem / 3);
	margin: 1em 0;
	overflow-x: scroll;
	background-color: #252525 !important;
}

code * {
	font-family: 'Courier New', Courier, monospace;
	font-size: 16px;
}

/* The line numbers already provide some kind of left/right padding */
pre[data-linenos] {
  padding: 0;
}

pre table td {
  padding: 0;
}

/* The line number cells */
pre table td:nth-of-type(1) {
  text-align: center;
  padding-right: 1em;
  vertical-align: top;
  user-select: none;
  color: var(--theme-gray)
}

pre table {
  width: 100%;
  border-collapse: collapse;
}

pre table * {
	border: none;
}

article {
	border-bottom: 1px solid var(--theme-text);
	padding: calc(7rem / 3) 0;
}

article:last-child {
	border-bottom: none;
}

article p,
article blockquote {
	margin: calc(2rem / 3) 0;
}

article ul,
article ol,
article dl {
	margin: calc(2rem / 3) 0 calc(2rem / 3) calc(4rem / 3);
}

article p {
	max-width: 70ch;
	line-height: calc(4 / 3);
}

article blockquote {
	font-style: italic;
	font-size: calc(4rem / 3);
	margin-left: calc(2rem / 3);
	max-width: 70ch;
}

article img {
	max-width: 100%;
}

article p:has(> img) {
	max-width: 100%;
}

div.toc-container {
	margin-right: 0;
	padding: calc(2rem / 3);
	border-radius: 1rem;
}

ul.toc ul {
	margin: 0 0 0 calc(2rem / 3);
}

@media (min-width: 900px) {
	div.toc-container {
		float: right;
		max-width: 50%;
		margin-left: calc(2rem / 3);
	}
}

@media (max-width: 900px) {
	div.toc-container {
		float: none;
		max-width: 100%;
		margin-left: 0;
	}
}

table {
	max-width: 1000px;
	margin: 1rem 1rem;
	border-spacing: 0;
	border-collapse: collapse;
}

th,td {
	padding: calc(1rem / 3);
	border: 1px solid var(--theme-gray);
}

thead {
	font-weight: bold;
	background-color: var(--theme-gray);
	text-align: center;
}

a.tag {
	background-color: var(--theme-color-2);
	padding: calc(1rem / 3) calc(2rem / 3);
	margin: calc(1rem / 3) calc(1rem / 3) calc(1rem / 3) 0;
	fill: var(--theme-text);
	text-decoration: none;
	display: inline-block;
}

footer {
	background-color: var(--theme-footer-background);
	padding: calc(7rem / 3) 0 calc(7rem / 3) 0;
}

footer div.wrapper {
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
}

.footer-column {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 50%;
}

.footer-column:first-child p {
  margin-bottom: calc(2rem / 3);
}

@media (max-width: 900px) {
	.footer-column {
		flex-basis: 100%;
	}

	.footer-column:last-child {
		padding-top: calc(4rem / 3);
	}
}

.footer-column:first-child {
	padding-right: 1rem;
}

.footer-column ul {
	list-style-type: none;
	margin-left: 1rem;
}

.footer-column li {
	line-height: calc(5rem / 3);
}

.social-icon {
	max-width: calc(4rem / 3);
	max-height: calc(4rem / 3);
	vertical-align: middle;
	fill: var(--theme-text)
}