/*  -------------------------------------------------------------------------------- [ FONT-FAMILY ]
	The following fonts are used: 

	- sans-serif	fallback default
	- Noto Mono		fallback default
	- 04B_03		body, text, default
	- 04B_11		special
*/

@font-face {
	font-family: '04B_03';
	src: url('fonts/04B_03.eot');
	src: url('fonts/04B_03.eot?iefix') format('eot'), url('fonts/04B_03.woff') format('woff'), url('fonts/04B_03.ttf') format('truetype');
}

/*  -------------------------------------------------------------------------------- [ GLOBAL ]
	Global rules for html, body, and html elements.
*/

html {
	/* position and sizing */
	/* appearance */
	overflow-y: scroll;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* Internet Explorer 10+ */
	--scroll-behavior: smooth;
	scroll-behavior: smooth;
}

html::-webkit-scrollbar { /* WebKit */
	/* position and sizing */
	/* appearance */
	width: 0;
	height: 0;
}

body {
	/* position and sizing */
	max-width: 92.125rem;
	margin-left: auto;
	margin-right: auto;
	/* appearance */
	font-family: '04B_03', sans-serif;
}

p {
	/* position and sizing */
	margin-top: 0.625rem;
	margin-bottom: 0.625rem;
	/* appearance */
	line-height: 1.8rem;
}

a {
	/* position and sizing */
	/* appearance */
	color: #212123;
	text-decoration: solid underline #212123 0.09375rem;
}

a:hover,
a:active {
	/* position and sizing */
	/* appearance */
	color: gray;
	text-decoration: solid underline gray 0.09375rem;
}

ul {
	/* position and sizing */
	/* appearance */
	list-style: none;
}

ul li {
	/* position and sizing */
	/* appearance */
	list-style-type: none;
}

.no-js .hidden {
	/* position and sizing */
	/* appearance */
	opacity: 1;
}

.hidden {
	/* position and sizing */
	/* appearance */
	opacity: 0;
}

.visible {
	/* position and sizing */
	/* appearance */
	opacity: 1;
	transition: opacity 1s ease-out;
}

/*  -------------------------------------------------------------------------------- [ FONT ]
	Style rules for font sizes, decorations, and custom line heights.
*/

.font-sm {
	font-size: 0.750rem;
}

.font-md {
	font-size: 1.000rem;
}

.font-lg {
	font-size: 1.250rem;
}

.font-xl {
	font-size: 1.375rem;
}

.font-xxl {
	font-size: 1.625rem;
}

.font-bold {
	font-weight: bold;
}

.font-italic {
	font-style: italic;
}

.no-decoration {
	text-decoration: none;
}

/*  -------------------------------------------------------------------------------- [ COLORS ]
	Style rules for colors.
*/

.color-white {
	color: white;
}

.color-black {
	color: #212123;
}

.bg-white {
	background: white;
}

.bg-black {
	background: #212123;
}

/*  -------------------------------------------------------------------------------- [ SECTIONS ]
	Style rules for page sections, includes scroll margins, sizing, lists, text decoration, and borders.
*/

.scroll {
	/* position and sizing */
	scroll-margin-top: 3.2875rem;
	/* appearance */
}

.section {
	/* position and sizing */
	min-width: 52.875rem;
	height: 100%;
	/* appearance */
}

.pixel-list li {
	/* position and sizing */
	/* appearance */
	background: url('../icons/bullet.png');
	background-position-y: 0.65rem;
	background-size: 0.3rem;
	background-repeat: no-repeat;
	image-rendering: pixelated;
}

.border-top {
	/* position and sizing */
	/* appearance */
	border-top: 0.3125rem solid #212123;
}

.border-bottom {
	/* position and sizing */
	/* appearance */
	border-bottom: 0.3125rem solid #212123;
}

.border-left {
	/* position and sizing */
	/* appearance */
	border-left: 0.3125rem solid #212123;
}

.border-right {
	/* position and sizing */
	/* appearance */
	border-right: 0.3125rem solid #212123;
}

/*  -------------------------------------------------------------------------------- [ GRIDS ]
	Style rules for grid systems.
*/

.grid-1x2 {
	/* grid styling */
	display: grid;
	grid-template-columns: clamp(21.875rem, 47%, 37.5rem) clamp(21.875rem, 47%, 37.5rem);
	grid-template-rows: auto;
	gap: 0rem 2.5rem;
	grid-auto-flow: column;
	grid-template-areas:
		"grid-l grid-r";
}

.grid-2x2 {
	/* grid styling */
	display: grid;
	grid-template-columns: clamp(21.875rem, 47%, 37.5rem) clamp(21.875rem, 47%, 37.5rem);
	grid-template-rows: auto auto;
	gap: 0rem 1.25rem;
	grid-auto-flow: column;
	grid-template-areas:
		"grid-ul grid-ur"
		"grid-bl grid-br";
}

.grid-3x2 {
	/* grid styling */
	display: grid;
	grid-template-columns: clamp(21.875rem, 47%, 37.5rem) clamp(21.875rem, 47%, 37.5rem);
	grid-template-rows: auto auto auto;
	gap: 0rem 0rem;
	grid-auto-flow: column;
	grid-template-areas:
		"grid-ul grid-ur"
		"grid-ml grid-mr"
		"grid-bl grid-br";
}

.grid-2x3 {
	/* grid styling */
	display: grid;
	grid-template-columns: clamp(21.875rem, 47%, 37.5rem) clamp(21.875rem, 47%, 37.5rem) clamp(21.875rem, 47%, 37.5rem);
	grid-template-rows: auto auto;
	gap: 0rem 0rem 0rem;
	grid-auto-flow: column;
	grid-template-areas:
		"grid-ul grid-um grid-ur"
		"grid-bl grid-bm grid-br";
}

/*  -------------------------------------------------------------------------------- [ POSITIONING ]
	Style rules for positioning.
*/

.align-top {
	vertical-align: top;
}

.align-bottom {
	vertical-align: bottom;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.text-center {
	text-align: center;
}

.fixed {
	position: fixed;
}

.relative {
	position: relative;
}

.sticky {
	position: sticky;
}

.display-block {
	display: block;
}

.display-none {
	display: none;
}

/*  -------------------------------------------------------------------------------- [ SPACING ]
	Style rules for spacing, including margins and padding.
	
	Style rule naming convention as follows; 
	- margin or padding				[m|p]
	- top, bottom, left, or right	[t|b|l|r]
	- dash, size					[sm|md|lg|xl]
	
	> [m|p][t|b|l|r]-[sm|md|lg|xl] ... mt-md = margin top, medium

	* custom sizes are further down
*/

.mt-xs {
	margin-top: 0.625rem;
}

.mt-sm {
	margin-top: 1.25rem;
}

.mt-md {
	margin-top: 3.125rem;
}

.mt-lg {
	margin-top: 4.375rem;
}

.mt-xl {
	margin-top: 5rem;
}

.mb-xs {
	margin-bottom: 0.625rem;
}

.mb-sm {
	margin-bottom: 1.25rem;
}

.mb-md {
	margin-bottom: 3.125rem;
}

.mb-lg {
	margin-bottom: 4.375rem;
}

.mb-xl {
	margin-bottom: 5rem;
}

.ml-xs {
	margin-left: 0.625rem;
}

.ml-sm {
	margin-left: 1.25rem;
}

.ml-md {
	margin-left: 3.125rem;
}

.ml-lg {
	margin-left: 4.375rem;
}

.ml-xl {
	margin-left: 5rem;
}

.mr-xs {
	margin-right: 0.625rem;
}

.mr-sm {
	margin-right: 1.25rem;
}

.mr-md {
	margin-right: 3.125rem;
}

.mr-lg {
	margin-right: 4.375rem;
}

.mr-xl {
	margin-right: 5rem;
}

.m-xs {
	margin: 0.625rem;
}

.m-sm {
	margin: 1.25rem;
}

.m-md {
	margin: 3.125rem;
}

.m-lg {
	margin: 4.375rem;
}

.m-xl {
	margin: 5rem;
}

.mt-0 {
	margin-top: 0rem;
}

.mb-0 {
	margin-bottom: 0rem;
}

.ml-0 {
	margin-left: 0rem;
}

.mr-0 {
	margin-right: 0rem;
}

.m-0 {
	margin: 0rem;
}

.pt-xs {
	padding-top: 0.625rem;
}

.pt-sm {
	padding-top: 1.25rem;
}

.pt-md {
	padding-top: 3.125rem;
}

.pt-lg {
	padding-top: 4.375rem;
}

.pt-xl {
	padding-top: 5rem;
}

.pb-xs {
	padding-bottom: 0.625rem;
}

.pb-sm {
	padding-bottom: 1.25rem;
}

.pb-md {
	padding-bottom: 3.125rem;
}

.pb-lg {
	padding-bottom: 4.375rem;
}

.pb-xl {
	padding-bottom: 5rem;
}

.pl-xs {
	padding-left: 0.625rem;
}

.pl-sm {
	padding-left: 1.25rem;
}

.pl-md {
	padding-left: 3.125rem;
}

.pl-lg {
	padding-left: 4.375rem;
}

.pl-xl {
	padding-left: 5rem;
}

.pr-xs {
	padding-right: 0.625rem;
}

.pr-sm {
	padding-right: 1.25rem;
}

.pr-md {
	padding-right: 3.125rem;
}

.pr-lg {
	padding-right: 4.375rem;
}

.pr-xl {
	padding-right: 5rem;
}

.p-xs {
	padding: 0.625rem;
}

.p-sm {
	padding: 1.25rem;
}

.p-md {
	padding: 3.125rem;
}

.p-lg {
	padding: 4.375rem;
}

.p-xl {
	padding: 5rem;
}

.pt-0 {
	padding-top: 0rem;
}

.pb-0 {
	padding-bottom: 0rem;
}

.pl-0 {
	padding-left: 0rem;
}

.pr-0 {
	padding-right: 0rem;
}

.p-0 {
	padding: 0rem;
}

/* custom spacings */

.mt-30 {
	margin-top: 1.875rem;
}

.mt-40 {
	margin-top: 2.5rem;
}

.mt-45 {
	margin-top: 2.8125rem;
}

.mb-30 {
	margin-bottom: 1.875rem;
}

.mb-40 {
	margin-bottom: 2.5rem;
}

.mb-45 {
	margin-bottom: 2.8125rem;
}

.mb-60 {
	margin-bottom: 3.75rem;
}

.ml-40 {
	margin-left: 2.5rem;
}

.pt-5 {
	padding-top: 0.3125rem;
}

.pt-8 {
	padding-top: 0.5rem;
}

.pt-25 {
	padding-top: 1.5625rem;
}

.pt-30 {
	padding-top: 1.875rem;
}

.pt-45 {
	padding-top: 2.8125rem;
}

.pt-47 {
	padding-top: 2.9375rem;
}

.pt-50 {
	padding-top: 3.125rem;
}

.pt-55 {
	padding-top: 3.4375rem;
}

.pb-7 {
	padding-bottom: 0.4375rem;
}

.pl-15 {
	padding-left: 0.9375rem;
}

.pl-40 {
	padding-left: 2.5rem;
}

.pr-40 {
	padding-right: 2.5rem;
}

.pr-15 {
	padding-right: 0.9375rem;
}

/*  -------------------------------------------------------------------------------- [ UWIDE: MEDIA QUERIES ]
	Ultra-wide monitors.
*/

@media screen and (min-width: 92.125rem) {
	body {
		/* position and sizing */
		/* appearance */
		border-left: 0.3125rem solid #212123;
		border-right: 0.3125rem solid #212123;
		border-bottom: 0.3125rem solid #212123;
	}

	.scroll {
		/* position and sizing */
		scroll-margin-top: 3.6rem;
		/* appearance */
	}
}

@media screen and (max-width: 92.125rem) {
	body {
		/* position and sizing */
		/* appearance */
		border: none;
	}

	.scroll {
		/* position and sizing */
		scroll-margin-top: 3.2875rem;
		/* appearance */
	}
}

/*  -------------------------------------------------------------------------------- [ UTIL: NAVBAR ]
	All styling rules for the navbar.
*/

#navbar {
	/* position and sizing */
	width: inherit;
	min-width: 20rem;
	top: 0;
	/* appearance */
}

#navbar a:hover,
#navbar a:active {
	/* position and sizing */
	/* appearance */
	text-decoration: none;
}

#navbar #tldr {
	/* position and sizing */
	top: 0.625rem;
	/* appearance */
}

#navbar-min #dropdown-icon {
	/* position and sizing */
	right: 1rem;
	top: 0.625rem;
	/* appearance */
}

#navbar-min #dropdown-icon img {
	/* position and sizing */
	height: 0.75rem;
	width: auto;
	/* appearance */
	image-rendering: pixelated;
}

#navbar-min #dropdown-menu {
	/* position and sizing */
	top: 3rem;
	right: -0.0625rem;
	z-index: 1;
	/* appearance */
}

#navbar-min #dropdown-menu {
	/* position and sizing */
	overflow: hidden;
	height: 0rem;
	/* appearance */
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

#navbar-min #dropdown-trigger:hover #dropdown-menu {
	/* position and sizing */
	height: 16.625rem;
	/* appearance */
}

@media screen and (min-width: 58.75rem) {
	#navbar-full {
		/* position and sizing */
		display: block;
		/* appearance */
	}

	#navbar-min {
		/* position and sizing */
		display: none;
		/* appearance */
	}
}

@media screen and (max-width: 58.75rem) {
	#navbar-full {
		/* position and sizing */
		display: none;
		/* appearance */
	}

	#navbar-min {
		/* position and sizing */
		display: block;
		/* appearance */
	}
}

@media screen and (min-width: 92.125rem) {
	#navbar {
		/* position and sizing */
		/* appearance */
		border-top: 0.3125rem solid #212123;
	}

		#navbar #tldr {
			/* position and sizing */
			top: 0.9375rem;
			/* appearance */
		}
}

@media screen and (max-width: 92.125rem) {
	#navbar {
		/* position and sizing */
		/* appearance */
		border-top: none;
	}

		#navbar #tldr {
			/* position and sizing */
			top: 0.625rem;
			/* appearance */
		}
}

/*  -------------------------------------------------------------------------------- [ INS: FAVOURITE-* ]
	All styling rules for the insets 'favourite-*'.
*/

#favourites {
	/* position and sizing */
	/* appearance */
	display: flex;
	justify-content: center;
}

#favourites-list {
	/* position and sizing */
	padding-left: 0rem;
	padding-right: 0rem;
	/* appearance */
	flex-shrink: 0;
}

#favourites-list li {
	/* position and sizing */
	padding-left: 1.5em;
	padding-right: 1rem;
	/* appearance */
	display: inline;
	background: url('../icons/bullet.png');
	background-position-y: 0.3rem;
	background-size: 0.3rem;
	background-repeat: no-repeat;
	image-rendering: pixelated;
}

#favourites-list li:first-child {
	/* position and sizing */
	padding-left: 1.875rem;
	/* appearance */
	background: url('../icons/heart.png');
	background-position-y: 0rem;
	background-size: 0.9rem;
	background-repeat: no-repeat;
	image-rendering: pixelated;
}

#favourites-list li:last-child {
	/* position and sizing */
	padding-right: 0rem;
	/* appearance */
}

/*  -------------------------------------------------------------------------------- [ SEC: GAME ]
	All styling rules for the section 'game'.
*/

.no-js #game {
	/* position and sizing */
	/* appearance */
	display: none;
}

.no-js #default-message {
	/* position and sizing */
	/* appearance */
	display: block;
}

.js #game {
	/* position and sizing */
	width: 100%;
	height: auto;
	aspect-ratio: 3.68;
	vertical-align: bottom;
	/* appearance */
	cursor: none;
	image-rendering: pixelated;
}

.js #default-message {
	/* position and sizing */
	/* appearance */
	display: none;
}

/*  -------------------------------------------------------------------------------- [ SEC: ABOUT ]
	All styling rules for the section 'about'.
*/

#about p {
	/* position and sizing */
	width: 55rem;
	/* appearance */
	line-height: 2.1rem;
}

#about-photo {
	/* position and sizing */
	height: 35rem;
	width: 100%;
	/* appearance */
	transition: background-image 1s linear;
	background-image: url('../../images/my-photo.jpg');
	background-size: cover;
}

/*  -------------------------------------------------------------------------------- [ SEC: PROJECTS ]
	All styling rules for the section 'projects'.
*/

#projects-publications {
	/* grid styling */
	grid-area: grid-l;
}

#projects-programming {
	/* grid styling */
	grid-area: grid-r;
}

/*  -------------------------------------------------------------------------------- [ SEC: EXPERIENCE ]
	All styling rules for the section 'experience'.
*/

#experience-education-title {
	/* grid styling */
	grid-area: grid-ul;
}

#experience-education-msc {
	/* grid styling */
	grid-area: grid-bl;
}

#experience-education-bfa {
	/* grid styling */
	grid-area: grid-br;
}

/*  -------------------------------------------------------------------------------- [ SEC: CONTACT ]
	All styling rules for the section 'contact'.
*/

#contact-grid {
	/* position and sizing */
	margin-left: 2.5rem;
	margin-right: 2.5rem;
	/* appearance */
	/* grid styling */
	grid-template-columns: 33% 33% 33%;
	grid-auto-flow: row;
	gap: 0rem 0rem 0rem;
}

#contact-icon {
	/* position and sizing */
	width: 4.375rem;
	height: auto;
	/* appearance */
	image-rendering: pixelated;
}

#linkedin-icon {
	/* position and sizing */
	/* appearance */
	text-align: center;
	/* grid styling */
	grid-area: grid-ul;
}

#github-icon {
	/* position and sizing */
	margin-left: 1.25rem;
	margin-right: 1.25rem;
	/* appearance */
	text-align: center;
	/* grid styling */
	grid-area: grid-um;
}

#email-icon {
	/* position and sizing */
	/* appearance */
	text-align: center;
	/* grid styling */
	grid-area: grid-ur;
}

#linkedin-address {
	/* position and sizing */
	/* appearance */
	text-align: center;
	/* grid styling */
	grid-area: grid-bl;
}

#github-address {
	/* position and sizing */
	margin-left: 1.25rem;
	margin-right: 1.25rem;
	/* appearance */
	text-align: center;
	/* grid styling */
	grid-area: grid-bm;
}

#email-address {
	/* position and sizing */
	/* appearance */
	text-align: center;
	/* grid styling */
	grid-area: grid-br;
}

.no-js #email-hide {
	/* position and sizing */
	/* appearance */
	display: none;
}

.js #email-hide {
	/* position and sizing */
	/* appearance */
	cursor: pointer;
	font-weight: bold;
	text-decoration: none;
	line-height: 1.8rem;
}

.js #email-hide:hover,
.js #email-hide:active {
	/* position and sizing */
	/* appearance */
	color: gray;
}

.no-js #email-show-default {
	/* position and sizing */
	/* appearance */
	display: block;
	line-height: 1.8rem;
}

.no-js #email-show {
	/* position and sizing */
	/* appearance */
	display: none;
}

.js #email-show-default {
	/* position and sizing */
	/* appearance */
	display: none;
}

.js #email-show {
	/* position and sizing */
	/* appearance */
	display: none;
	line-height: 1.8rem;
}