@import url("/resources/CSS/gruvbox-themes.css");
@import url("/resources/CSS/fonts.css");
/* import the ClosedLess CSS styles */
@import url("/resources/CSS/closedless.css");
/* import custom theme style */
@import url("/~theonepath/css/theme.css");

/* override attributes from the default class */

header div { background-color: var(--purple-bg3); }
nav { background-color: var(--purple-bg1); }
div.nav-bar { background-color: var(--purple-bg4); }
main { background-color: var(--gruv-purple-alt-2); }
main section { background-color: transparent; }
hr { border-color: var(--gruv-gray); }
img { width: 100%; margin: 1em 0; box-shadow: 1px 1px 8px 2px var(--gruv-gray-alt-2); }
	
ol li {
	list-style: disc;
	list-style-position: inside;
	margin: .25em 0;
}

blockquote:not(div.footnote blockquote) {
	border-inline-start: 3px solid;
	border-color: var(--gruv-aqua-alt-1);
	padding-inline-start: 2em;
	opacity: .8;
	font-style: italic;
	font-weight: 600;
}


@media only screen and (min-width: 601px) {
	.about-header h2 {
		padding: 0;
		margin: 0;
		font-size: 18pt;
		color: var(--gruv-gray);
	}

}

@media only screen and (max-width: 600px) {
	main section { padding: 0 .25in; }
}

@media only screen and (min-width: 801px) {
	main section div.about-header {
		position: relative;
		display: grid;
		grid-template-columns: auto auto;
		width: 100%;
		padding: 1em 0;
		justify-content: space-between;
		align-items: center;
		text-align: center;
	}
}

/*
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body, h1, h2, h3, h4, h5, h6, p {
	font-family: 'Courier New', Courier, monospace;
	font-weight: 600;
	color: var(--gruv-fg1);
	letter-spacing: 1.2pt;
}

.header-fixed-inplace {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	z-index: 1000;
	width: 100%;
	text-align: end;
	font-size: 24pt;
	padding: .5em 0;
	color: var(--gruv-fg1);
}

.content div {
	display: block;
	margin: 2em .5em;
}

.flexy-centre {
	position: relative;
	display: inline-flex;
	width: 100%;
	text-align: center;
	align-items: center;
	justify-content: space-around;
}

main {
	position: relative;
	display: inline-block;
	width: 100%;
	min-height: 100vh;
	text-align: center;
	background-color: var(--gruv-purple);
}

#parallax {
	position: fixed !important;
	width: 100%;
	height: 100vh;
	background-color: inherit;
}

#page-container {
	position: absolute !important;
	top: 100vh;
	width: 100%;
	padding: 0 3em;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	z-index: 10;
}

#page-data {
	height: 100vh;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	background-color: var(--gruv-fg2);
}

.portfolio {
	background-color: var(--gruv-aqua);
}

.navbar-grid {
	display: grid;
	grid-template-columns: 1fr auto;
	text-align: left;
}

a {
	text-decoration: none;
	color: inherit;
	transition: color 500ms ease 0s;
}

a:hover {
	color: var(--gruv-aqua-l) !important; /* gruvbox - aqua_14 (dark mode) 
	transition: color 500ms;
}

.nav-link a {
	margin-right: 1em;
}

.nf-fa-moon_o:before {
	content: "\f186";
}

.nf-fa-arrow_up:before {
	content: "\f062";
}

#preload {
	position: fixed;
    display: flex;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100vh;
    opacity: 1;
}

.github-avatar {
	width: 120px;
	height: 120px;
	margin-bottom: 5em;
	border-radius: 10px;
}

#dark-toggle {
	padding: 0 .75em;
}

.cursor-animate{
    animation: blinkTextCursor 800ms steps(50) infinite;
}

.back-to-top {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 900;
	margin: 1rem;
	color: var(--gruv-bg1);
}

footer {
	/* position: fixed;
	bottom: 0; 
	width: 100%;
	height: min-content;
	padding: 0.5rem;
	text-align: center;
	background-color: var(--gruv-fg3);
}

footer p {
	color: var(--gruv-bg1);
}

.button {
	position: relative;
	border: none;
	border-radius: 5px;
	text-decoration: none;
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 1.2pt;
	padding: 1em 0;
	margin: 0.75rem;
	color: var(--gruv-fg1) !important;
	background-color: var(--gruv-aqua);
	transition: color 500ms, background-color 500ms;
}

.button:hover {
	
	color: var(--gruv-bg2) !important;
	background-color: var(--gruv-aqua-l);
	transition: all 500ms;
}

.text-purple {
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
	color:rgb(179, 34, 135) !important;
}

.blog-content p {
	margin-bottom: 1.6em;
}


hr {
	margin: 3em 0;
	border: solid 1px var(--gruv-gray);
}

ul li {
	list-style: none;
}

ol li {
	list-style: disc;
	margin: 1em 0;
	margin-left: 3em;
}

ul li ol li {
	list-style: decimal;
	padding-left: 1em;
}

code {
	font-size: 10pt;
	font-family: 'Courier New', Courier, monospace;
	background-color: var(--gruv-purple-alt-2);
	border-radius: 4px;
	padding: 0 0.25em;
}

details pre {
	background-color: var(--gruv-purple-alt-2);
	padding: 0 2em;
	overflow-x: scroll;
	overflow-y: hidden;
	border: 2px solid var(--gruv-purple-l);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

details summary {
	border: 2px solid var(--gruv-purple-l);
	padding: 0.5em 1em;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

pre code { 
	background-color: transparent;
}

/* Custom scrollbar for code snippets 
   NOTE: remember webkit is only available in Blink
   browsers or Webkit-based ones.

details pre::-webkit-scrollbar {
	width: inherit;
	height: 8px;
	background-color: transparent;
}

details pre::-webkit-scrollbar-thumb {
	background-color: var(--gruv-blue);
}

/*
pre code::before {
	content: "Bash";
	font-size: 10pt;
	font-family: 'Courier New', Courier, monospace;
	color: var(--gruv-aqua-l);
}



@media only screen and (min-width: 601px) {
	.nav-link {
		position: relative;
		display: inline-flex;	
	}

	#nav-container {
		position: relative;
		display: inline-flex;
		padding: 0 .5em;
	}

	#nav-container div {
		margin-right: 1em;
	}

	#nav-container hr {
		display: none;
	}

	.grid-layout {
		position: relative;
		display: grid;
		grid-template-columns: 33.33333% 33.33333% 33.33333%;
		width: 100%;
		height: 75vh;
		padding: 2em;
	}

	.card-third {
		position: relative;
		display: inline-flex;
		justify-content: space-around;
		align-items: center;
		/* width: 100%; 
		height: 100%;
	}

	.card-container {
		position: relative;
		display: grid;
		grid-template-rows: auto 1fr auto;
		/* width: 100%; 
		height: 100%;
		margin: 0 1em;
		font-size: 11pt;
		justify-content: space-around;
		border-radius: 10px;
		background-color: var(--gruv-blue-l);
		box-shadow: 1px 1px 4px 2px #356c6e;
	}

	.card-container div {
		position: relative;
		display: flex;
		/* width: 100%; 
		padding: 1em 2em;
		justify-content: space-around;
		align-items: center;
		text-align: center;
	}

	.card-content-top {
		margin: 0 .75em;
		margin-top: .75em;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		background-color: var(--gruv-blue);
	}

	.card-content-bottom {
		margin: 0 .75em;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		background-color: var(--gruv-blue); 
	}

	.blog-container {
		margin-top: 2rem;
		margin-bottom: 5rem;
		width: 75%;
		text-align: start;
		font-size: 12pt;
	}

	.blog-title-container {
		position: relative;
		display: grid;
		grid-template-columns: 1fr auto;
		margin-bottom: 1em;
	}
}

@media only screen and (max-width: 600px) {
	body, h1, h2, h3, h4, h5, h6, p {
		font-weight: 800 !important;
	}

	main {
		padding: 0 1rem;
	}

	.nf-mdi-menu:before {
		content: "\f85b";
	}

	#nav-menu {
		padding: 0 .5em;
	}

	/* set the font family back 
	#nav-container div {
		font-family: 'Courier New', Courier, monospace;
		font-weight: 600;
		color: var(--gruv-fg1);
		letter-spacing: 1.2pt;
		padding: .25em .5em;
	}

	#nav-container a {
		text-decoration: none;
		cursor: none;
	}

	#nav-container hr {
		position: relative;
		width: 90%;
		margin: 0 auto;
		border: 1px solid var(--gruv-aqua-l);
	}

	.nav-link-hide div {
		display: none;
		overflow-x: hidden;
		transform: translateX(-150%);
		transition: all 500ms ease-in;	
	}

	.nav-link-show div {
		margin: .5em 0;
		transform: translateX(0%);
		transition: all 500ms ease-in;	
	}

	.nav-container {
		position: fixed;
		z-index: 1000;
		width: 100% !important;
		padding: .5em 0;
		font-size: 18pt;
		background-color: var(--gruv-aqua);
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
	}

	.nav-container-hidden {
		display: none;
		overflow-x: hidden;
	}

	.blog-container {
		margin: 0 2rem;
		margin-bottom: 5rem;
		width: 100%;
		text-align: start;
		font-size: 12pt;
	}

	.blog-title-container {
		position: relative;
		display: grid;
		grid-template-rows: auto auto;
		margin-bottom: .5em;
	}

	.blog-title-container h2:nth-child(2) {
		text-align: right;
	}
}*/