:root{
	--text-color: #BBB;
	--alternate-text-color: #DDD;
	--text-size: 22px;
	--text-line-height: calc(var(--text-size) * 1.25);
	--text-letter-spacing: 0.125px;
	--font-family: "Crimson Pro";

	--background-color: #000;
	--second-background-color: #141414;
	--second-alternate-background-color: #181818;

	--accent-color-one: #2D2;
	--alternate-accent-color-one: #4F4;
	--accent-color-two: #4AD;
	--alternate-accent-color-two: #5CF;

	--code-background-color: var(--second-background-color);
	--code-color: var(--alternate-text-color);
	--code-text-size: 1rem;
	--code-font-family: monospace;
	--code-font-weight: normal;
	--code-padding: 0.25rem 0.5rem;

	--quote-text-color: var(--alternate-text-color);

	--document-width: 1200px;
	--hyperlink-color: var(--accent-color-one);
	--hyperlink-hover-color: var(--alternate-accent-color-one);

	--hyperlink-target-color-start: var(--accent-color-one);
	--hyperlink-target-color-end: var(--accent-color-two);
	--hyperlink-target-duration: 5s;

	--header-background-color: var(--second-background-color);

	--main-nav-links-color: var(--accent-color-two);
	--main-nav-links-hover-color: var(--alternate-accent-color-two);
	--main-nav-link-size: calc(var(--text-size) * 1.125);
	--main-nav-link-spacing: calc(var(--text-size) * 1.5);
	--main-nav-link-font-family: "Charka Petch";

	--heading-color: var(--alternate-text-color);
	--heading-font-family: "Charka Petch";

	--disclaimer-text-text-color: #E11;
	--disclaimer-text-text-size: 1.375rem;

	--footer-background-color: var(--second-background-color);
	--footer-text-size: calc(var(--text-size) * 0.75);

	--footer-text-color: var(--text-color);
	--social-icon-max-size: calc(var(--text-size) * 1.15);

	--table-of-contents-heading-margin: 3rem 0 1rem;

	--table-of-contents-left-margin: 0;
	
	--table-of-contents-item-top-gap: 0.125rem;
	--table-of-contents-level-indentation: 1.5rem;
	--table-of-contents-level-change-gap: 1rem;
}

html,
body{
	margin: 0;
	padding: 0;
	min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6{
	color: var(--heading-color);
	font-family: var(--heading-font-family);
	font-weight: normal;
}

h4,
h5,
h6{
	margin-bottom: 0.5rem;
}

a{
	color: var(--hyperlink-color);
	text-decoration: none;
}

a:hover{
	color: var(--hyperlink-hover-color);
	text-decoration: underline;
}

img{
	max-width: 100%;
}

svg{
	fill: var(--text-color);
}

code{
	background: var(--code-background-color);
	color: var(--code-color);
	display: inline-block;
	font-family: var(--code-font-family);
	font-size: var(--code-text-size);
	font-weight: var(--code-font-weight);
	padding: var(--code-padding);
	white-space: nowrap;
	overflow-x: scroll;
	width: fit-content;
	max-width: 100%;
	vertical-align: middle;
}

code code{
	padding-left: 0;
	padding-right: 0;
}

em,
strong{
	color: var(--alternate-text-color);
}

q{
	color: var(--quote-text-color);
	font-style: italic;
}

q:before,
q:after{
	content: '';
}

@keyframes rainbow_animation{
	0%{
		background-position: 0 0;
	}

	100%{
		background-position: 200% 0;
	}
}

.rainbow_text{
	animation-name: rainbow_animation;
	animation-duration: 3.5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet, red);
	background-size: 200% 100%;
	background-clip: text;
	color: transparent;
	width: fit-content;
}

.white_border{
	border: 1px solid var(--alternate-text-color);
}

#page{
	background: var(--background-color);
	color: var(--text-color);
	font-family: var(--font-family);
	font-size: var(--text-size);
	line-height: var(--text-line-height);
	letter-spacing: var(--text-letter-spacing);
	min-height: 100vh;
	width: 100%;

	display: flex;
	flex-direction: column;
}

#page h1,
#page h2,
#page h3,
#page h4,
#page h5,
#page h6{
	line-height: normal;
}

#page > div[id]{
	width: 100%;
}

#header_container{
	background: var(--header-background-color);
}

#disclaimer{
	font-weight: 700;
}

#disclaimer_text{
	color: var(--disclaimer-text-text-color);
	font-size: var(--disclaimer-text-text-size);
}

#body_container{
	flex-grow: 1;
}

#footer_container{
	background: var(--footer-background-color);
	font-size: var(--footer-text-size);
}


header,
main,
footer{
	max-width: var(--document-width);
	width: calc(100% - calc(var(--text-size) * 3));
	margin: 0 auto;
	padding: var(--text-size) calc(var(--text-size) * 1.5);
}

footer{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: calc(var(--text-size) * 1.25);

	color: var(--footer-text-color);
	max-width: 100%;
}

#main_nav{
	display: flex;
	flex-direction: row;
	gap: 0 var(--main-nav-link-spacing);
}

#main_nav a{
	color: var(--main-nav-links-color);
	font-family: var(--main-nav-link-font-family);
	font-size: var(--main-nav-link-size);
	text-decoration: none;
}

#main_nav a:hover{
	color: var(--main-nav-links-hover-color);
	text-decoration: underline;
}

main > article:not(:first-child){
	margin-top: calc(var(--text-size) * 3);
}

#rants_container{
	display: grid;
	grid-template-columns: max-content auto;
	gap: 1.5rem 0.5rem;
	margin-bottom: 3rem;
}

.rant{
	display: grid;
	grid-column: 1 / span 2;
	grid-template-columns: subgrid;
}

.external_rant{
	display: block;
}

.external_rant + .external_rant{
	margin-top: 1.5rem;
}

.rant,
.external_rant{
	margin-left: 2rem;
}

.rant > a,
.external_rant{
	width: fit-content;
}

.table_of_contents_heading{
	margin: var(--table-of-contents-heading-margin);
}

.table_of_contents{
	margin-left: var(--table-of-contents-left-margin);
}

.table_of_contents_item:not(:first-child){
	margin-top: var(--table-of-contents-item-top-gap);
}

.table_of_contents_item_level_1{
	margin-left: var(--table-of-contents-level-indentation);
}

.table_of_contents_item_level_2{
	margin-left: calc(var(--table-of-contents-level-indentation) * 2);
}

.table_of_contents_item_level_3{
	margin-left: calc(var(--table-of-contents-level-indentation) * 3);
}

.table_of_contents_item_level_1 + .table_of_contents_item_level_0,
.table_of_contents_item_level_2 + .table_of_contents_item_level_1,
.table_of_contents_item_level_3 + .table_of_contents_item_level_2{
	margin-top: var(--table-of-contents-level-change-gap);
}

.table_of_contents_item_level_2 + .table_of_contents_item_level_0,
.table_of_contents_item_level_3 + .table_of_contents_item_level_1{
	margin-top: calc(var(--table-of-contents-level-change-gap) * 2);
}

.table_of_contents_item_level_3 + .table_of_contents_item_level_0{
	margin-top: calc(var(--table-of-contents-level-change-gap) * 3);
}


article[id]:target > h2{
	animation-duration: var(--hyperlink-target-duration);
	animation-name: section_linked;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

#social_icons{
	display: flex;
	flex-direction: row;
	align-items: center;

	gap: calc(var(--text-size) * 1.5);
}

#social_icons img{
	height: var(--social-icon-max-size);
}

#copyleft > p{
	margin: 0;
}

@media (max-width: 800px){
	footer{
		flex-direction: column;
		text-align: center;
	}
}

@keyframes section_linked{
	from {
		text-shadow: var(--hyperlink-target-color-start) 0.25rem 0 1.5rem;
	}

	to {
		text-shadow: var(--hyperlink-target-color-end) -0.25rem 0 1.5rem;
	}
}