@font-face {
	font-family: "Fira Sans";
	src: url("/assets/fonts/firasans-regular-webfont.woff2") format("woff2"),
		url("/assets/fonts/firasans-regular-webfont.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Fira Sans";
	src: url("/assets/fonts/firasans-bold-webfont.woff2") format("woff2"),
		url("/assets/fonts/firasans-bold-webfont.woff") format("woff");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "Noto Serif Display";
	src: url("/assets/fonts/notoserifdisplay-extrabold-webfont.woff2")
			format("woff2"),
		url("/assets/fonts/nnotoserifdisplay-extrabold-webfont.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

/* 
  Much of this is sourced/taken from 
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/ 
*/
html {
	box-sizing: border-box;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}
* {
	margin: 0;
}
html,
body {
	height: 100%;
}
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	font-family: "Fira Sans", BlinkMacSystemFont, -apple-system, "Segoe UI",
		"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Droid Sans", "Helvetica Neue",
		"Helvetica", "Arial", sans-serif;
    /*
       'fi' not not displaying with fira sans
       https://stackoverflow.com/questions/42269783/combinations-of-letters-fi-and-fl-is-not-displayed-by-browsers
     */
	font-feature-settings: "liga" 0;
	color: var(--grey-dark);
}
button {
	color: var(--grey-dark);
}
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}
input,
button,
textarea,
select {
	font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6,
details {
	overflow-wrap: break-word;
	/* 
	Without this, the letters fl/fi would not appear using 
	Fira Sans as the font
	*/
	font-variant-ligatures: none;
}
* > h1 {
	font-family: "Noto Serif Display", serif;
}

/* 
  TODO: We wanna set a bunch more of our defaults here
    - Forms, Tables, Lists styles
    - Colors?
    - Font sizes
    - etc, etc
*/

/* 

  Links should have the same style as the theme

*/
a:visited {
	font-weight: 500;
	color: var(--cyan);
}
a {
	font-weight: 500;
	color: var(--purple);
}

:root {
	font-size: calc(0.5em + 1vw);
}

@media (min-width: 800px) {
	:root {
		font-size: 0.875em;
	}
}

@media (min-width: 1200px) {
	:root {
		font-size: 1.2em;
	}
}

body {
	background-color: var(--white-ter);
}

/* 

    COLOR THEMES

*/

body {
	--white-ter: #fbf1c7;
	--white: #f9f5d7;
	--turquoise: #458588;
	--green: #98971a;
	--grey-darker: #504945;
	--cyan: #076678;
	--yellow: #d79921;
	--purple: #b16286;
	--red: #cc241d;
	--grey-dark: hsl(0, 0%, 29%);
	--primary: var(--purple);
	--hover: var(--turquoise);
	--navlink: var(--purple);
	--accent: var(--green);
}

body.gruvbox {
	--white-ter: #fbf1c7;
	--white: #f9f5d7;
	--turquoise: #458588;
	--green: #98971a;
	--grey-darker: #504945;
	--cyan: #076678;
	--yellow: #d79921;
	--purple: #b16286;
	--red: #cc241d;
	--grey-dark: hsl(0, 0%, 29%);
	--primary: var(--purple);
	--hover: var(--turquoise);
	--navlink: var(--purple);
	--accent: var(--green);
}

@media (prefers-color-scheme: dark) {
	body {
		--white-ter: #343333;
		--white: #626264;
		--turquoise: #11a8cd;
		--green: #0dbc79;
		--grey-darker: #f2f2f2;
		--cyan: #4fc1ff;
		--yellow: #e9e9e9;
		--purple: #b267e6;
		--red: #cd3131;
		--grey-dark: var(--yellow);
		--primary: var(--yellow);
		--hover: var(--turquoise);
		--navlink: var(--yellow);
		--accent: var(--purple);
	}
}

body.booberry {
	--white-ter: #f2f2f2;
	--white: hsl(0, 0%, 100%, 1);
	--turquoise: #5ea4bc;
	--green: #888c03;
	--grey-darker: #7139bf;
	--cyan: #0468bf;
	--yellow: #bfa017;
	--purple: #7139bf;
	--red: #f2275d;
	--grey-dark: hsl(0, 0%, 29%, 1);
	--primary: var(--purple);
	--hover: var(--red);
	--navlink: var(--purple);
	--accent: var(--turquoise);
}

body.dark {
	--white-ter: #343333;
	--white: #626264;
	--turquoise: #11a8cd;
	--green: #0dbc79;
	--grey-darker: #f2f2f2;
	--cyan: #4fc1ff;
	--yellow: #e9e9e9;
	--purple: #b267e6;
	--red: #cd3131;
	--grey-dark: var(--yellow);
	--primary: var(--yellow);
	--hover: var(--turquoise);
	--navlink: var(--yellow);
	--accent: var(--purple);
}
/* 

    TYPEOGRAPHY

*/

body {
	--serif: "Noto Serif Display", serif;
	--sans-serif: "Fira Sans", Helvetica, sans-serif;
}

/* 

    ABOUT PAGE

*/
#profile-pic {
	border: 3px solid var(--primary);
	border-radius: 50%;
	width: 25em;
}

.roll-in-left {
	-webkit-animation: roll-in-left 0.6s ease-out both;
	animation: roll-in-left 0.6s ease-out both;
}

@media (prefers-reduced-motion) {
	.roll-in-left {
		-webkit-animation: none;
		animation: none;
	}
}

/* I should probably treat this like a blog post */
.text-header {
	margin-block: 0.5em;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-4-9 9:51:22
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation roll-in-left
 * ----------------------------------------
 */
@-webkit-keyframes roll-in-left {
	0% {
		-webkit-transform: translateX(-800px) rotate(-540deg);
		transform: translateX(-800px) rotate(-540deg);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0) rotate(0deg);
		transform: translateX(0) rotate(0deg);
		opacity: 1;
	}
}
@keyframes roll-in-left {
	0% {
		-webkit-transform: translateX(-800px) rotate(-540deg);
		transform: translateX(-800px) rotate(-540deg);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0) rotate(0deg);
		transform: translateX(0) rotate(0deg);
		opacity: 1;
	}
}

.about-resume-container {
	margin-top: 2em;
	background-color: var(--white);
	border-radius: 30px;
	display: flex;
	flex-direction: column;
}

.about-resume-container > * {
	margin-left: 1em;
	margin-right: 1em;
}

.about-resume-container > h3 {
	margin-top: 2em;
}

.about-resume-header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 2em 0 0 0;
}

.about-resume-title {
	font-family: Arial, Helvetica, sans-serif !important;
	font-weight: 700;
}

.about-resume-job-facts {
	margin: 1em 1em 1em 2em;
	list-style-type: disc;
}

.about-resume-title-container {
	display: flex;
	justify-content: space-between;
}

.about-contact-pane {
	font-size: 0.8em;
}
/* 

GENERIC CONTAINER

*/
.container-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.container-article {
	max-width: 100ch;
}

@media (max-width: 500px) {
	.container-article {
		max-width: 95%;
	}
}
/* 

    PALETTE

*/
.palette {
	width: 2.25rem;
	height: 2.25rem;
}
/* 

    PANEL

*/
:root {
	--arrow-offset: 35%;
}

@media (min-width: 300px) {
	:root {
		--arrow-offset: 68%;
	}
}

@media (min-width: 800px) {
	:root {
		--arrow-offset: 12%;
	}
}

@media (min-width: 1200px) {
	:root {
		--arrow-offset: 10%;
	}
}

.nav {
	display: inline-flex;
	min-width: 95vw;
	align-items: center;
	justify-content: center;
}

.nav > ul > li {
	display: inline-flex;
	padding: 1em 0.7em;
}

.nav-link {
	font-size: 2.25rem;
	font-weight: 600;
	color: var(--navlink);
	text-decoration: none;
}

.nav-link:visited {
	color: var(--navlink);
}

.nav-link--active {
	text-underline-offset: 0.3em;
	text-decoration: underline solid var(--navlink) 0.05em;
	-webkit-text-decoration: underline solid var(--navlink);
}

.nav-button {
	cursor: pointer;
	background-color: var(--white-ter);
	border: none;
}

.palette-dropdown {
	position: relative;
	top: 5px;
}

.dropdown-content {
	display: none;
	position: absolute;
	border: 3px solid var(--primary);
	border-radius: 5%;
	background-color: var(--white);
	min-width: 6em;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
}

@media (max-width: 500px) {
	.palette {
		margin-bottom: 1em;
	}

	.dropdown-content {
		min-width: 7em;
		right: 2.5px;
	}
}

/* 

  dropdown themes

*/
.theme-button {
	border: none;
	border-bottom: 1px solid var(--primary);
	background-color: var(--white-ter);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-width: 7em;
	cursor: pointer;
}

.theme-button--active h4::before {
	content: "* ";
}

.theme-button--active h4::after {
	content: " *";
}

.theme-selector {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-bottom: 5px;
}
.theme-selector h4 {
	margin-top: 0.2em;
}

.swing-in-top-fwd {
	-webkit-animation: swing-in-top-fwd 0.5s
		cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
	animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-4-8 18:34:1
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation swing-in-top-fwd
 * ----------------------------------------
 */
@-webkit-keyframes swing-in-top-fwd {
	0% {
		-webkit-transform: rotateX(-100deg);
		transform: rotateX(-100deg);
		-webkit-transform-origin: top;
		transform-origin: top;
		opacity: 0;
	}
	100% {
		-webkit-transform: rotateX(0deg);
		transform: rotateX(0deg);
		-webkit-transform-origin: top;
		transform-origin: top;
		opacity: 1;
	}
}
@keyframes swing-in-top-fwd {
	0% {
		-webkit-transform: rotateX(-100deg);
		transform: rotateX(-100deg);
		-webkit-transform-origin: top;
		transform-origin: top;
		opacity: 0;
	}
	100% {
		-webkit-transform: rotateX(0deg);
		transform: rotateX(0deg);
		-webkit-transform-origin: top;
		transform-origin: top;
		opacity: 1;
	}
}

/* 

INDEX PAGE

*/
.hero {
	display: flex;
	justify-content: center;
	align-items: center;
}

.column {
	display: flex;
}

.hero .column {
	margin: 2em;
	margin-inline: 5em;
}

.main-content {
	display: flex;
	justify-content: center;
	align-items: center;
}

@media (max-width: 500px) {
	.main-content {
		justify-content: center;
		align-items: center;
	}

	.main-content p {
		font-size: 2em;
	}

	.hero {
		flex-direction: column;
	}

	.hero .column {
		margin: 0.5em;
	}
}

.main-content p {
	text-align: center;
}

#jj {
	border: none;
	border-radius: 50%;
	background-color: var(--white);
}

#palette {
	width: 2.25rem;
}
/* 

    BLOG PAGE

*/
.blog-hero .column {
	margin: 2em;
}

.blog-hero {
	display: flex;
	justify-content: center;
	align-items: center;
}

.blog-column {
	flex-basis: 0;
	flex-grow: 1;
	flex-shrink: 1;
}

.container-blog {
	margin: 0 auto;
	max-width: 80ch;
}

.blog-list-box {
	border-top: 1px solid var(--grey-darker);
}

.blog-list-box ul {
	list-style-type: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-inline-start: 0;
	font-size: 1.5em;
}

.blog-list-title {
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 500px) {
	.container-blog {
		max-width: 95%;
	}

	.blog-hero .column {
		margin: 0.5em;
	}

	.blog-list-box {
		margin: 1.5em 0;
	}

	.blog-list-box ul {
		font-size: 1em;
	}
}

/* 

  BLOG TEMPLATES

*/

.blog-title {
	font-size: 2.5em;
}

.blog-subtitle {
	font-size: 1.25em;
	margin-bottom: 1em;
}

.blog-post-container {
	text-align: center;
}

.blog-post-content {
	display: inline-block;
	text-align: left;
	max-width: 80ch;
}

.blog-post-content p,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4,
.blog-post-content h5,
.blog-post-content table,
.blog-post-content details,
.blog-post-content div {
	margin-bottom: 1rem;
}

@media (max-width: 500px) {
	.blog-post-content {
		max-width: 95%;
	}
}

footer {
	padding-bottom: 1em;
}

.footnote hr {
	margin: 1em;
}
/* 

	404 

*/
#sad-face {
	font-size: 3em;
}
.error-msg {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 1em;
	min-height: 40%;
}
.footnote-content {
	display: none;
	position: absolute;
	border-radius: 0.5em;
	padding-inline: 1em;
	padding-top: 0.5em;
	background-color: var(--white-ter);
	min-width: 2em;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
	max-width: 35ch;
}
.footnote-btn {
	cursor: pointer;
	border: none;
	background-color: transparent;
}
.footnote-btn::before {
	content: "[";
	color: var(--purple);
	font-weight: bolder;
}
.footnote-btn::after {
	content: "]";
	color: var(--purple);
	font-weight: bolder;
}

/* previously hidden content will show via this class
 so, I'd like to keep this at the bottom to make sure
 it always appears if needed */
.open {
	display: block;
}