/*
     __            __
    / /\          / /\
   / /  \        / / /
  / / /\ \      / / /
 / / /\ \ \    / /  \  __
/_/ /  \_\ |  /_/ /\ \/ /\
\ \ \  / / |  \_\/\ \ \/ /
 \ \ \/ / /        \_\  /
  \ \ \/ /  __     / / /  __
   \_\__/  /_/\   /_/ /  /_/\
           \_\/   \_\/   \_\/

Copyright 2024-2025 Daniel Harlow.
I built this website on my own without any of that Squarespace/Webflow bullshit because designers that can't code are chumps.

*/
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap');
:root{
	--background-color: #141618; /* black */
	--text-color-main: ghostwhite; /* white */
	--text-color-secondary: #666666; /* gray */
	--link-color-primary: dodgerblue; /* blue */
	--link-color-secondary: hotpink; /* pink */
	--border-color: #333333; /* dark gray */
}
/*
gold yellow #ffc300
neon green #adff00
*/
*{box-sizing: border-box;}
html{
	font-family: 'Albert Sans', sans-serif;
	font-size: 16pt;
	scroll-behavior: smooth;
}
body{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 0 2rem;
	margin: 0;
	color: var(--text-color-main);
	background: var(--background-color);
	background-size: cover;
	background-attachment: fixed;
	zoom: 1;
	transition: color 0.5s, background-color 0.5s;
}
h1{
	font-style: normal;
	font-weight: 900;
	font-size: 4rem;
	line-height: 4rem;
	margin: 0 0 2rem 0;
}
h2{
	font-style: normal;
	font-weight: 700;
	font-family: monospace;
	font-size: 2rem;
	line-height: 3rem;
	margin: 0 0 2rem 0;
}
p{
	font-style: normal;
	font-weight: 300;
	font-size: 1.1rem;
	line-height: 2rem;
	letter-spacing: 0.5pt;
	margin-bottom: 1rem;
	display: block;
}
p.tag{margin: 3rem 0 0 0;}
p.tag a{color: var(--link-color-secondary);text-decoration: none;}
span{color: inherit;}
/* Links */
a{
	color: var(--link-color-primary);
	text-decoration: none;
	font-weight: 400;
	margin: 0;
}
a:hover{text-decoration:none;}
/* Navigation */
nav{
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background: rgba(var(--background-color),0.64);
	display: flex;
	flex-direction: column;
	align-items: center;
	position: fixed;
	padding: 1rem 2rem;
	width: 100%;
}
.nav-left{float:left}
.nav-right{float:right}
.nav-home-link{
	text-decoration: none;
	font-style: normal;
	font-size: 1.5rem;
	line-height: 1.5rem;
}
.nav-text-link{
	text-decoration: none;
	font-style: inherit;
	font-weight: 700;
	font-size: 1rem;
	margin-left: 1rem;
	font-family: monospace;
	color: var(--text-color-main) !important;
}
footer{
	color: var(--text-color-secondary);
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 300;
	line-height: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin: 0 0 2rem 0;
}
footer a{margin-right:1rem}
/* Content */
main{
	margin:7.5rem 0 2.5rem 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%; 
}
.block{
	display:block;
	padding: 6rem 0;
}
.container{
	max-width:1600px;
	padding:0 0;
	width:100%;
}
.border{
	border-bottom: 1px solid var(--border-color);
}
.gray{
	color: var(--text-color-secondary);
	font-style:italic;
	margin-left:1rem;
}
.BTT-link{display:none}
.intro-block{
	display:inline-flex;
	margin-bottom: 3rem;
	align-items: center;
}
.intro-block .dan{
	border-radius:100%;
	pointer-events:none;
	max-width:33.3%;
}
.intro-block .titles{display:block;padding-left: 3rem;}
/* Platform-specific */
@media screen and (max-width: 1440px) {
	main{margin:5rem 0 2.5rem 0;}
	.container{max-width:1280px;padding:0 0;width:100%;}
	h1{
		font-size: 2.75rem !important;
		line-height: 2.75rem !important;
		margin:0rem 0 2rem 0;
	}
	h2{
		font-size: 1.5rem !important;
		line-height: 2.5rem !important;
		margin: 0 0 1.5rem 0;
	}
	p{
		font-size: 1rem !important;
		line-height: 2rem !important;
		margin: 0 0 1rem 0;
	}
	p.tag{margin: 1rem 0 0 0;}
	.BTT-link{display:none}
	.intro-block{
		display:inline-flex;
		margin-bottom: 2rem;
		align-items: center;
	}
	.intro-block .dan{
		border-radius:100%;
		pointer-events:none;
		max-width:33.3%;
	}
	.intro-block .titles{padding-left: 2rem;}
}
@media screen and (max-width: 800px) {
	body{padding:0 1rem}
	nav{padding:1.25rem 1rem}
	main{margin:7.5rem 0 2.5rem 0;}
	.container{max-width:752px;padding: 0 0rem}
	h1{
		font-size: 2.25rem !important;
		line-height: 2.25rem !important;
		margin:2.25rem 0 1.25rem 0;
	}
	h2{
		font-size: 1.25rem !important;
		line-height: 1.75rem !important;
		margin: 0 0 1rem 0;
	}
	p{
		font-size: 0.75rem !important;
		line-height: 1.5rem !important;
		margin: 0 0 1rem 0;
	}
	p.tag{margin: 2rem 0 0 0;}
	img{width:100% !important;display:block;}
	footer .nav-left,footer .nav-right{float:none;display: block;}
	.block{padding:4rem 0 3rem 0 !important}
	.BTT-link{
		display:block;
		padding-bottom: 2rem;
	}
	.intro-block{
		display:block;
		margin-bottom: 1rem;
	}
	.intro-block .dan{
		border-radius:100%;
		pointer-events:none;
		max-width:100%;
	}
	.intro-block .titles{padding-left: 0rem;}
}