/*!
Theme Name: MyPortfolio
Theme URI: http://myportfolio.com/
Author: Mayibonbwe Craig
Author URI: http://myportfolio.com/
Description: A custom portfolio theme built with _s, tailored to showcase my creative development work with modern web technologies.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: myportfolio
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme is a custom-built portfolio website theme, based on the _s starter theme, featuring interactive animations, dynamic content, and modern web technologies.

_S is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap');

@layer base {
	html {
		line-height: 1.15;
		-webkit-text-size-adjust: 100%;
	}
	
	/* Sections
		 ========================================================================== */
	
	/**
	 * Remove the margin in all browsers.
	 */
	body {
		margin: 0;
	}
	
	/**
	 * Render the `main` element consistently in IE.
	 */
	main {
		display: block;
	}
	
	/**
	 * Correct the font size and margin on `h1` elements within `section` and
	 * `article` contexts in Chrome, Firefox, and Safari.
	 */
	h1 {
		font-size: 2em;
		margin: 0.67em 0;
	}
	
	/* Grouping content
		 ========================================================================== */
	
	/**
	 * 1. Add the correct box sizing in Firefox.
	 * 2. Show the overflow in Edge and IE.
	 */
	hr {
		box-sizing: content-box;
		height: 0;
		overflow: visible;
	}
	
	/**
	 * 1. Correct the inheritance and scaling of font size in all browsers.
	 * 2. Correct the odd `em` font sizing in all browsers.
	 */
	pre {
		font-family: monospace, monospace;
		font-size: 1em;
	}
	
	/* Text-level semantics
		 ========================================================================== */
	
	/**
	 * Remove the gray background on active links in IE 10.
	 */
	a {
		background-color: transparent;
	}
	
	/**
	 * 1. Remove the bottom border in Chrome 57-
	 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
	 */
	abbr[title] {
		border-bottom: none;
		text-decoration: underline;
		text-decoration: underline dotted;
	}
	
	/**
	 * Add the correct font weight in Chrome, Edge, and Safari.
	 */
	b,
	strong {
		font-weight: bolder;
	}
	
	/**
	 * 1. Correct the inheritance and scaling of font size in all browsers.
	 * 2. Correct the odd `em` font sizing in all browsers.
	 */
	code,
	kbd,
	samp {
		font-family: monospace, monospace;
		font-size: 1em;
	}
	
	/**
	 * Add the correct font size in all browsers.
	 */
	small {
		font-size: 80%;
	}
	
	/**
	 * Prevent `sub` and `sup` elements from affecting the line height in
	 * all browsers.
	 */
	sub,
	sup {
		font-size: 75%;
		line-height: 0;
		position: relative;
		vertical-align: baseline;
	}
	
	sub {
		bottom: -0.25em;
	}
	
	sup {
		top: -0.5em;
	}
	
	/* Embedded content
		 ========================================================================== */
	
	/**
	 * Remove the border on images inside links in IE 10.
	 */
	img {
		border-style: none;
	}
	
	/* Forms
		 ========================================================================== */
	
	/**
	 * 1. Change the font styles in all browsers.
	 * 2. Remove the margin in Firefox and Safari.
	 */
	button,
	input,
	optgroup,
	select,
	textarea {
		font-family: inherit;
		font-size: 100%;
		line-height: 1.15;
		margin: 0;
	}
	
	/**
	 * Show the overflow in IE.
	 * 1. Show the overflow in Edge.
	 */
	button,
	input {
		overflow: visible;
	}
	
	/**
	 * Remove the inheritance of text transform in Edge, Firefox, and IE.
	 * 1. Remove the inheritance of text transform in Firefox.
	 */
	button,
	select {
		text-transform: none;
	}
	
	/**
	 * Correct the inability to style clickable types in iOS and Safari.
	 */
	button,
	[type="button"],
	[type="reset"],
	[type="submit"] {
		-webkit-appearance: button;
	}
	
	/**
	 * Remove the inner border and padding in Firefox.
	 */
	button::-moz-focus-inner,
	[type="button"]::-moz-focus-inner,
	[type="reset"]::-moz-focus-inner,
	[type="submit"]::-moz-focus-inner {
		border-style: none;
		padding: 0;
	}
	
	/**
	 * Restore the focus styles unset by the previous rule.
	 */
	button:-moz-focusring,
	[type="button"]:-moz-focusring,
	[type="reset"]:-moz-focusring,
	[type="submit"]:-moz-focusring {
		outline: 1px dotted ButtonText;
	}
	
	/**
	 * Correct the padding in Firefox.
	 */
	fieldset {
		padding: 0.35em 0.75em 0.625em;
	}
	
	/**
	 * 1. Correct the text wrapping in Edge and IE.
	 * 2. Correct the color inheritance from `fieldset` elements in IE.
	 * 3. Remove the padding so developers are not caught out when they zero out
	 *		`fieldset` elements in all browsers.
	 */
	legend {
		box-sizing: border-box;
		color: inherit;
		display: table;
		max-width: 100%;
		padding: 0;
		white-space: normal;
	}
	
	/**
	 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
	 */
	progress {
		vertical-align: baseline;
	}
	
	/**
	 * Remove the default vertical scrollbar in IE 10+.
	 */
	textarea {
		overflow: auto;
	}
	
	/**
	 * 1. Add the correct box sizing in IE 10.
	 * 2. Remove the padding in IE 10.
	 */
	[type="checkbox"],
	[type="radio"] {
		box-sizing: border-box;
		padding: 0;
	}
	
	/**
	 * Correct the cursor style of increment and decrement buttons in Chrome.
	 */
	[type="number"]::-webkit-inner-spin-button,
	[type="number"]::-webkit-outer-spin-button {
		height: auto;
	}
	
	/**
	 * 1. Correct the odd appearance in Chrome and Safari.
	 * 2. Correct the outline style in Safari.
	 */
	[type="search"] {
		-webkit-appearance: textfield;
		outline-offset: -2px;
	}
	
	/**
	 * Remove the inner padding in Chrome and Safari on macOS.
	 */
	[type="search"]::-webkit-search-decoration {
		-webkit-appearance: none;
	}
	
	/**
	 * 1. Correct the inability to style clickable types in iOS and Safari.
	 * 2. Change font properties to `inherit` in Safari.
	 */
	::-webkit-file-upload-button {
		-webkit-appearance: button;
		font: inherit;
	}
	
	/* Interactive
		 ========================================================================== */
	
	/*
	 * Add the correct display in Edge, IE 10+, and Firefox.
	 */
	details {
		display: block;
	}
	
	/*
	 * Add the correct display in all browsers.
	 */
	summary {
		display: list-item;
	}
	
	/* Misc
		 ========================================================================== */
	
	/**
	 * Add the correct display in IE 10+.
	 */
	template {
		display: none;
	}
	
	/**
	 * Add the correct display in IE 10.
	 */
	[hidden] {
		display: none;
	}
	
	/* Box sizing
	--------------------------------------------- */
	
	/* Inherit box-sizing to more easily change it's value on a component level.
	@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	*,
	*::before,
	*::after {
		box-sizing: inherit;
	}
	
	html {
		box-sizing: border-box;
	}
	
	/*--------------------------------------------------------------
	# Base
	--------------------------------------------------------------*/
	
	/* Typography
	--------------------------------------------- */
	body,
	button,
	input,
	select,
	optgroup,
	textarea {
		color: #404040;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
		font-size: 1rem;
		line-height: 1.5;
	}
	
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		clear: both;
	}
	
	p {
		margin-bottom: 1.5em;
	}
	
	dfn,
	cite,
	em,
	i {
		font-style: italic;
	}
	
	blockquote {
		margin: 0 1.5em;
	}
	
	address {
		margin: 0 0 1.5em;
	}
	
	pre {
		background: #eee;
		font-family: "Courier 10 Pitch", courier, monospace;
		line-height: 1.6;
		margin-bottom: 1.6em;
		max-width: 100%;
		overflow: auto;
		padding: 1.6em;
	}
	
	code,
	kbd,
	tt,
	var {
		font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	}
	
	abbr,
	acronym {
		border-bottom: 1px dotted #666;
		cursor: help;
	}
	
	mark,
	ins {
		background: #fff9c0;
		text-decoration: none;
	}
	
	big {
		font-size: 125%;
	}
	
	/* Elements
	--------------------------------------------- */
	body {
		background: #fff;
	}
	
	hr {
		background-color: #ccc;
		border: 0;
		height: 1px;
		margin-bottom: 1.5em;
	}
	
	ul,
	ol {
		margin: 0 0 1.5em 3em;
	}
	
	ul {
		list-style: disc;
	}
	
	ol {
		list-style: decimal;
	}
	
	li > ul,
	li > ol {
		margin-bottom: 0;
		margin-left: 1.5em;
	}
	
	dt {
		font-weight: 700;
	}
	
	dd {
		margin: 0 1.5em 1.5em;
	}
	
	/* Make sure embeds and iframes fit their containers. */
	embed,
	iframe,
	object {
		max-width: 100%;
	}
	
	img {
		height: auto;
		max-width: 100%;
	}
	
	figure {
		margin: 1em 0;
	}
	
	table {
		margin: 0 0 1.5em;
		width: 100%;
	}
	
	/* Links
	--------------------------------------------- */
	a {
		color: #4169e1;
	}
	
	a:visited {
		color: #800080;
	}
	
	a:hover,
	a:focus,
	a:active {
		color: #191970;
	}
	
	a:focus {
		outline: thin dotted;
	}
	
	a:hover,
	a:active {
		outline: 0;
	}
	
	/* Forms
	--------------------------------------------- */
	button,
	input[type="button"],
	input[type="reset"],
	input[type="submit"] {
		border: 1px solid;
		border-color: #ccc #ccc #bbb;
		border-radius: 3px;
		background: #e6e6e6;
		color: rgba(0, 0, 0, 0.8);
		line-height: 1;
		padding: 0.6em 1em 0.4em;
	}
	
	button:hover,
	input[type="button"]:hover,
	input[type="reset"]:hover,
	input[type="submit"]:hover {
		border-color: #ccc #bbb #aaa;
	}
	
	button:active,
	button:focus,
	input[type="button"]:active,
	input[type="button"]:focus,
	input[type="reset"]:active,
	input[type="reset"]:focus,
	input[type="submit"]:active,
	input[type="submit"]:focus {
		border-color: #aaa #bbb #bbb;
	}
	
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	input[type="range"],
	input[type="date"],
	input[type="month"],
	input[type="week"],
	input[type="time"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="color"],
	textarea {
		color: #666;
		border: 1px solid #ccc;
		border-radius: 3px;
		padding: 3px;
	}
	
	input[type="text"]:focus,
	input[type="email"]:focus,
	input[type="url"]:focus,
	input[type="password"]:focus,
	input[type="search"]:focus,
	input[type="number"]:focus,
	input[type="tel"]:focus,
	input[type="range"]:focus,
	input[type="date"]:focus,
	input[type="month"]:focus,
	input[type="week"]:focus,
	input[type="time"]:focus,
	input[type="datetime"]:focus,
	input[type="datetime-local"]:focus,
	input[type="color"]:focus,
	textarea:focus {
		color: #111;
	}
	
	select {
		border: 1px solid #ccc;
	}
	
	textarea {
		width: 100%;
	}
	
	/*--------------------------------------------------------------
	# Layouts
	--------------------------------------------------------------*/
	
	/*--------------------------------------------------------------
	# Components
	--------------------------------------------------------------*/
	
	/* Navigation
	--------------------------------------------- */
	.main-navigation {
		display: block;
		width: 100%;
	}
	
	.main-navigation ul {
		display: none;
		list-style: none;
		margin: 0;
		padding-left: 0;
	}
	
	.main-navigation ul ul {
		box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
		float: left;
		position: absolute;
		top: 100%;
		left: -999em;
		z-index: 99999;
	}
	
	.main-navigation ul ul ul {
		left: -999em;
		top: 0;
	}
	
	.main-navigation ul ul li:hover > ul,
	.main-navigation ul ul li.focus > ul {
		display: block;
		left: auto;
	}
	
	.main-navigation ul ul a {
		width: 200px;
	}
	
	.main-navigation ul li:hover > ul,
	.main-navigation ul li.focus > ul {
		left: auto;
	}
	
	.main-navigation li {
		position: relative;
	}
	
	.main-navigation a {
		display: block;
		text-decoration: none;
	}
	
	/* Small menu. */
	.menu-toggle,
	.main-navigation.toggled ul {
		display: block;
	}
	
	@media screen and (min-width: 37.5em) {
	
		.menu-toggle {
			display: none;
		}
	
		.main-navigation ul {
			display: flex;
		}
	}
	
	.site-main .comment-navigation,
	.site-main
	.posts-navigation,
	.site-main
	.post-navigation {
		margin: 0 0 1.5em;
	}
	
	.comment-navigation .nav-links,
	.posts-navigation .nav-links,
	.post-navigation .nav-links {
		display: flex;
	}
	
	.comment-navigation .nav-previous,
	.posts-navigation .nav-previous,
	.post-navigation .nav-previous {
		flex: 1 0 50%;
	}
	
	.comment-navigation .nav-next,
	.posts-navigation .nav-next,
	.post-navigation .nav-next {
		text-align: end;
		flex: 1 0 50%;
	}
	
	/* Posts and pages
	--------------------------------------------- */
	.sticky {
		display: block;
	}
	
	.post,
	.page {
		margin: 0 0 1.5em;
	}
	
	.updated:not(.published) {
		display: none;
	}
	
	.page-content,
	.entry-content,
	.entry-summary {
		margin: 1.5em 0 0;
	}
	
	.page-links {
		clear: both;
		margin: 0 0 1.5em;
	}
	
	/* Comments
	--------------------------------------------- */
	.comment-content a {
		word-wrap: break-word;
	}
	
	.bypostauthor {
		display: block;
	}
	
	/* Widgets
	--------------------------------------------- */
	.widget {
		margin: 0 0 1.5em;
	}
	
	.widget select {
		max-width: 100%;
	}
	
	/* Media
	--------------------------------------------- */
	.page-content .wp-smiley,
	.entry-content .wp-smiley,
	.comment-content .wp-smiley {
		border: none;
		margin-bottom: 0;
		margin-top: 0;
		padding: 0;
	}
	
	/* Make sure logo link wraps around logo image. */
	.custom-logo-link {
		display: inline-block;
	}
	
	/* Captions
	--------------------------------------------- */
	.wp-caption {
		margin-bottom: 1.5em;
		max-width: 100%;
	}
	
	.wp-caption img[class*="wp-image-"] {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	
	.wp-caption .wp-caption-text {
		margin: 0.8075em 0;
	}
	
	.wp-caption-text {
		text-align: center;
	}
	
	/* Galleries
	--------------------------------------------- */
	.gallery {
		margin-bottom: 1.5em;
		display: grid;
		grid-gap: 1.5em;
	}
	
	.gallery-item {
		display: inline-block;
		text-align: center;
		width: 100%;
	}
	
	.gallery-columns-2 {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.gallery-columns-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.gallery-columns-4 {
		grid-template-columns: repeat(4, 1fr);
	}
	
	.gallery-columns-5 {
		grid-template-columns: repeat(5, 1fr);
	}
	
	.gallery-columns-6 {
		grid-template-columns: repeat(6, 1fr);
	}
	
	.gallery-columns-7 {
		grid-template-columns: repeat(7, 1fr);
	}
	
	.gallery-columns-8 {
		grid-template-columns: repeat(8, 1fr);
	}
	
	.gallery-columns-9 {
		grid-template-columns: repeat(9, 1fr);
	}
	
	.gallery-caption {
		display: block;
	}
	
	/*--------------------------------------------------------------
	# Plugins
	--------------------------------------------------------------*/
	
	/* Jetpack infinite scroll
	--------------------------------------------- */
	
	/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
	.infinite-scroll .posts-navigation,
	.infinite-scroll.neverending .site-footer {
		display: none;
	}
	
	/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
	.infinity-end.neverending .site-footer {
		display: block;
	}
	
	/*--------------------------------------------------------------
	# Utilities
	--------------------------------------------------------------*/
	
	/* Accessibility
	--------------------------------------------- */
	
	/* Text meant only for screen readers. */
	.screen-reader-text {
		border: 0;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute !important;
		width: 1px;
		word-wrap: normal !important;
	}
	
	.screen-reader-text:focus {
		background-color: #f1f1f1;
		border-radius: 3px;
		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
		clip: auto !important;
		clip-path: none;
		color: #21759b;
		display: block;
		font-size: 0.875rem;
		font-weight: 700;
		height: auto;
		left: 5px;
		line-height: normal;
		padding: 15px 23px 14px;
		text-decoration: none;
		top: 5px;
		width: auto;
		z-index: 100000;
	}
	
	/* Do not show the outline on the skip link target. */
	#primary[tabindex="-1"]:focus {
		outline: 0;
	}
	
	/* Alignments
	--------------------------------------------- */
	.alignleft {
	
		/*rtl:ignore*/
		float: left;
	
		/*rtl:ignore*/
		margin-right: 1.5em;
		margin-bottom: 1.5em;
	}
	
	.alignright {
	
		/*rtl:ignore*/
		float: right;
	
		/*rtl:ignore*/
		margin-left: 1.5em;
		margin-bottom: 1.5em;
	}
	
	.aligncenter {
		clear: both;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 1.5em;
	}
	
}


@layer normalize {
	* {
		margin: 0;
		padding: 0;
	}

	body {
		background-color: #000;
		color: #fff;
	}
}

@layer layout {
	:root {
		--link-count: 0;
		--margin-offset: 150px;
		--marker-width : 1;
		--content-width: 0;
		--content-height: 0;
		--content-margin: 0;
	}

	#adaptive-remove {
		position: relative;
		display: none;
	}

	#background {
		display: block;
	}

	#loading-screen {
		position: fixed;
		display: block;
		box-sizing: border-box;
		width: 100svw;
		height: 100svh;
		align-content: center;
		justify-items: center;
		opacity: 1;
		/*background-image: linear-gradient(90deg, transparent, transparent 10.7px,black 10.7px), linear-gradient(#aaffeb, #aaffeb 10px, transparent 10px);*/
		background-size: 100px 100px;
	}

	#loading-screen::before {
		position: absolute;
		display: block;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-image: linear-gradient(transparent 5px, #5A7E752f 5px, transparent 5.7px), linear-gradient(90deg, transparent 5px, #5A7E752f 5px, transparent 5.7px), linear-gradient(90deg, transparent, transparent 10.7px,black 10.7px), linear-gradient(transparent 4.7px, #aaffeb2f 4.7px, #aaffeb2f 6px, transparent 6px), linear-gradient(transparent, transparent 10.7px,black 10.7px), linear-gradient(90deg, transparent 4.7px, #aaffeb2f 4.7px, #aaffeb2f 6px, transparent 6px);
		background-size: 100px 100px;
		backdrop-filter: blur(20px);
		content: "";
	}

	#loading-content {
		position: relative;
		display: block;
		align-content: center;
		width: fit-content;
		height: fit-content;
	}

	#lobby-container {
		position: fixed;
		display: none;
		box-sizing: border-box;
		width: 100svw;
		height: 100svh;
		justify-items: center;
		opacity: 0;
	}

	#main {
		position: fixed;
		display: none;
		box-sizing: border-box;
		width: 100svw;
		height: 100svh;
		justify-items: center;
		opacity: 0;
	}

	#elapsed-time {
		margin-left: 15px;
		margin-right: 15px;
		font-family: 'JetBrains Mono', monospace;
		font-weight: 700;
		font-size: 10px;
		color: #aaffeb;
		text-shadow: 0 0 10px #aaffeb;
	}

	.large-main {
		font-family: 'JetBrains Mono', monospace;
		font-weight: 700;
		font-size: 24px;
		text-transform: uppercase;
	}

	.button-labels {
		font-family: 'JetBrains Mono', monospace;
		font-weight: 700;
		font-size: 20px;
		text-transform: uppercase;
	}

	.main-heading {
		font-family: 'JetBrains Mono', monospace;
		font-weight: 700;
		font-size: 16px;
		text-transform: uppercase;
	}

	.tech-stack-item {
		font-family: 'JetBrains Mono', monospace;
		font-weight: 700;
		font-size: 16px;
		text-transform: uppercase;
	}

	.index-label {
		font-family: 'JetBrains Mono', monospace;
		font-weight: 700;
		font-size: 14px;
		text-transform: uppercase;
	}

	.tag-label {
		font-family: 'Fredoka', system-ui;
		font-weight: 500;
		font-size: 14px;
		text-transform: uppercase;
	}

	.featured-post-titles {
		font-family: 'Fredoka', system-ui;
		font-weight: 500;
		font-size: 40px;
		text-transform: uppercase;
	}

	.tech-stack-catergory {
		font-family: 'Fredoka', system-ui;
		font-weight: 500;
		font-size: 40px;
		text-transform: uppercase;
	}

	.medium-label {
		font-family: 'Fredoka', system-ui;
		font-weight: 500;
		font-size: 24px;
		text-transform: uppercase;
	}

	.buttons {
		position: relative;
		box-sizing: content-box;
		cursor: pointer;
		z-index: 100;
	}

	a {
		text-decoration: none;
		color: unset;
	}

	.contact-button-text {
		font-family: 'Fredoka', system-ui;
		font-weight: 500;
		font-size: 16px;
		text-transform: uppercase;
	}

	.loading-page-progress {
		font-family: 'JetBrains Mono', monospace;
		font-weight: 700;
		font-size: 16px;
		text-shadow: 0 0 10px #fff;
	}

	.loading-status-label {
		font-family: 'JetBrains Mono', monospace;
		font-weight: 700;
		font-size: 24px;
		text-transform: uppercase;
		text-shadow: 0 0 10px #fff;
	}

}

@layer custom {
	#custom-header {
		position: absolute;
		margin-top: 48px;
		display: flex;
		width: 80%;
		overflow: hidden;
		z-index: 100;
	}

	#nav-bar {
		position: relative;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-content: center;
		width: 100%;
		height: 45px;
	}

	#lobby-header {
		position: absolute;
		margin-top: 48px;
		display: flex;
		width: 80%;
		overflow: hidden;
		z-index: 10;
		justify-content: space-between;
	}

	#loading-labels {
		position: relative;
		display: flex;
		width: 30vw;
		justify-content: space-between;
		align-items: last baseline;
	}

	#loading-page-status {
		position: relative;
		box-sizing: content-box;
		margin: 0;
		padding: 0;
		color: #fff;
	}

	#loading-progress {
		position: relative;
		box-sizing: content-box;
		margin: 0;
		padding: 0;
		color: #fff;
	}

	#header-menu {
		position: relative;
		box-sizing: border-box;
		display: none;
		margin-left: -15%;
		width: 15%;
		height: 99px;
		overflow: hidden;
		opacity: 0;
	}

	.nav-item {
		position: relative;
		box-sizing: border-box;
		width: 15%;
		height: 30px;
		color: #aaffeb;
	}

	#menu-button {
		padding-left: 13%;
	}

	#name {
		cursor: pointer;
	}

	.menu-item {
		margin-left: 100%;
		margin-bottom: 9px;
		width: 70%;
		height: 27px;
	}

	.item-link {
		width: 100%;
		height: 25px;
		color: #aaffeb;
	}

	.item-marker {
		height: 2px;
	}

	.active-marker {
		width: 100%;
		background-color: #aaffeb;
	}

	.active-menu-link {
		color: #aaffeb;
	}

	.inactive-marker {
		margin-left: 60%;
		width: 40%;
		background-color: #5a7e75;
	}
	
	.inactive-menu-link {
		color: #5a7e75;
	}

	#custom-footer {
		position: absolute;
		display: flex;
		margin-top: 85svh;
		width: 80%;
		overflow: hidden;
		z-index: 10;
	}

	#footer-nav {
		position: relative;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 80px;
	}

	#socials-content {
		position: relative;
		box-sizing: border-box;
		display: block;
		gap: 10px;
		color: #aaffeb;
	}

	#footer-menu-button {
		position: relative;
		box-sizing: border-box;
		margin-top: 40px;
		display: flex;
		align-items: center;
		gap: 5px;
		height: 40px;
		color: #aaffeb;
	}

	#footer-menu-btn {
		position: relative;
		box-sizing: border-box;
		height: 35px;
	}

	#footer-menu {
		position: fixed;
		box-sizing: border-box;
		margin-left: 65%;
		margin-top: calc(max(-170, var(--margin-offset)) * 1px);
		display: none;
		height: calc(var(--link-count) * 42px);
		width: 15%;
		opacity: 1;
	}

	#menu-content {
		position: relative;
		box-sizing: border-box;
		display: block;
		justify-content: center;
		width: 98.5%;
		height: 100%;
		overflow: hidden;
		color: #aaffeb;
		opacity: 0;
	}

	#lobby-body {
		position: relative;
		display: block;
		margin-top: 20%;
		width: 80%;
		overflow: hidden;
		justify-items: center;
		z-index: 10;
	}

	#footer-menu-scroll-bar {
		position: relative;
		box-sizing: border-box;
		display: block;
		width: 1.5%;
		height: 100%;
		overflow: hidden;
		background-color: #5a7e75;
		opacity: 0;
	}

	.footer-menu-item {
		position: relative;
		box-sizing: border-box;
		margin-top: 100%;
		padding-right: 5%;
		display: block;
		align-content: center;
		width: 100%;
		height: 30px;
		text-align: right;
	}

	#main-content {
		position: fixed;
		box-sizing: border-box;
		display: block;
		width: 100%;
		height: 100%;
		justify-items: center;
		overflow: hidden;
		z-index: 10;
	}

	#post-container {
		position: fixed;
		box-sizing: border-box;
		display: block;
		width: 100%;
		height: 100%;
		justify-items: center;
		overflow: auto;
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* Internet Explorer/Edge */
		z-index: 10;
	}

	#post-container::-webkit-scrollbar {
		display: none; /* Chrome, Safari */
	}

	#post-header {
		position: relative;
		box-sizing: border-box;
		display: block;
		width: 100%;
		height: 100%;
		overflow: hidden;
		justify-items: center;
	}

	#post-content {
		position: relative;
		box-sizing: border-box;
		display: block;
		width: 100%;
	}

	#post-footer {
		position: relative;
		box-sizing: border-box;
		display: block;
		margin-top: 10%;
		margin-bottom: 10%;
		width: 100%;
		justify-items: center;
	}

	#tech-stack-container {
		position: relative;
		box-sizing: border-box;
		display: block;
		margin-top: 2%;
		width: 80%;
	}

	#next-project {
		position: relative;
		box-sizing: border-box;
		display: flex;
		align-items: end;
		margin-top: 3%;
		width: 80%;
	}

	#tech-stack-heading {
		position: relative;
		box-sizing: border-box;
		display: block;
		color: #5a7e75;
	}

	#next-project-label {
		color: #5a7e75;
	}

	#next-projct-title {
		position: relative;
		box-sizing: border-box;
		display: block;
		margin-top: 10%;
		color: #aaffeb;
	}

	#next-project-thumbnail {
		position: relative;
		box-sizing: border-box;
		display: block;
		margin-top: 7%;
		width: 326px;
		height: 205px;
	}

	#next-project-btn {
		position: relative;
		box-sizing: border-box;
		display: block;
		margin-left: 5%;
	}

	#next-project-btn .button-labels {
		z-index: 100;
	}

	#about-page-content {
		position: fixed;
		box-sizing: border-box;
		display: block;
		padding-top: 15%;
		width: 100%;
		height: 100%;
		overflow: auto;
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* Internet Explorer/Edge */
		z-index: 10;
	}

	.tech-component {
		position: relative;
		box-sizing: border-box;
		display: flex;
		margin-top: 2%;
		width: 100%;
		color: #aaffeb;
	}

	.under-line {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 2px;
		background-color: #5a7e75;
	}

	.componet-name {
		position: relative;
		box-sizing: border-box;
		display: block;
		width: 30%;
	}

	.building-blocks {
		position: relative;
		box-sizing: border-box;
		display: block;
		width: 70%;
	}

	.block {
		position: relative;
		box-sizing: border-box;
		display: block;
		margin-bottom: 2%;
		text-align: end;
	}
	
	#post-title-card {
		position: relative;
		box-sizing: border-box;
		display: block;
		margin-top: 10%;
		width: 80%;
		height: 15%;
		overflow: hidden;
		align-content: center;
		color: #aaffeb;
	}

	#post-meta-card {
		position: relative;
		box-sizing: border-box;
		display: flex;
		width: 80%;
		height: 10%;
		overflow: hidden;
		justify-content: space-between;
		align-items: center;
	}

	#featured-post-card {
		position: relative;
		box-sizing: border-box;
		display: flex;
		margin-top: 2%;
		width: 80%;
		height: 48.5%;
		overflow: hidden;
	}

	#client-name {
		position: relative;
		box-sizing: border-box;
		display: block;
		width: 25%;
		height: 65%;
		overflow: hidden;
		align-content: center;
	}

	#developer-role {
		position: relative;
		box-sizing: border-box;
		display: block;
		width: 25%;
		height: 65%;
		overflow: hidden;
		align-content: center;
	}

	#project-timeline {
		position: relative;
		box-sizing: border-box;
		display: block;
		width: 25%;
		height: 65%;
		overflow: hidden;
		align-content: center;
	}

	#featured-content {
		position: relative;
		box-sizing: border-box;
		margin-top: 15%;
		display: block;
		justify-items: center;
		align-content: center;
		width: 50%;
		height: 35%;
		z-index: 10;
		overflow: hidden;
	}

	#post-info-wrapper {
		position: fixed;
		margin-top: 20vh;
		box-sizing: border-box;
		display: none;
		width: 17vw;
		height: 57vh;
		z-index: 100;
		overflow: hidden;
		opacity: 0;
	}

	#the-title-heading {
		padding: 3px;
		color: #aaffeb;
	}

	#the-about-heading {
		padding: 3px;
		color: #aaffeb;
	}

	#the-tech-heading {
		padding: 3px;
		color: #aaffeb;
	}

	#the-title {
		padding: 10px;
		color: #5a7e75;
	}

	#about-the-project-info {
		padding: 10px;
		color: #5a7e75;
		height: 90px;
		margin-bottom: 15px;
		overflow: hidden;
	}

	#technology-list {
		color: #5a7e75;
		height: 70px;
		overflow: hidden;
	}

	#technology-list li {
		padding-top: 11px;
		padding-left: 10px;
		gap: 15px;
		display: flex;
		align-items: center;
	}

	#view-the-project-button {
		margin: 15px;
		padding: 12px;
		border: dashed 2px;
		border-radius: 0;
		color: #aaffeb;
		background-color: #0000;
		cursor: pointer;
	}

	#view-the-project-button:hover {
		border: solid 2px;
	}

	.the-underline {
		position: relative;
		box-sizing: border-box;
		margin: 3px;
		display: block;
		width: 90%;
		height: 1px;
		background-color: #5a7e75;
		z-index: 1000;
	}

	.box-decoration {
		border: solid 2px #5a7e75;
		width: 10px;
		height: 10px;
		background-color: #0000;
	}

	#content-scroll-bar {
		position: relative;
		box-sizing: border-box;
		margin-top: 10%;
		display: flex;
		width: 25%;
		height: 0.35%;
		z-index: 10;
		justify-content: space-between;
		overflow: hidden;
	}

	#canvas-container {
		position: absolute;
		box-sizing: border-box;
		display: block;
		margin: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	#enter-btn-ctnr {
		display: block;
		margin-top: 10%;
	}

	#social-links {
		margin-top: 15%;
		position: relative;
		display: flex;
		justify-content: space-between;
		height: fit-content;
		width: 45%;
	}

	#contact-wrapper {
		position: fixed;
		display: block;
		width: 100vw;
		height: 100svh;
		justify-items: center;
		z-index: 10;
	}

	#contact-form-dialog {
		position: fixed;
		border: none;
		margin-left: 100%;
		width: 50vw;
		height: 100vh;
		max-height: none;
		max-width: none;
		z-index: 100;
		opacity: 0;
		background-color: rgba(77, 77, 77, 0.1);
		backdrop-filter: blur(35px);
		
	}

	#close-dialog-section {
		position: relative;
		display: flex;
		width: 100%;
		height: 10%;
		color: #5a7e75;
		align-items: center;
	}

	#contact-form-content {
		position: relative;
		display: block;
		width: 100%;
		height: 90%;
	}

	#contact-form-content form {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	#close-dialog-label {
		position: relative;
		margin-left: 80%;
	}

	#close-dialog-button {
		position: relative;
		margin-left: 2%;
		cursor: pointer;
	}

	#contact-heading {
		position: relative;
		display: block;
		margin-top: 10%;
		color: #5a7e75;
	}

	#contact-greeting {
		position: relative;
		display: block;
		margin-top: 2%;
		width: 40%;
		text-align: center;
		color: #aaffeb;
	}

	#contact-prompt {
		position: relative;
		display: block;
		margin-top: 2%;
		width: 25%;
		text-align: center;
		color: #5a7e75;
	}

	#call-to-contact {
		position: relative;
		display: block;
		margin-top: 2%;
		height: 30%;
		width: 30%;
		justify-items: center;
	}

	#decorative-element {
		position: relative;
		display: block;
		width: 0.35%;
		height: 55%;
		background: linear-gradient( #5a7e75 35%, #aaffeb, #5a7e75 65%);
	}

	#call-to-contact-button {
		position: relative;
		display: block;
		box-sizing: border-box;
		width: 40%;
		height: 20%;
		justify-items: center;
		align-content: center;
		border: solid #5a7e75 2px;
		color: #5a7e75;
		cursor: pointer;
	}

	#contactee-name-field {
		position: relative;
		display: block;
		margin-left: 10%;
		margin-top: 1vh;
		color: #fff;
	}

	#contactee-email-field {
		position: relative;
		display: block;
		margin-left: 10%;
		margin-top: 1vh;
		color: #fff;
	}

	#contactee-phone-number-field {
		position: relative;
		display: block;
		margin-left: 10%;
		margin-top: 1vh;
		color: #fff;
	}

	#contactee-company-field {
		position: relative;
		display: block;
		margin-left: 10%;
		margin-top: 1vh;
		color: #fff;
	}

	#contactee-project-details-field {
		position: relative;
		display: block;
		margin-left: 10%;
		margin-top: 1vh;
		color: #fff;
	}

	#form-submit {
		position: relative;
		display: block;
		margin-left: 60%;
	}

	#client-name-input {
		position: relative;
		display: block;
		margin-top: 1vh;
		width: 75%;
		height: 5vh;
		border: solid #5a7e75 1px;
		border-radius: 0;
		background-color: #0000;
	}

	#client-email {
		position: relative;
		display: block;
		margin-top: 1vh;
		width: 75%;
		height: 5vh;
		border: solid #5a7e75 1px;
		border-radius: 0;
		background-color: #0000;
	}

	#client-phone {
		position: relative;
		display: block;
		margin-top: 1vh;
		width: 75%;
		height: 5vh;
		border: solid #5a7e75 1px;
		border-radius: 0;
		background-color: #0000;
	}

	#client-company {
		position: relative;
		display: block;
		margin-top: 1vh;
		width: 75%;
		height: 5vh;
		border: solid #5a7e75 1px;
		border-radius: 0;
		background-color: #0000;
	}

	#project-details {
		position: relative;
		display: block;
		margin-top: 1vh;
		width: 75%;
		height: 25vh;
		border: solid #5a7e75 1px;
		border-radius: 0;
		background-color: #0000;
	}

	#submit-button {
		position: relative;
		display: block;
		margin-top: 5vh;
		width: 40%;
		height: 5vh;
		border: solid #5a7e75 1px;
		border-radius: 0;
		background-color: #0000;
		color: #fff;
		align-items: center;
		justify-items: center;
		cursor: pointer;
	}

	.is-hover {
		position: relative;
		align-items: center;
		border: 2px solid transparent;
		border-radius: 0px;
		width: 186px;
		height: 62px;
		display: flex;
		background: linear-gradient(#000, #000) padding-box;
		color: #aaffeb;
		cursor: pointer;
		transition: ease-out opacity 0.5s;
	}

	.is-hover::after,
	.is-hover::before {
		content: '';
		position: absolute;
		inset: -2px;
		z-index: -1;
	}

	.is-hover::before {
		background: #5a7e75;
	}

	.is-hover::after {
		background: #aaffeb;
		-webkit-mask: linear-gradient(#fff 0 0) border-box, linear-gradient(#fff 0 0);
		-webkit-mask-size: 200px 200px;
		-webkit-mask-position: 50% 50%;
	}

	.is-idle {
		position: relative;
		border: none;
		border-radius: 0px;
		align-items: center;
		width: 186px;
		height: 62px;
		display: flex;
		background-color: transparent;
		color: #5a7e75;
		cursor: pointer;
		transition: ease-out opacity 0.5s;
	}

	.is-idle::after {
		content: '';
		position: absolute;
		box-sizing: border-box;
		width: inherit;
		height: inherit;
		left: 0;
		top: 0;
		z-index: 10;
		padding: 2px;
		border-radius: 0px;
		background: linear-gradient(-80deg, #0000 45%, #aaffeb, #0000 55%) var(--bg-pos, 0%) 0 / 300% 100% no-repeat border-box, linear-gradient(#5a7e75, #5a7e75) padding-box;
		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
	}

	.nxt-prjt-btn {
		position: relative;
		border: none;
		border-radius: 0px;
		align-items: center;
		justify-content: center;
		width: 146px;
		height: 52px;
		display: flex;
		background-color: transparent;
		color: #5a7e75;
		cursor: pointer;
		transition: ease-out opacity 0.5s;
	}

	.nxt-prjt-btn::after {
		content: '';
		position: absolute;
		box-sizing: border-box;
		width: inherit;
		height: inherit;
		left: 0;
		top: 0;
		z-index: 10;
		padding: 2px;
		border-radius: 0px;
		background: linear-gradient(-80deg, #0000 45%, #aaffeb, #0000 55%) var(--bg-pos, 0%) 0 / 300% 100% no-repeat border-box, linear-gradient(#5a7e75, #5a7e75) padding-box;
		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
	}

	#name-tag {
		color: #5a7e75;
	}

	#tag-1 {
		color: #5a7e75;
	}

	#tag-2 {
		color: #5a7e75;
	}

	#graphics-overlay {
		position: absolute;
		box-sizing: border-box;
		margin-top: -1%;
		margin-left: 1%;
		width: var(--content-width);
		height: var(--content-height);
		align-content: center;
		text-align: center;
	}

	.featured-post {
		display: block;
		margin-bottom: 0%;
		cursor: pointer;
	}

	.featured-image {
		display: none;
	}

	.featured-post-title {
		position: relative;
		display: block;
		box-sizing: border-box;
	}

	.featured-post-index {
		position: absolute;
		margin-left: 100%;
		color: #aaffeb;
	}

	.featured-post-label {
		position: relative;
		color: #aaffeb;
	}

	.featured-post-tags {
		position: relative;
		display: flex;
		margin-top: 4%;
		justify-content: center;
		gap: 8%;
	}

	.featured-post-tag {
		position: relative;
		color: #5a7e75;
	}

	.featured-post-date {
		position: relative;
		display: block;
		margin-top: 10%;
		justify-items: center;
		color: #5a7e75;
	}

	.gallery-container {
		position: relative;
		display: block;
		justify-items: center;
		margin-top: 5%;
	}

	.image-container {
		position: relative;
		display: block;
		margin-top: 10%;
		width: 65vw;
		height: 75vh;
	}

	.gallery-img, .gallery-vid {
		width: 100%;
		height: 100%;
		object-fit: cover;      /* Ensures the image fills the container */
		object-position: center; /* Keeps it centered */
		display: block;
	}

	.scroll-markers {
		position: relative;
		box-sizing: border-box;
		width: max(15%, calc(var(--marker-width) * 1%));
		height: 100%;
	}

	.inactive-bar {
		background-color: #5a7e75;
	}

	.active-bar {
		background-color: #aaffeb;
	}

	#about-post-section {
		position: relative;
		box-sizing: border-box;
		margin-left: 10%;
		margin-top: 5%;
		display: flex;
		width: 80%;
	}

	#about-post-heading {
		position: relative;
		display: block;
		width: 60%;
		color: #aaffeb;
	}

	#about-post-content {
		position: relative;
		display: block;
		width: 90%;
		color: #5a7e75;
	}

	.about-developer-section {
		position: relative;
		display: block;
		margin-left: 50%;
		margin-bottom: 5%;
		width: 50%;
	}

	.about-section-title {
		margin-left: 20%;
		color: #5a7e75;
		max-width: 80%;
	}

	.about-developer-title {
		margin-left: 20%;
		margin-top: 8%;
		max-width: 65%;
		color: #aaffeb;
	}

	.title-under-deco {
		position: relative;
		display: block;
		margin-left: 20%;
		margin-top: 2%;
		width: 65%;
		height: 1px;
		background-color: #5a7e75;
	}

	.developer-bio {
		position: relative;
		display: block;
		margin-left: 20%;
		margin-top: 1%;
		max-width: 60%;
		color: #5a7e75;
	}

	.skill-specialty-section {
		position: relative;
		display: block;
		margin-left: 50%;
		margin-bottom: 20%;
		width: 50%;
	}

	.skills-section-title {
		margin-left: 20%;
		color: #5a7e75;
		max-width: 80%;
	}

	.specialties-summary-title {
		margin-left: 20%;
		margin-top: 8%;
		max-width: 65%;
		color: #aaffeb;
	}

	.summary-section {
		position: relative;
		display: block;
		margin-left: 20%;
		margin-top: 1%;
		max-width: 60%;
		color: #5a7e75;
	}

	.skills-list-section {
		position: relative;
		display: block;
		margin-left: 20%;
		margin-top: 5%;
		max-width: 60%;
		color: #5a7e75;
	}

	.skill-specialty-item {
		position: relative;
		display: flex;
		margin-top: 15px;
		gap: 20px;
		height: 30%;
	}

	.skill-specialty-item .box-decoration {
		position: relative;
		margin-top: 8px;
	}

}

@layer effects {
	#shimmer-container {
		margin: 0;
		background: linear-gradient(-75deg, #0000 45%, #fff, #0000 55%) 0 0 / 300% 100% no-repeat border-box, linear-gradient(#282828, #282828) padding-box;
		color: transparent;
		background-clip: text;
		display: inline-block;
		align-self: start;
	}

	.is-idle-btn-lb {
		margin: 0;
		background: linear-gradient(-75deg, #0000 45%, #aaffeb, #0000 55%) 0 0 / 300% 100% no-repeat border-box, linear-gradient(#5a7e75, #5a7e75) padding-box;
		color: transparent;
		background-clip: text;
		display: inline-block;
	}

	#loading-graphic {
		position: relative;
		display: block;
	}

	#page-progress-bar {
		position: relative;
		display: flex;
		align-items: center;
		margin-top: 16px;
		width: 30vw;
		height: 25px;
		border: solid 2px #aaffeb;
		background-color: #0000;
	}

	#progress-bar {
		position: relative;
		margin-left: 5px;
		max-width: calc(100% - 10px);
		width: 0%;
		height: 13px;
		background-color: #aaffeb;
		box-shadow: 0 0 20px 2px #aaffeb;
	}

	#bounding-pin-1 {
		position: absolute;
		margin-top: 3px;
		margin-left: -106px;
		left: 0;
		top: 0;
		width: 46px;
		height: 20px;
	}

	#bounding-pin-2 {
		position: absolute;
		margin-top: 3px;
		margin-right: -106px;
		right: 0;
		top: 0;
		width: 46px;
		height: 20px;
	}

	#elapsed-time-counter {
		position: relative;
		display: flex;
		margin-top: 49px;
		width: 30vw;
		align-items: center;
		justify-content: space-between;
	}

	#elapsed-time-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 18vw;
		height: 15px;
		background-color: #aaffeb2f;
	}

	#container-boundary {
		position: absolute;
		width: calc(18vw + 2px);
		height: 17px;
	}

	#bounding-cube-1 {
		position: absolute;
		left: 0;
		height: 17px;
		width: 17px;
	}

	#bounding-cube-2 {
		position: absolute;
		right: 0;
		height: 17px;
		width: 17px;
	}

	.cube-bounds {
		position: relative;
		border: solid 2px #aaffeb;
		width: 20px;
		height: 20px;
		background-color: #0000;
	}

	.mini-cube-bounds {
		position: relative;
		width: 5px;
		height: 5px;
		background-color: #aaffeb;
	}
}

@media (max-width: 480px) {
	@layer normalize {
		* {
			margin: 0;
			padding: 0;
		}
	
		body {
			background-color: #000;
			color: #fff;
		}
	}

	@layer layout {
		#loading-screen {
			position: fixed;
			display: block;
			box-sizing: border-box;
			width: 100vw;
			height: 100svh;
			align-content: center;
			justify-items: center;
			overflow: hidden;
		}

		#lobby-container {
			position: fixed;
			display: block;
			box-sizing: border-box;
			width: 100vw;
			height: 100svh;
			justify-items: center;
			overflow: hidden;
		}

		.featured-post-titles {
			font-family: 'Fredoka', system-ui;
			font-weight: 500;
			font-size: 24px;
			text-transform: uppercase;
		}

		.tech-stack-catergory {
			font-family: 'Fredoka', system-ui;
			font-weight: 500;
			font-size: 16px;
			text-transform: uppercase;
		}

		.tech-stack-item {
			font-family: 'JetBrains Mono', monospace;
			font-weight: 700;
			font-size: 12px;
			text-transform: uppercase;
		}

		.alt-large-labels {
			font-family: 'Fredoka', system-ui;
			font-weight: 500;
			font-size: 18px;
			text-transform: uppercase;
		}

		.contact-button-text {
			font-family: 'Fredoka', system-ui;
			font-weight: 500;
			font-size: 10px;
			text-transform: uppercase;
		}

		.large-main {
			font-family: 'JetBrains Mono', monospace;
			font-weight: 700;
			font-size: 18px;
			text-transform: uppercase;
		}

		.tag-label {
			font-size: 12px;
		}

		.loading-status-label {
			font-family: 'JetBrains Mono', monospace;
			font-weight: 700;
			font-size: 16px;
			text-transform: uppercase;
		}

		.loading-page-progress {
			font-family: 'JetBrains Mono', monospace;
			font-weight: 700;
			font-size: 12px;
		}
	}

	@layer custom {
		#loading-content {
			position: relative;
			display: block;
			box-sizing: border-box;
			width: fit-content;
			height: fit-content;
			justify-items: center;
		}

		#loading-labels {
			width: 45vw;
		}

		#lobby-header {
			position: relative;
			display: flex;
			justify-content: space-between;
			margin-left: 0;
			margin-top: 10%;
			width: 80%;
			height: fit-content;
		}

		#custom-footer {
			position: absolute;
			margin-top: 90svh;
			height: fit-content;
			width: 100vw;
			margin-left: 0;
			justify-content: center;
			z-index: 100;
		}

		#header-menu {
			position: fixed;
			margin: 0;
			padding-top: 70%;
			width: 100vw;
			height: 100svh;
			background-color: rgba(77, 77, 77, 0.1);
			backdrop-filter: blur(35px);
			z-index: 10;
			justify-items: center;
		}

		#lobby-body {
			margin-top:80%;
		}

		#tag-1 {
			color: #5a7e75;
		}

		#name-tag {
			color: #5a7e75;
			text-align: end;
		}

		#skill {
			width: fit-content;
		}

		#menu-button {
			width: fit-content;
		}

		#name {
			height: fit-content;
		}

		#nav-bar {
			height: fit-content;
		}

		#featured-content {
			margin-top: 65%;
			width: 80%;
		}

		#post-title-card {
			margin-top: 30%;
			margin-bottom: 10%;
		}

		#post-meta-card  {
			display: block;
			height: fit-content;
		}

		#post-meta-card div {
			display: flex;
			width: 100%;
			height: fit-content;
			margin-bottom: 5%;
		}

		#about-post-section {
			display: block;
		}

		#about-post-section div {
			width: 100%;
			margin-bottom: 5%;
		}

		#featured-post-card {
			height: 24%;
		}

		#client-name {
			height: 100%;
			align-content: start;
		}

		#developer-role {
			height: 100%;
			align-content: start;
		}

		#project-timeline  {
			height: 100%;
			align-content: start;
		}

		#post-header {
			height: fit-content;
			margin-bottom: 10%;
		}

		#post-footer {
			height: fit-content;
			margin-bottom: 55%;
		}

		#tech-stack-container {
			margin-bottom: 25%;
		}

		#next-project {
			margin-bottom: 35%;
			display: block;
		}

		#next-project-thumbnail {
			width: 100%;
			height: fit-content;
		}

		#next-project-btn {
			margin-top: 10%;
			margin-left: 0;
		}

		#content-scroll-bar {
			margin-top: 40%;
			width: 50%;
		}

		#contact-greeting {
			margin-top: 10%;
			width: 70%;
		}

		#contact-heading {
			margin-top: 50%;
		}

		#contact-prompt {
			margin-top: 5%;
			width: 60%;
		}

		#decorative-element {
			width: 1%;
		}

		#call-to-contact {
			width: 45%;
		}

		#contact-form-dialog {
			width: 100vw;
		}

		#close-dialog-label {
			margin-left: 60%;
		}

		#close-dialog-button {
			margin-left: 5%;
		}

		#call-to-contact-button {
			width: 100%;
		}

		#contactee-name-field {
			margin-left: 5%;
		}

		#contactee-email-field {
			margin-left: 5%;
		}

		#contactee-phone-number-field {
			margin-left: 5%;
		}

		#contactee-company-field {
			margin-left: 5%;
		}

		#contactee-project-details-field {
			margin-left: 5%;
		}

		#form-submit {
			margin-left: 35%;
		}

		#client-name-input {
			width: 95%;
		}

		#client-email {
			width: 95%;
		}

		#client-phone {
			width: 95%;
		}

		#client-company {
			width: 95%;
		}

		#project-details {
			width: 95%;
		}

		#submit-button {
			height: 6vh;
		}

		#post-container {
			padding-top: 20%;
		}

		.image-container {
			height: 30vh;
		}

		.menu-item {
			text-align: center;
			margin-bottom: 10%;
		}

		.featured-post-title {
			max-width: 90%;
		}

		.featured-post-label {
			text-align: center;
			max-width: 100%;
		}

		.featured-post {
			max-width: 100%;
		}

		.featured-post-tags {
			gap: 5%;
		}

		.featured-post-tag {
			max-width: 80px;
			text-align: center;
		}

		.featured-post-date {
			margin-top: 5%;
		}

		.the-underline {
			width: 85vw;
		}

		#graphics-overlay {
			margin-top: -6%;
			margin-left: calc(var(--content-margin) + 12vw);
			width: calc(var(--content-width) + 10vw);
			max-width: 100%;
		}

		#post-info-wrapper {
			margin: 0;
			padding: 0;
			width: 100vw;
			height: 100svh;
			align-content: center;
			justify-items: center;
			background-color: #4d4d4d1a;
			backdrop-filter: blur(35px);
		}

		#the-title-heading {
			text-align: center;
		}

		#the-title {
			text-align: center;
		}

		#the-about-heading {
			text-align: center;
		}

		#about-the-project-info {
			max-width: 85vw;
			text-align: center;
		}

		#the-tech-heading {
			text-align: center;
		}

		#technology-list {
			justify-items: center;
		}

		#about-page-content {
			padding-top: 150%;
		}

		#about-me-page-background {
			width: 100%;
			height: fit-content;
		}

		.about-developer-section {
			margin: 0;
			width: 100%;
			margin-bottom: 20%;
			justify-items: center;
		}

		.about-developer-section div {
			margin-left: 0;
			max-width: 100%;
		}

		.skill-specialty-section {
			margin-left: 0;
			width: 100%;
			margin-bottom: 45%;
			justify-items: center;
		}

		.skill-specialty-section div {
			margin-left: 0;
			max-width: 100%;
		}

		.about-section-title {
			text-align: center;
		}

		.about-developer-title {
			margin-top: 10%;
			text-align: center;
			width: 90%;
		}

		.title-under-deco {
			margin-top: 4%;
			width: 90%;
		}

		.developer-bio {
			margin-top: 5%;
			width: 85%;
			text-align: center;
		}

		.summary-section {
			margin-top: 5%;
			width: 85%;
			text-align: center;
		}

		.skills-list-section {
			margin-top: 10%;
		}
	}
	@layer effects {
		#loading-graphic {
			position: relative;
			display: block;
			justify-items: center;
		}

		#page-progress-bar {
			width: 45vw;
		}

		#bounding-pin-1 {
			margin-left: -45px;
		}

		#bounding-pin-2 {
			margin-right: -45px;
		}

		#elapsed-time-counter {
			width: 55vw;
		}

		#elapsed-time-wrapper {
			width: 35vw;
		}

		#container-boundary {
			width: calc(35vw + 2px);
		}
	}
}