*, *::before, *::after { box-sizing: border-box; }

* { 
    margin: 0; 
    padding: 0;
    font: inherit;
	scrollbar-gutter: stable;
}

html { 
	-webkit-text-size-adjust: 100%; 
	--background-color-primary: #232f3e;
	--background-color-secondary: #fff; 
	--text-color-primary: #94a3b8;	
	--text-color-secondary: #dadbdd;  
	--brand-color: #ffcb05; 
	--brand-accent-color: #131a22; 
}

body {
	background-color: var(--background-color-primary);
	color: var(--text-color-primary);
	font: 400 .875em/1.5 "elza", sans-serif; 
	font-size: clamp(1rem, .5svw + .6em, 1.25rem); 
}

a {
	color: inherit;
	text-decoration: none;
	transition: color .3s linear;
}
a:hover,
a:focus { color: var(--brand-color); }

address,
h2,
h3,
h4,
ol,
p,
pre,
ul { margin: 1.5em 0 .214286em; }

b,
.bold,
strong { font-weight: bolder; }

li ol,
li ul,
.join { margin-top: .5em; }

button { 
    background: none;
    border: none;
    border-radius: 3px;
    box-shadow: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    text-align: inherit;
    -webkit-appearance: none;
	appearance: none;
    overflow: visible;
}
button:focus-visible { outline: .25em dashed #000; }
button:focus:not(:focus-visible){
    outline: none;
    box-shadow: 1px 1px 5px rgba(1,1,0,.7);
}

h1, 
h2 { color: var(--brand-color); }

h3,
h4 { color: inherit; }

h1, 
h2, 
h3,
h4 { 
	font-weight: bold; 
    text-wrap: balance;
}

h1 {
	font-size: clamp(1.512rem, 1.8665rem + 1.554vw, 2.861rem);
	line-height: 1;	
}

h2 {
	font-size: clamp(1.512rem, 1.367rem + 0.7251vw, 1.8311rem);
	line-height: 1.25;
}

h3 {
	font-size: clamp(1.125rem, 3vw, 1.25rem);
	line-height: 1.3; 
}

h4 {
	font-size: clamp(.9rem, 3vw, 1.05rem);
	line-height: 1.1;  
}

h2 + h3, 
ul + h3 { margin-top: 1.75em; }

img, 
svg { 
	max-width: 100%;
	display: block; 
}

img {
	height: auto;	
	vertical-align: middle;
	font-style: italic;
}

ol,
ul { padding-left: 2em; }

p, 
li { 
	text-wrap: pretty; 
	max-width: 55ch;
}

pre, 
code { font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; }
	
pre { 
	tab-size: 3;
	white-space: pre-wrap;
}

q { quotes: "\201C""\201D"; }

nav :is(ul, ol){
    margin: 0;    
	padding-left: 0;  
}
nav li { list-style: none; }

.skip-to-content {
	position: absolute;
	left: 50%;
	transform: translateY(-100%);
}
.skip-to-content:focus {
	position: relative;
	transform: translateY(0%);
}

.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* page transitions */
@view-transition { navigation: auto; }

/* smooth scroll */
@media (prefers-reduced-motion: no-preference){
	:has(:target){ scroll-behavior: smooth;	}
}

/* animate target areas */
:target { scroll-margin: 1rem; }

:target > h2, 
:target > section > h2 { animation: target 1s; }

@keyframes target {
	to {
		outline: 5px solid var(--text-color-secondary);     
		outline-offset: .35em; 
	}
}

/* site container */
html { 
	--max-width: 1020px;  
	--outer-pad-lr: .5rem;  
		@media (min-width: 360px) { --outer-pad-lr: 1rem; }
}  

body {      
	width: min(calc(100% - var(--outer-pad-lr) * 2), var(--max-width));
		@media (min-width: 1100px) { width: min(100%, var(--max-width)); }  /* remove outer spacing */ 
		
	min-height: 100vh;
	min-height: 100lvh;  /* mobile optimized */  
	margin-inline: auto;
}

/* grid layout */
.layout, 
aside {
	display: grid;
	grid-template-columns: minmax(0, 520px);  
	justify-content: center;
}

.layout {
	row-gap: 40px;     	
	
	@media (min-width: 800px) {
		grid-template-columns: 300px 1fr;
		column-gap: 40px;   
		transition: all .3s ease;
	}
	@media (min-width: 1020px) { column-gap: 120px; }
}

aside {
	position: relative;
	margin-top: clamp(.85em, .5rem + 7.5vw, 5.5em);  /* add top spc */ 
	padding-block-end: 4.75em;  /* add btm spacing - Mobile ONLY (80px) */ 
	
	@media (min-width: 800px) {
		grid-template-columns: 340px 1fr;
		margin-top: 2.85em; 	
		padding-block-end: 0;  /* remove btm spacing */
	}
	@media (min-width: 1020px) { grid-template-columns: 420px 1fr; } 
}

/* footer area - full-bleed */
html { 
	overflow-x: hidden; 
	
	@media (min-width: 800px){ overflow-x: auto; }
} 
aside {
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
	background-color: var(--background-color-secondary);  
	
	@media (min-width: 800px){
		margin-inline: 0; 
		padding-inline: 0;
		background-color: var(--background-color-primary);  
	}
}

/* add bottom spacing - larger screens */
aside > section::after { 
	content: "";
	display: none;
	background-color: var(--background-color-secondary);  
	--padding-height-lrg: 6.25em;  /* (100px) */ 
	
	@media (min-width: 800px) {
		display: block;
		padding-block-end: calc(var(--padding-height-lrg) - 26px); 
	}
	@media (min-width: 1020px) { padding-block-end: calc(var(--padding-height-lrg) - 36px); }
	@media (min-width: 1200px) { padding-block-end: calc(var(--padding-height-lrg) - 51px); }
}  	

/* header area */
header {
	margin-top: 2rem;  
	display: flex;
	flex-direction: column;  
	align-items: center;
}	

a.profile::after {
	position: relative;		
	top: -1.1em;      
	left: 86%;  
	content: url('../img/linkedin_icon.svg');
	display: inline-block;
	width: 31px;
	aspect-ratio: 1; 
	
	@media (min-width: 800px){ top: -1.6em; }	
	@media (min-width: 1020px){ top: -1.75em; }
}

header img { 
	width: 200px;
	aspect-ratio: 1;
	object-fit: cover;
	transition: all .3s ease;
	
	@media (min-width: 800px){ width: 250px; }	
	@media (min-width: 1020px){ width: 287px; }	
}
header img:hover { filter: brightness(125%); }

header h1 { letter-spacing: .01em; }

header p {
	margin-top: .4em;
	font-size: clamp(.975rem, 3vw, 1.17rem);
	letter-spacing: -.01em;
	word-spacing: 1px;
}

.main-nav > ul {
	margin-top: .25em;  
	display: flex;
	flex-direction: row;
	column-gap: .325em;   
}

.main-nav li + li::before,
.main-nav a {
	font-size: 115%;
	
	@media (min-width: 600px) and (min-resolution: 1.25dppx){ font-size: 125%; }  /* scale and layout setting at 125% or higher */   
	@media (min-width: 600px) and (max-resolution: 1dppx){ font-size: 110%; }  /* scale and layout setting at 100% or less */  
}

.main-nav li + li::before { 
	content: "|"; 
	padding-right: .325em;  /* same spacing as column-gap */ 
}

.main-nav a {
	display: inline-block;  
	letter-spacing: -.01em;
	color: var(--text-color-secondary);        
	border-bottom: 3px solid var(--background-color-primary);  /* allow for smooth animation */ 
	transition: all .3s ease-in-out;  
}
.main-nav a:hover, 
.main-nav a:active { 
	color: var(--brand-color);
	border-bottom-color: var(--brand-color); 
}

.main-nav a.current {
	font-weight: 500; 
	color: #fff;  
	border-bottom: 3px solid var(--brand-color); 
}

/* main area */		
article { 
	margin-bottom: 1rem;  

	@media (min-width: 800px){ margin-bottom: 1.15rem; }
}

article > section { margin-top: 3em; }
article > section:first-of-type { margin-top: 0; }

article > section:nth-of-type(3) > ul { max-width: 55ch; }

article > section:first-of-type h2 { 
	margin-top: .75em;   
	
	@media (min-width: 800px) { margin-top: 1.5em; }
}

/* tagline */
.tagline {	
	width: max-content;	
	text-align: center;
	padding: clamp(.4em, 2.5vw, .7em);
	padding-bottom: clamp(.2em, 2.5vw, .35em); 
	background-color: #37475A;
	box-shadow: inset 0 0 10px rgba(19,26,34,.5);   
}
.tagline > q {
	font-size: clamp(.95em, 5vw, 1.125em);
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--text-color-secondary);    
	
	&::before, 
	&::after {
		font-family: Georgia, "serif";
		font-size: 2em;  
		line-height: .1em;
	}
	&::before {
		margin-right: .015em;
		vertical-align: -.25em;	
		color: var(--text-color-secondary);   
	}
	&::after {
		margin-left: .01em; 	
		vertical-align: -.55em;   
		color: var(--brand-color);
	}
	
	& > span { color: var(--brand-color); }	
}

/* code samples */	
.accordion { margin: 1.5em 0 .214286em; }
	
.accordion .card {	
	margin: .6em 0 .2142857em;   
	border-radius: 4px;		
}
.accordion .card:first-of-type { margin-top: 0; }
		
.accordion h3 { 	
	margin: 0; 
	line-height: 1; 
}
	
.accordion button { 
	width: 100%; 
	display: flex;
	align-items: center;
	padding: .5em;
	color: inherit; 
	border: 2px solid var(--brand-accent-color);  
	background-color: var(--brand-accent-color);   
	transition: all .3s ease-in-out;
}
.accordion button:hover { 
	color: var(--text-color-secondary);    
	border-color: var(--brand-color);
}
	
.accordion .icon {
	display: inline-flex;
	justify-content: center;
    align-items: center;
	margin-left: auto;
	width: 2rem;
	aspect-ratio: 1;
	border-radius: 50%;
	color: inherit;
	border: 1px solid rgba(148,163,184,.25);  
	background-color: #37475A;
}
.accordion .icon > i { transition: all 0.25s; }

.accordion button:hover .icon { 
	color: var(--brand-color);
	border-color: rgba(255,203,5,.25);
}

.accordion h3:has(.active) .icon { border-color: rgba(255,203,5,.25); }
	
/* js disabled */
.no-js .accordion [aria-expanded="true"] { 
	color: var(--brand-color);
	border-color: var(--text-color-secondary); 
}
.no-js .accordion [aria-expanded="true"] > .icon > i { 
	color: var(--brand-color);
	rotate: 180deg;
}

/* active card title */
.accordion h3:has(.active) button { 	
	color: var(--brand-color);
	border-color: var(--text-color-secondary);   
}
.accordion h3:has(.active) button > .icon > i { 	
	color: var(--brand-color);
	rotate: 180deg;
} 

.accordion .panel {
	padding: clamp(.15rem, 10vw, .45rem);
	background-color: #37475A;
	border-radius: 0 0 4px 4px;
}

/* pre / code */
pre:has(code) { 
	margin: 0; 	  
	background-color: inherit; 
}
	
pre:has(> code) { 
	font-size: 95%;
	letter-spacing: -.01em;
	color: inherit; 
	word-break: break-all;  
	
	@media (min-width: 1020px){ font-size: .975rem; }
}

/* syntax highlighter */
code[class*="language-"] {
	color: #f8f8f2;
	background-color: inherit;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	text-align: left;
	word-spacing: normal;
	word-wrap: normal;
	hyphens: none;
}
		
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata { color: #8292a2; }

.token.punctuation { color: #f8f8f2; }

.token.namespace { opacity: .7; }

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted { color: #ffa07a; }

.token.boolean,
.token.number { color: #ae81ff; }

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted { color: #a6e22e; }

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable { color: #f8f8f2; }

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name { color: #fffe78; }

.token.keyword { color: #66d9ef; }

.token.regex,
.token.important { color: #fd971f; }

.token.important,
.token.bold { font-weight: bold; }
.token.italic { font-style: italic; }

.token.entity { cursor: help; }
	
/* skills */
.cluster { 
	display: flex;
	flex-wrap: wrap;
	gap: .8em 1em;
	padding-left: 0;  /* overwrite */ 
}
.cluster li { 
	min-width: 4rem; 
	text-align: center;
	list-style: none;  /* overwrite */ 	
	padding: .35em .7em;   
	border: 2px solid rgba(148,163,184,.5); 
	border-radius: .35em;   
	background-color: var(--brand-accent-color); 
}
.cluster.join { margin-top: .75em; }

/* top of page */
.pageTop { 
	margin-top: 2em;  
	text-align: right; 
	
	@media (min-width: 600px){ margin-top: 1.5em; }
}

.pageTop a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 3rem;  
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid rgba(255,203,5,.5);
}
.pageTop a::before {	
	color: var(--brand-color);
	content: "\f077";  /* chevron-up icon */   
	display: inline-block;
	font-family: 'Font Awesome 6 Free';
	font-size: 160%;   
	font-weight: 900;  
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	transition: scale .35s ease-in-out;
}
.pageTop a:hover::before { scale: 1.2; } 

/* hire */
.hdr,
.info > div { background-color: var(--background-color-secondary); }

.hdr h2,
.info > div h3 { line-height: 1; }

.hdr h2, 
.hdr h2 > span { width: 100%; }

.hdr h2 {
	margin-top: -1.05em;  
	font-size: clamp(1.6848rem, -0.1625rem + 9.2365vw, 6.9958rem);
	color: var(--text-color-primary);  

	@media (min-width: 800px){
		margin-top: 0;   
		display: inline-flex;
		flex-direction: column;
		text-indent: 10%;  
		background-color: var(--background-color-primary);    
	}
}
.hdr h2 > span { 
	display: table;	
	margin-top: .07em;
	line-height: 1.4;
	
	@media (min-width: 800px){
		line-height: 1;  
		margin-top: 0;
		padding-top: .22em;  	
		background-color: var(--background-color-secondary);    	
	}
}

/* info */
.info { 
	display: flex;
	flex-direction: column;
	
	@media (min-width: 800px) { flex-direction: row; }
}

.info > div { 
	padding-inline-start: .125rem;  /* align section*/   
	
	@media (min-width: 800px) {
		flex-basis: 100%; 	
		padding-block-start: .6em; 
		padding-inline-start: 3.5rem;   
		border-radius: 1em 1em 0px 0px;  
		transition: all .3s ease-in-out;
	}
	@media (min-width: 900px) { 
		padding-block-start: .9em;	
		padding-inline-start: 5rem; 
	}
	@media (min-width: 1020px) { padding-block-start: 1.5em; }
	@media (min-width: 1200px) { padding-block-start: 2.25em; }
	@media (min-width: 1200px) and (max-resolution: 1dppx){ padding-block-start: 1.9em; }
}

.info > div * { color: var(--background-color-primary); }

.info > div:first-of-type h3 { 
	margin-top: 1.25em;  /* decrease top spacing */   

	@media (min-width: 800px) { margin-top: 0; }
}  

.info > div a:hover,
.info > div a:focus { text-decoration: underline; }

/* two equal cols - add icons */
@media (min-width: 800px) {
	.info > div:hover { 
		margin-top: -1.5em; 
		background-color: var(--brand-color);
	}
	
	.info > div h3 { position: relative; }
	
	.info > div:nth-of-type(2) h3 { margin-top: 0; }
	
	.info > div	h3::before { 
		position: absolute;
		top: 0;	
		display: inline-block;
	}
	
	.info > div:first-of-type h3::before {  
		left: -1.5em;  
		content: url('../img/location_icon.svg');
		width: 20px;   
		height: 27px;  
	}
	.info > div:nth-of-type(2) h3::before {  
		left: -2em;   
		content: url('../img/message-text_icon.svg');
		width: 32px;  
		aspect-ratio: 1; 	
	}
	
	.info :is(address, p){ font-size: .9375em; }  /* decrease font sizing */
}

/* increase font sizing */
@media (min-width: 900px) {
	.info :is(address, p){ font-size: 1em; }
}

/* maintain current font sizing (scale and layout setting at 100% or less) */ 
@media (min-width: 900px) and (max-resolution: 1dppx){ 
	.info :is(address, p){ font-size: .9375em; }  
}

/* increase icon spacing & sizing */
@media (min-width: 1020px) {
	.info > div:first-of-type { padding-inline-start: 8rem; }	
	.info > div:nth-of-type(2) { padding-inline-start: 6rem; }
	
	.info > div:first-of-type h3::before {  
		left: -2.25em;  	
		width: 26px;
		height: 35px;
	}
	.info > div:nth-of-type(2) h3::before {  
		left: -2.75em;  
		width: 40px;
	}
}


/* print */
@media print {
	
	/* page setup */
	@page {
        size: A4 portrait; 
		margin: .5cm;  
		orphans: 4;
        widows: 3;
    }
	
	/* reset overall */
	* {
		background: #fff !important;
		border: none !important;
		box-shadow: none !important;
		color: #000 !important;
		text-align: left !important;
		text-shadow: none !important;
	}
	
	/* set defaults for body */
	body { font: normal 12pt/1.3 Georgia, "Times New Roman", Times, serif; }
	
	h1, 
	h2, 
	h3, 
	h4 { font-weight: bold; }
	
	h1 { font-size: 28pt; }
  	h2 { font-size: 18pt; }
	
  	h3, 
	header p { font-size: 14pt; }
		
	h4, 
	p, 
	pre,
	pre:has(> code),
	li,
	address { font-size: 12pt; }
	
	/* set width */
	p { max-width: 100%; }
	
	/* set spacing */
	h2, 
	h3, 
	h4, 
	p, 
	address,
	.accordion, 
	.info > div:nth-of-type(2) h3 { margin-top: 1em; }
	
	h2 + h3, 
	ul + h3,
	.accordion .card, 
	.info > div:first-of-type h3 { margin-top: 1.25em; }

	.join,
	.cluster.join, 
	pre:has(code) { margin-top: .25em; }
	
	article > section,
	article > section:first-of-type,
	aside { margin-top: 2em; }

	/* add page breaks */
	h2,
	h3,
	h4 { page-break-after: avoid; }
	
	article > section:nth-of-type(2) .card:last-child > h3, 
	article > section:nth-of-type(3) { page-break-before: always; }
	
	/* format numbers */
	.number { 
		font-family: "Times New Roman", Times, serif; 
		font-size: 105%;  
	}
	
	/* reset layout */
	.layout, 
	header,
	aside,
	.hdr h2,
	.info { display: block !important; }
	
	/* reset spacing */
	header p { word-spacing: 0; }
	
	/* code */
	.accordion h3 { line-height: 1.3; }
	
	.accordion button,
	.accordion .panel { 
		display: block !important; 
		padding: 0;
	} 
	
	pre, 
	code { font-family: "Times New Roman", Times, serif; }
	
	/* tagline */
	.tagline {	
		width: auto;
		padding: 0;
	}
	.tagline > q { font-size: 115%; }
	
	.tagline > q::before, 
	.tagline > q::after { color: #000; }
	
	/* skills */
	.cluster { 
		display: block; 
		padding-left: 1.15em;  
	} 
	.cluster li { 
		list-style: disc;
		padding: 0;
	}
	
	/* hire me */
	.hdr h2,
	.info > div h3 { line-height: 1.3; }
	
	.hdr h2 { 
		margin-top: 1em;
		font-size: 18pt;	
		text-indent: 0;
	}
	.hdr h2 > span { 
		display: inline;
		padding-top: 0; 
	}
	
	.info > div { 
		padding-block-start: 0 !important; 
		padding-inline-start: 0 !important;
	}
	
	.info > div h3 { position: static; }
	
	.info > div:hover { margin-top: 0; }
	
	.info > div	h3::before, 
	a.profile::after { content: none !important; }
	
	/* hide ALL unnecessary elements */
	.skip-to-content, 
	header img, 
	.main-nav,
	.accordion .icon,
	.pageTop,
	.hdr h2 > br { display: none; }
	
	/* display external links */
	a { word-wrap: break-word; }
	a::after { 
		content: " (" attr(href) ") "; 
		font-size: 90%;
	}
	
	/* add copyright info */
	aside::after {
		width: 100%;
		margin-top: 1.75em;
		content: "All Rights Reserved. (c) 2024-2025 pfults.com";
		display: block;
		font-family: "Times New Roman", Times, serif; 
		font-size: 90%;
	}
	
}