/*** Defaults ***/
/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Prevent font size inflation */
html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
	margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
	list-style: none;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	line-height: 1.5;
	margin: 0;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
	line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
	text-wrap: balance;
}

/* Make images easier to work with */
img,
picture {
	max-width: 100%;
	display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
	font-family: inherit;
	font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
	min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
	scroll-margin-block: 5ex;
}

/*** Defined Constants ***/
@property --main-bg-color {
	syntax: "<color>";
	inherits: false;
	initial-value: white;
}

/*** Defined Constants ***/
.black-text {
	color: black;
	fill: black;
}

@property --main-text-color {
	syntax: "<color>";
	inherits: false;
	initial-value: #909090;
}
.main-text {
	color: var(--main-text-color);
	fill: var(--main-text-color);
}

@property --main-accent-color {
	syntax: "<color>";
	inherits: false;
	initial-value: #82C57B;
}
.main-accent {
	color: var(--main-accent-color);
	fill: var(--main-accent-color);
}

@property --main-fade-color {
	syntax: "<color>";
	inherits: false;
	initial-value: #c3c3c3;
}
.main-fade {
	color: var(--main-fade-color);
	fill: var(--main-fade-color);
}

@property --secondary-accent-color {
	syntax: "<color>";
	inherits: false;
	initial-value: #6DBA64;
}
.secondary-accent {
	color: var(--secondary-accent-color);
	fill: var(--secondary-accent-color);
}

@property --secondary-fade-color {
	syntax: "<color>";
	inherits: false;
	initial-value: #A3F799;
}
.secondary-fade {
	color: var(--secondary-fade-color);
	fill: var(--secondary-fade-color);
}

@font-face {
	font-family: "Metropolis Light";
	src: url("../fonts/metropolis-latin-300-normal.ttf");
}
.metro-lite {
	font-family: "Metropolis Light", Arial, sans-serif;
	font-weight: 300;
}

@font-face {
	font-family: "Metropolis Regular Italic";
	src: url("../fonts/metropolis-latin-400-italic.woff2");
}
.metro-reg-i {
	font-family: "Metropolis Regular Italic", Arial, sans-serif;
	font-weight: 400;
}

@font-face {
	font-family: "Metropolis Medium";
	src: url("../fonts/metropolis-latin-500-normal.ttf");
}
.metro-med {
	font-family: "Metropolis Medium", Arial, sans-serif;
	font-weight: 500;
}

@font-face {
	font-family: "Metropolis Bold";
	src: url("../fonts/metropolis-latin-700-normal.woff2");
}
.metro-bold {
	font-family: "Metropolis Bold", Arial, sans-serif;
	font-weight: 700;
}

@font-face {
	font-family: "Metropolis Extra Bold";
	src: url("../fonts/metropolis-latin-800-normal.woff2");
}
.metro-xbold {
	font-family: "Metropolis Extra Bold", Arial, sans-serif;
	font-weight: 800;
}

@font-face {
	font-family: "Metropolis Medium Italic";
	src: url("../fonts/metropolis-latin-500-italic.ttf");
}
.metro-med-i {
	font-family: "Metropolis Medium Italic", Arial, sans-serif;
	font-weight: 500;
}

@font-face {
	font-family: "Lenia Sans ExtraLight";
	src: url("../fonts/LeniaSans-ExtraLight.ttf");
}
.lenia-xlite {
	font-family: "Lenia Sans ExtraLight", Arial, sans-serif;
	font-weight: 200;
}

@font-face {
	font-family: "Lenia Sans Regular";
	src: url("../fonts/LeniaSans-Regular.ttf");
}
.lenia-reg {
	font-family: "Lenia Sans Regular", Arial, sans-serif;
	font-weight: 400;
}

@font-face {
	font-family: "Lenia Sans Italic";
	src: url("../fonts/LeniaSans-Italic.ttf");
}
.lenia-reg-i {
	font-family: "Lenia Sans Italic", Arial, sans-serif;
	font-weight: 400;
}

@font-face {
	font-family:"Lenia Sans SemiBold";
	src: url("../fonts/LeniaSans-SemiBold.ttf");
}
.lenia-semi {
	font-family: "Lenia Sans SemiBold", Arial, sans-serif;
	font-weight: 600;
}

@font-face {
	font-family: "Lenia Sans Bold";
	src: url("../fonts/LeniaSans-Bold.ttf");
}
.lenia-bold {
	font-family: "Lenia Sans Bold", Arial, sans-serif;
	font-weight: 700;
}

@font-face {
	font-family: "Lenia Mono ExtraBold";
	src: url("../fonts/LeniaMono-ExtraBold.ttf");
}
.lenia-mono-xbold {
	font-family: "Lenia Mono ExtraBold", "Courier New", monospace;
	font-weight: 800;
}

@font-face {
	font-family: "Lenia Mono SemiBold";
	src: url("../fonts/LeniaMono-SemiBold.ttf");
}
.lenia-mono-semi {
	font-family: "Lenia Mono SemiBold", "Courier New", monospace;
	font-weight: 600;
}

@font-face {
	font-family: "Lenia Mono Regular";
	src: url("../fonts/LeniaMono-Regular.ttf");
}
.lenia-mono-reg {
	font-family: "Lenia Mono Regular", "Courier New", monospace;
	font-weight: 400;
}

@font-face {
	font-family: "Lenia Mono Medium";
	src: url("../fonts/LeniaMono-Medium.ttf");
}
.lenia-mono-med {
	font-family: "Lenia Mono Medium", "Courier New", monospace;
	font-weight: 500;
}

@font-face {
	font-family: "Lenia Mono Bold";
	src: url("../fonts/LeniaMono-Bold.ttf");
}
.lenia-mono-bold {
	font-family: "Lenia Mono Bold", "Courier New", monospace;
	font-weight: 700;
}

@font-face {
	font-family: "Lenia Sans Light";
	src: url("../fonts/LeniaSans-Light.ttf");
}
.lenia-lite {
	font-family: "Lenia Sans Light", Arial, sans-serif;
	font-weight: 300;
}

/*** Styles ***/
.txt-sm {
	font-size: 11.5px;
}

.txt-lk {
	font-size: 13px;
}

.txt-md {
	font-size: 15px;
}

.txt-lg {
	font-size: 25px;
}

.txt-xlg {
	font-size: 45px;
}

.spc-no {
	letter-spacing: 0;
}

.spc-sm {
	letter-spacing: 10%;
}

.spc-md {
	letter-spacing: 15%;
}

.spc-lg {
	letter-spacing: 20%;
}

body {
    background: var(--main-bg-color);
}

#header {
	display: grid;
	grid-template-columns: 2.25fr 3fr 3fr;
	grid-template-rows: 1fr;
	grid-template-areas: "name location contact-info";
	align-items: center;
	padding: 2rem 3rem;
}

#header > a:last-child {
	justify-self: end;
}

#location {
	margin-block: 0;
}

#name-container {
	display: flex;
	width: fit-content;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-start;
}

#name {
	font-size: 45px;
	letter-spacing: 13%;
	line-height: 37px;
}

#name-subtext {
	margin-top: 7px;
	margin-right: 7px;
	font-size: 20px;
	letter-spacing: 4%;
	line-height: 18px;
}

#downloads {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 60px;
}

.icon-link {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 15px;
	text-decoration: none;
}

.icon-link p {
	text-decoration: none;
	margin-block: 0;
}

.icon-link-text {
	text-decoration: none;
}

#downloads a {
	text-decoration: none;
}

#navicons {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 3.5rem;
}

#monogram-link {
	margin-left: -15px;
	margin-top: 5px;
	position: relative;
	text-decoration: none;
}

#navicons > a:not(#monogram-link) {
	position: relative;
	text-decoration: none;
}

.navicon-label {
	position: absolute;
	left: 50%;
	top: calc(50% + 15px + 8px);
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translateX(-50%) translateY(-20px);
	transition: opacity 120ms ease-out, transform 120ms ease-out, color 120ms ease-out;
}

#navicons > a:not(#monogram-link) .navicon-label {
	top: calc(50% + 15px + 30px);
}

#navicons > a:not(#monogram-link):hover .navicon-label,
#navicons > a:not(#monogram-link):focus-visible .navicon-label {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	color: color-mix(in srgb, var(--main-text-color) 70%, black);
}

#monogram {
	transition: transform 150ms ease-out;
	transform-origin: center;
}

#monogram-link:hover #monogram,
#monogram-link:focus-visible #monogram {
	transform: scale(1.1);
}

#navicons > a:not(#monogram-link) svg,
#downloads a svg,
#downloads a .icon-link-text {
	transition: fill 150ms ease-out, color 150ms ease-out;
}

#navicons > a:not(#monogram-link):hover svg,
#navicons > a:not(#monogram-link):focus-visible svg,
#downloads a:hover svg,
#downloads a:focus-visible svg,
#downloads a:hover .icon-link-text,
#downloads a:focus-visible .icon-link-text {
	fill: var(--main-accent-color);
	color: var(--main-accent-color);
}

#content {
	flex: 1;
	display: grid;
	grid-template-columns: 2.25fr 3fr 3fr;
	grid-template-rows: auto;
	width: 100%;
	max-width: 100vw;
	padding-inline: 3rem;
	padding-bottom: 3rem;
	box-sizing: border-box;
}

#sidebar {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	min-height: 0;
	overflow: hidden;
	height: 100%;
}

.sidebar-shell {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	flex: 1;
	min-height: 0;
	height: 100%;
	gap: 1rem;
	width: 100%;
}

.sidebar-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	width: 100%;
}

.sidebar-footer {
	margin-top: auto;
	text-decoration: none;
}

@keyframes twinkle {
	0%, 100% {
		transform: scale(1);
		filter: brightness(1);
	}

	50% {
		transform: scale(1.2);
		filter: brightness(1.2);
	}
}

#sidebar-greeting-image {
	display: block;
	transform-origin: center;
	transition: transform 150ms ease-out, filter 150ms ease-out;
}

#sidebar-greeting-image:hover {
	animation: twinkle 1.75s ease-in-out infinite;
}

#linkedin-link {
	fill: var(--main-text-color);
	transition: fill 150ms ease-out;
}

.sidebar-footer:hover #linkedin-link,
.sidebar-footer:focus-visible #linkedin-link {
	fill: color-mix(in srgb, var(--main-text-color) 70%, black);
}

/* Navbar. Elements in a flex container, aligned horizontally, spaced evenly*/
#nav-section {
	flex-shrink: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding-inline: 3rem;
	padding-block: 2rem;
}

#nav-section-left {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 60px;
}

#name {
	margin: 0;
	text-decoration: none;
	color: inherit;
}

#name:visited {
	color: inherit;
}

/* info pairs: used for location and contact info */
.info-pair {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

#nav-section-right {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 8rem;
}

@media (prefers-reduced-motion: reduce) {
	#sidebar-greeting-image:hover {
		animation: none;
	}

	#linkedin-link,
	#navicons > a:not(#monogram-link) svg,
	#navicons > a:not(#monogram-link) .navicon-label,
	#monogram,
	#downloads a svg,
	#downloads a .icon-link-text {
		transition-duration: 0.01s;
	}
}

#main-section {
	grid-column: 2 / 5;
	display: grid;
	grid-template-columns: 3fr 3fr;
	align-content: start;
	box-sizing: border-box;
}

#main-section-header {
	grid-column: 1 / 3;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

#main-section-content {
	grid-column: 1 / 3;
}

#main-section-header-text {
	margin: 0;
}

/* Fixed viewport layout (index, about) */
html:has(body.layout-fixed),
body.layout-fixed {
	height: 100%;
	overflow: hidden;
}

body.layout-fixed {
	max-height: 100vh;
}

body.layout-fixed #header,
body.layout-fixed footer {
	flex-shrink: 0;
}

body.layout-fixed #content {
	min-height: 0;
	overflow: hidden;
	padding-top: 50px;
	padding-bottom: 0;
	grid-template-rows: minmax(0, 1fr);
}

body.layout-fixed #main-section {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow-y: auto;
	padding-bottom: 3rem;
}

body.layout-fixed #main-section-header {
	flex-shrink: 0;
	margin-bottom: 20px;
}

footer {
	position: relative;
	flex-shrink: 0;
	width: 100%;
	max-width: 100vw;
	box-sizing: border-box;
	padding: 2rem 3rem;
	background-color: var(--main-bg-color);
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: flex-end;
}