/* 
Welcome, portfolio reviewer. You're one of my kind of people if you're poking around back here. This site was made with as minimal code as I could muster and is lovingly hand-crafted.
Design & Words: My own.
Fonts: Fields, Freight Text
Breakpoints: 576px Lg Mobile / 768px Tablet / 1024px Desktop / 1400px Lg Desktop /1800px Xl Monitor
*/	

	
@import url("https://use.typekit.net/dsu0zbp.css");

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

html {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	}

/* force browser color scheme to align with data-theme */
html[data-theme="dark"] { 
	color-scheme: dark; 
	}

html[data-theme="light"] { 
	color-scheme: light; 
	}

html[data-theme="papyrus"] {
  color-scheme: dark;
  --font-headers: "papyrus-std", sans-serif;
  --font-text: 	"papyrus-std", serif;
  }
	
@media (prefers-reduced-motion: no-preference) {

	:root {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	
	:root {
		scroll-behavior: auto;
		}
	}
 
:root {
	--color-primary-purple: 	#4C4561;
	--color-primary-purple-rgb: 76, 69, 97;
	--color-gray-blue:			#33393C;
	--color-pale-blue: 			#AABDC9;
	--color-pale-blue-rgb: 		213, 222, 228;
	--color-palest-blue: 		#D5DEE4;
	--color-salmon: 			#E08D79;
	--color-salmon-rgb: 		224, 141, 121; 
	--color-ochre: 				#D1B677;
	--color-ochre-rgb:			209, 182, 119;
	--color-khaki: 				#DDDDD7;
	--color-light-khaki: 		#F6F5EF; 
	--color-dark-khaki:			#2C2C2B;
	--color-avatar-blue: 		#0870A9;
	--color-avatar-dark-blue:	#193359;
	
	color-scheme: dark light;
	--bg-color-body: light-dark(var(--color-khaki), var(--color-primary-purple));
	--color-text: light-dark(var(--color-dark-khaki), var(--color-khaki));
	--color-primary-header: light-dark(var(--color-primary-purple), var(--color-pale-blue));
	--color-border: light-dark(rgba(var(--color-primary-purple-rgb), 0.25), rgba(var(--color-pale-blue-rgb), 0.25));
	--focus-color: light-dark(#0066cc, var(--color-ochre));
	--color-link: light-dark(var(--color-dark-khaki), var(--color-palest-blue));
	--color-link-hover-bg: light-dark(var(--color-ochre), var(--color-gray-blue));
	
	--font-headers: "fields", sans-serif;
	--font-text: 	"freight-text-pro", serif;
	--font-text: 	"merriweather", serif;
	--font-text: 	"proxima-nova", serif; /* 300, 400, 500 600 */
	
	--font-weight-black: 	900;
	--font-weight-bold: 	700;
	--font-weight-semibold: 600;
	--font-weight-medium: 	500;
	--font-weight-regular: 	400;
	--font-weight-thin: 	300;
	
	/* root font sizing - scale to fixed size at large desktop */
	/* clamp equivalent - but zoomable */
	--font-size-display-1: calc(1.625rem + 4.5vw);
	--font-size-display-2: calc(1.575rem + 3.9vw);
	--font-size-display-3: calc(1.500rem + 3.1vw);
	--font-size-xl-1: calc(1.475rem + 2.7vw);
	--font-size-xl-2: calc(1.425rem + 2.1vw);
	--font-size-xl-3: calc(1.400rem + 1.875vw);
	--font-size-lg-1: calc(1.4rem + 1.75vw);
	--font-size-lg-2: calc(1.3rem + 1.25vw);
	--font-size-lg-3: calc(1.25rem + 0.75vw);
	--font-size-md-1: calc(1.125rem + 0.5vw);
	--font-size-md-2: calc(1.125rem + 0.25vw);
	--font-size-md-3: 1.125rem;	
	/* root font sizing - fixed sizing across all breakpoints */
	--font-size-base: 1rem;
	--font-size-sm-1: calc(0.9 * var(--font-size-base));
	--font-size-sm-2: calc(0.85 * var(--font-size-base));
	--font-size-sm-3: calc(0.8 * var(--font-size-base));
	
	--spacing-2:  0.125rem;
	--spacing-4:  0.25rem;
	--spacing-8:  0.5rem;	
	--spacing-12: 0.5rem;	
	--spacing-16: 0.75rem;
	--spacing-24: 1.125rem;
	--spacing-28: 1.375rem;
	--spacing-32: 1.5rem;
	--spacing-40: 1.75rem; 
	--spacing-48: 2rem;
	--spacing-64: 2.5rem;
	--spacing-80: 3rem;
	--spacing-128: 5rem;
	
	--spacing-minimum: var(--spacing-4); /* 0.25 */
	--spacing-xx-small: var(--spacing-8); /* 0.5 */
	--spacing-x-small: var(--spacing-12); /* 0.75 */
	--spacing-small: var(--spacing-16); /* 1 */
	--spacing-medium-small: var(--spacing-24); /* 1.5 */
	--spacing-standard:  var(--spacing-32); /* 2 */
	--spacing-medium-large: var(--spacing-40); /* 2.5 */
	--spacing-large: var(--spacing-48); /* 3 */
	--spacing-x-large: var(--spacing-64); /* 4 */
	--spacing-xx-large: var(--spacing-80); /* 5 */
	--spacing-maximum: var(--spacing-128); /* 8 */	
	
	--letter-spacing-xx-small: -.025em;
	--letter-spacing-x-small: -.0125em;
	--letter-spacing-small: -0.0075em;
	--letter-spacing-standard: 0;
	
	--line-height-xx-large: 2;
	--line-height-x-large: 1.8;
	--line-height-large: 1.6;
	--line-height-medium: 1.4;
	--line-height-base: 1.4;
	--line-height-small: 1.2;
	--line-height-x-small: 1.1;
	--line-height-xx-small: 1.0;
	
	--link-underline-offset: 0.25rem;
	--link-underline-skip-ink: auto;
	--link-transition: var(--transition-base);
	--link-underline-hover-color: var(--color-primary-accent);	
	
	--focus-visible: 3px dashed var(--ps-sky-blue-500);
	--focus-visiable-offset: 3px;
	--focus-visiable-offset-large: 0.5rem;
	
	--transition-short:		all .125s ease-in-out;
	--transition-standard: 	all .25s ease-in;
	
}

	@media (min-width: 1400px) {
	
	:root {
		--font-size-display-1: 5rem;
		--font-size-display-2: 4.5rem;
		--font-size-display-3: 4rem;
		--font-size-xl-1: 3.5rem;
		--font-size-xl-2: 3rem;
		--font-size-xl-3: 2.875rem;
		--font-size-lg-1: 2.75rem;
		--font-size-lg-2: 2.25rem;
		--font-size-lg-3: 1.75rem;
		--font-size-md-1: 1.5rem;
		--font-size-md-2: 1.325rem;
		--font-size-md-3: 1.25rem;
		--font-size-md-2: 1.25rem;
		--font-size-md-3: 1.125rem;
	}
	}
	
	
@media (min-width: 768px) {
	:root {
		--spacing-12: 0.625rem;
		--spacing-16: 0.875rem;
		--spacing-24: 1.25rem;
		--spacing-28: 1.5rem;
		--spacing-32: 1.75rem;
		--spacing-40: 1.875rem;
		--spacing-48: 2.5rem;
		--spacing-64: 3.0rem;
		--spacing-80: 4.0rem;
		--spacing-128: 6.5rem;
	}
	}
	
@media (min-width:  1024px) {
	
	:root {
		--spacing-12: 0.75rem;
		--spacing-16: 1.0rem;
		--spacing-24: 1.5rem;
		--spacing-28: 1.75rem;
		--spacing-32: 2.00rem;
		--spacing-40: 2.5rem;
		--spacing-48: 3.0rem;
		--spacing-64: 4.0rem;
		--spacing-80: 5.0rem;
		--spacing-128: 8rem;
		}
	}

body {
	background-color: var(--bg-color-body);
	background-image: url(../images/bg-speckles.png);
	background-repeat: repeat;
	transition: var(--transition-standard);
	}

[data-theme="dark"] {
main {
	background-image:
		radial-gradient(ellipse 200% 100vh at -20% 0%, rgba(var(--color-pale-blue-rgb),0.2) 0%, transparent 55%),  
		radial-gradient(ellipse 125% 150vh at 120% 0%, rgba(var(--color-salmon-rgb), 0.5) 0%, transparent 55%);
	
	@media (min-width: 1024px) {
		
		background-image:
			radial-gradient(ellipse 100% 75vh at -10% 0, rgba(var(--color-pale-blue-rgb),.3) 0%, transparent 75%),  
			radial-gradient(ellipse 65% 150vh at 110% 0, rgba(var(--color-salmon-rgb), 0.75) 0%, transparent 65%)
			}
		}
	}

[data-theme="light"] {
	main {
		background-image:
			radial-gradient(ellipse 200% 100vh at -20% 0%, rgba(var(--color-ochre-rgb),0.5) 0%, transparent 55%),  
			radial-gradient(ellipse 125% 150vh at 120% 0%, rgba(var(--color-salmon-rgb), 0.75) 0%, transparent 55%);
		
		@media (min-width: 1024px) {
			
			background-image:
				radial-gradient(ellipse 200% 200vh at -10% 0, rgba(var(--color-ochre-rgb),.5) 0%, transparent 40%),  
				   radial-gradient(ellipse 75% 150vh at 110% 0, rgba(var(--color-salmon-rgb), 0.75) 0%, transparent 75%)
				}
			}
		}
		
/*/
/// Ya Basic Styling
/*/
					
h1, h2, h3, h4, h5, h6 {
	color: var(--color-primary-header);
	line-height: var(--line-height-medium);
	margin: 0;
	}

h1 {
	font-family: var(--font-headers);
	font-weight: var(--font-weight-bold);
	font-size: 6rem;
	letter-spacing: -.25rem;
	align-self: flex-end;
	position: relative;
	
	span.last-name {
		position: relative;
		left: 1rem;
		
		@media (min-width: 576px) {
			left: auto;
			}
		}
	
	@media (min-width: 576px) {
		font-size: 13.25vw;
		letter-spacing: -.325rem;
		}
	
	@media (min-width: 1440px) {
		font-size: 12rem;
		letter-spacing: -.5rem;
		}
	}

h1 span.wingdings-title,
img.wingdings-headshot {
	display: none;
	}
	
[data-theme="papyrus"] {

	h1 span.nelson-title,
	img.nelson-headshot {
		display: none;
		}
	
	h1 span.wingdings-title,
	img.wingdings-headshot {
		display: block;
		}
			
		section.steve-nelson {
			
		h1  {
			text-transform: uppercase;
			font-size: 2.25rem;
			line-height: 1.2;
			letter-spacing: 0;
		
			span {
				padding-left: 2vw;
				}
			@media (min-width: 576px) {
				font-size: 5vw;
				letter-spacing: 0;
				}
			
			@media (min-width: 1440px) {
				font-size:5rem;
				letter-spacing: 0;
				}
				
			
			img.icon-chemex,
			img.icon-shaka {
				display: none;
				}
			}
		}
	}
	
[data-theme="dark"] {
	
	h1  {
		
		img.icon-chemex {
			display: none;
			}
		
		img {
			height: 5rem;
			width: auto;
			position: absolute;
			
			@media (min-width: 576px) {
				position: relative;	
				}
			
			@media (min-width: 576px) {
				height: 10.25vw;		
				width: auto;
				margin-left: -3vw;
				margin-right: -4vw;
				z-index: 3;
				position: relative;
				}
			
			@media (min-width: 1440px) {
				height: 9rem;		
				width: auto;
				margin-left: -3rem;
				margin-right: -4rem;
				z-index: 3;
				position: relative;
				}
			}
		}
	}
	
		
[data-theme="light"] {
	
	h1 {
	img.icon-shaka {
		display: none;
		}
		
		img {
			height: 5rem;
			width: auto;
			position: absolute;
			margin-left: 1rem;
		
			@media (min-width: 576px) {
				position: relative;	
				}
			
			@media (min-width: 576px) {
				height: 10.25vw;		
				width: auto;
				margin-left: -2vw;
				margin-right: -2.5vw;
				z-index: 3;
				position: relative;
				top: 1.5vw;
				}
			
			@media (min-width: 1440px) {
				height: 10.25rem;		
				width: auto;
				margin-left: -2rem;
				margin-right: -2.5rem;
				z-index: 3;
				position: relative;
				top: 1.5rem;
				}
			}
		}
	}

h2, h3 {
	opacity: 0;
	}

h2, h3, h4 {
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-xx-small);
	font-family: var(--font-headers);
	text-wrap: pretty;
	}
	
h2 {
	margin-top: var(--spacing-xx-large);
	}

h2 {
	font-size: var(--font-size-display-1);
	font-weight: var(--font-weight-bold);
	  display: flex;
	  align-items: center;
	  gap: var(--spacing-standard);
	
	&::after {
	  content: "";
	  flex-grow: 1; 
	  height: 1px;
	  background-color: var(--color-border);
	  }	
	}

h3, .h3 {
	font-size: var(--font-size-lg-1);
	display: flex;
	align-items: center;
	gap: var(--spacing-standard);
	line-height: var(--line-height-sm);
	
	&::after {
	  content: "";
	  flex-grow: 1; 
	  height: 1px;
	  background-color: var(--color-border);
	  }	
	}

h3,
ul + .h3 {
	margin-top: var(--spacing-xx-large);
	}

.h3 {
	margin-top: var(--spacing-x-large);
	}

h4 {
	margin-top: var(--spacing-large);
	}

ul + h4 {
	margin-top: var(--spacing-x-large);
	}

p, ul, li, ol {
	color: var(--color-text);
	font-family: var(--font-text);
	text-wrap: pretty;
	letter-spacing: var(--letter-spacing-small);
	}

p {
	font-size: var(--font-size-md-2);
	line-height: var(--line-height-large);
	font-weight: var(--font-weight-regular);
	margin-top: var(--spacing-medium-small);
	
	@media (min-width: 768px) {
	font-size: var(--font-size-md-1);
	line-height: var(--line-height-x-large);
	}
	
	&.lead {
		font-family: var(--font-headers);
		font-size: var(--font-size-lg-3);
		line-height: var(--line-height-large);
		margin-top: var(--spacing-small)
		}
	}

.contact p {
	margin-top: 0;
	margin-left: var(--spacing-standard);
	position: relative;
	z-index: 99;
	font-size: var(--font-size-md-1);
	
	span {
		font-family: var(--font-headers);
		color: var(--color-salmon);
		font-weight: var(--font-weight-bold);
		}
	}

.overview-bio p.disclaimer {
	font-size: var(--font-size-md-3);
	line-height: var(--line-height-small);
	border-top: 1px solid var(--color-border);
	margin-top: var(--spacing-medium-large);
	padding-top: var(--spacing-small);
	}

a:link,
a:visited {
	color: var(--color-link);
	text-underline-offset: 6px;
	text-decoration: underline;
	text-decoration-style: solid;
	text-decoration-thickness: 1px;
	transition: var(--transition-standard);
	padding: 0 var(--spacing-minimum);
	margin-left: 6px;
	}

a:hover {
	background-color: var(--color-link-hover-bg);
	text-decoration-color: transparent;
	}

ul {
	padding-left: var(--spacing-standard);
	}

img {
	width: 100%;
	height: auto;
	}

input:focus-visible + .slider,
	summary:focus-visible {
		outline: 4px dashed var(--focus-color);
		outline-offset: 4px;
		}
	
	p a:focus-visible {
		outline: 4px dashed var(--focus-color);
		text-decoration-color: transparent;
		}
		
section {
	width: 100%;
	max-width: 1400px;
	padding: 0 var(--spacing-large);
	
	@media (min-width: 1440px) {
		padding: 0;
		margin: 0 auto;
		}
	}

.grid {
	display: grid;
	grid-template-columns: 1fr;
	}

@media (min-width: 1024px) {
		
	.grid-1-2 {
		grid-template-columns: 1fr 2fr;
		}
		
	.grid-2-1 {
		grid-template-columns: 2fr 1fr;
		}
	}

@media (min-width: 1200px) {	
	
	.grid-3-2 {
		grid-template-columns: 3fr 2fr;
		}
	}
		
/*/
/// Header
/*/
	
section.steve-nelson {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	padding-top: 3rem;
	
	div.bio-image {
		grid-column: 3 / 11;
		grid-row: 1 / 2;
		position: relative;
		
		img {
			width: 100%;
			height: auto;
			border-radius: 100%;
			}
		}
	
	h1 {
		grid-column: 1 / 12;
		grid-row: 2 / 2;
		z-index: 1;
		line-height: 0.75;
		position: relative;
		}
	
	@media (min-width: 768px) {
			
		h1 {
			grid-row: 1 / 2;
			z-index: 1;
			}
		
		div.bio-image {
			grid-column: 10 / -1;
			grid-row: 1 / 2;
			}
		}
	}

[data-theme="light"] {

	section.steve-nelson div.bio-image {

		div {
			position: absolute;				
			opacity: 0.5;
			}
		
				
		div:nth-of-type(1) {
			inset: 0;
			background: url(../images/coffee-stain.png);
			background-repeat: no-repeat;
			background-size: contain;
			z-index: 0;
			top: 50%;
			left: 50%;
			translate: -50% -50%;
			width: 150%;
			height: 150%;
			}
			
		div:nth-of-type(2),
		div:nth-of-type(3),
		div:nth-of-type(4) {
			display: none;
			}		
		}	
	}

[data-theme="dark"] {
	
	section.steve-nelson div.bio-image {

		div {
			position: absolute;
			opacity: 1;
			border-radius: 50%;
			mix-blend-mode: soft-light;
			display: block;
			}
		
		div:nth-of-type(1) {
			top: 5%;
			left: -5%;
			width: 37.5%;
			height: 37.5%;
			background-color: var(--color-salmon);
			}
		
		div:nth-of-type(2),
		div:nth-of-type(3),
		div:nth-of-type(4) {
			display: block;
			}	
			
		div:nth-of-type(2) {
			top: 15%;
			right: -5%;
			width: 22.5%;
			height: 22.5%;
			background-color: var(--color-ochre);
			}
		
		div:nth-of-type(3) {
			top: 70%;
			right: 0;
			width: 32.5%;
			height: 32.5%;
			background-color: var(--color-pale-blue);
			}
		
		div:nth-of-type(4) {
			bottom: 15%;
			left: -5%;
			width: 22.5%;
			height: 22.5%;
			background-color: var(--color-ochre);
			}
		}
	}
		
/*/
/// Video Embed
/*/

.video-embed {
	/* Only display in Papyrus Mode */
	display: none; 
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: var(--spacing-standard) auto;
	position: relative;
	overflow: hidden;
	
	/* Style the poster button wrapper */
	.video-poster {
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
		border: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: var(--transition-standard);
	
		&:hover {
			filter: brightness(1.1);
			}
		}

	.play-icon {
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 20px 0 20px 35px;
		border-color: transparent transparent transparent #fff;
		filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.5));
		}

	iframe {
		width: 100%;
		height: 100%;
		border: none;
		}
	}

html[data-theme="papyrus"] {
	
	body {
		background: linear-gradient(to top, var(--color-avatar-blue) 0%, var(--color-avatar-dark-blue) 25%);
		}
	
	.video-embed {
		display: block;  
		}
	}

/*/
/// Overview
/*/	  

section.overview {
	margin-top: var(--spacing-standard);
	
	> div {
	
		@media (min-width: 1024px) {
			padding: var(--spacing-small) var(--spacing-large);
			}
		}
	
	.overview-highlights {
		border-top: 1px solid var(--color-border);
		margin-top: var(--spacing-large);
		padding-top: var(--spacing-small);
		display: flex;
		flex-direction: column;
		grid-gap: var(--spacing-large);
		
		ul.list-highlights {	
			font-size: var(--font-size-lg-3);	
			font-weight: var(--font-weight-regular);
			
			li {
				color: var(--color-primary-header);
				margin-top: var(--spacing-standard);
				line-height: var(--line-height-small);
				font-family: var(--font-headers);
				
				&::marker {
					color: var(--color-salmon);
					}
				}
			}	
		
		img.skills-hex {
			width: 100%;
			height: auto;
			}	
	
	@media (min-width: 576px) {
		
		img.skills-hex {
			width: 75%;
			align-self: center;
			}
		}
	
	@media (min-width: 768px) {
		flex-direction: row;
		
		img.skills-hex {
			width: 50%;
			}
		}
		
	@media (min-width: 1200px) {
			flex-direction: column;
			border-top: none;
			border-left: 1px solid var(--color-border);
			margin-top: 0;
			padding-top: 0;
			
			img.skills-hex {
				width: 100%;
				}
			}
		}
	}

[data-theme="light"] {
	
	img.add-purple-background {
		background-color: var(--color-primary-purple);
		padding: var(--spacing-small);
		border-radius: 1rem;
		}
	}
	
/*/
/// Details Accordion
/*/

.details {
	margin-top: var(--spacing-large);
	
	details:first-of-type {
		margin-top: var(--spacing-x-large);
		}
	
	.grid-2-1 > div {
		padding: 0;
		
		@media (min-width: 1024px) {
			padding: 0 var(--spacing-standard);
			}
		}
		
	ul {
		font-size: var(--font-size-md-2);
		font-weight: var(--font-weight-regular);
		
		li {
			padding-top: var(--spacing-medium-small);
			break-inside: avoid;	
			
			&::marker {
				color: var(--color-salmon);
				}
			}
		
		&.list-experience {
			
			@media (min-width: 1200px) {
				max-width: 80%;
				margin-left: 10%;
				}
			}
		
		&.list-experience li {
			padding-top: var(--spacing-standard);
			line-height: var(--line-height-large);
			}
		
		&.list-tools {
		list-style-type: none;
		padding-left: 0;
			
			> li {
				color: var(--color-primary-header);
				font-weight: var(--font-weight-medium);
				font-family: var(--font-headers);
				font-size: var(--font-size-md-1);
				}
				
			 li ul {

				li {
					padding-top: var(--spacing-minimum);
					}
				}
			}
		}
	}
	
details {
	border-bottom:  1px solid var(--color-border);
	
	.accordion-content {
		padding: 0 0 var(--spacing-xx-large) 0;
		
		@media (min-width: 768px) {
			padding: 0 var(--spacing-standard) var(--spacing-xx-large) var(--spacing-standard);
			}
		}
	}
	
details:first-of-type {
	border-top:  1px solid var(--color-border);
	}

summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	padding: var(--spacing-standard) 0;

	
	@media (min-width: 768px) {
		padding: var(--spacing-standard);
		}
		
	h3 {
		font-size: var(--font-size-xl-1);
		margin-top: 0;
		font-weight: var(--font-weight-regular);
		}
	}

.accordion-content {
	
	p.org-and-dates {
		font-family: var(--font-text);
		font-size: var(--font-size-md-1);
		margin-top: var(--spacing-xx-small);
		margin-left: var(--spacing-standard);
		line-height: var(--line-height-medium);
		}

	p.experience-overview {
		font-family: var(--font-headers);
		font-weight: var(--font-weight-thin);
		font-size: var(--font-size-md-1);
		border-left: var(--color-salmon) 1px solid;
		padding-left: var(--spacing-standard);
		margin-left: var(--spacing-x-small);
		margin-top: var(--spacing-large);
		margin-bottom: var(--spacing-small);
		
		strong {
			font-weight: var(--font-weight-medium);
			color: var(--color-primary-header);
			}
		}
	
	li strong {
		font-family: var(--font-headers);
		font-weight: var(--font-weight-medium);
		color: var(--color-primary-header);
		font-size: var(--font-size-md-1);
		}
				
	@media (min-width: 768px) {
		
		p.experience-overview {
			margin-left: var(--spacing-large);
			width: 75%;
			}
		}
	}

summary::after {
	content: '';
	border: solid var(--color-primary-header);
	border-width: 0 2px 2px 0;
	display: inline-block;
	padding: 10px;
	transition: 0.3s;
	transform: rotate(45deg);
	position: relative;
	top: -5px;
	
	@media (min-width: 768px) {
		padding: 16px;
		top: -8px;
		}
	}

details[open] > summary::after {
	transform: rotate(-135deg);
	top: 0;
	}

summary::-webkit-details-marker {
	display: none;
	}
 
@media (min-width: 768px) {

	ul.list-two-column,
	ul.list-three-column {
		column-count: 2;
		column-gap: var(--spacing-x-large);
		}
	}

@media (min-width:  1024px) {
	
	ul.list-three-column {
		column-count: 3;
		}
	}

/*/
/// Portfolio
/*/
 
 @media (min-width: 768px) {
	 
	.portfolio {
		
		p {
			width: 75%;
			}
		}
	}
	  
.portfolio-grid {
	display: grid;
	gap: var(--spacing-large);
	grid-template-columns: repeat(2, 1fr);
	margin-top: var(--spacing-large);
	align-items: center;
	
	img:not(.square-corner) {
		border-radius: 1rem;
		}
    }

.col-12 { grid-column: span 2; }
.col-9  { grid-column: span 2; }
.col-6  { grid-column: span 2; }  
.col-4  { grid-column: span 2; }
.col-3  { grid-column: span 2; }  

@media (min-width: 768px) {

	.portfolio-grid {
		grid-template-columns: repeat(12, 1fr);
		}

	.col-12 { grid-column: span 12; } /* Full width */
	.col-9 { grid-column: span  9; } /* 75% */
	.col-6  { grid-column: span 6; }  /* 50% */
	.col-4  { grid-column: span 4; }  /* 33.33% */
	.col-3  { grid-column: span 3; }  /* 25% */
	
	}
	  
/*/
/// Footer
/*/	 
	 
footer {
	text-align: center;
	padding: var(--spacing-x-large);
	
	p {
		font-family: var(--font-headers);
		font-size: var(--font-size-md-1);
		color: var(--color-primary-header);
		font-weight: var(--font-weight-medium);
		}
	}

/*/
/// Theme Switcher
/*/
	
.theme-switch-container {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: center;
	padding: var(--spacing-standard);
	position: relative;
	z-index: 9;
	
	@media (min-width: 768px) {
		justify-content: flex-end;
		}
	}
	
.theme-switch {
	position: relative;
	display: inline-block;
	width: 56px;
	height: 34px;
	}

.theme-label {
	position: relative;
	font-family: var(--font-headers);
	font-size: var(--font-size-md-2);
	font-weight: var(--font-weight-medium);
	}
	
.label-dark {
	right: var(--spacing-x-small);
	}

.label-light {
	left: var(--spacing-x-small);
	}

.theme-switch input {
	opacity: 0;
	width: 0;
	height: 0;
	}
	
.slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background-color: var(--color-gray-blue);
	transition: var(--transition-short);
	border-radius: 1.5rem;
	border: 2px solid var(--color-salmon);
	}
	
.slider:before { /* switch */
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 2px;
	bottom: 2px;
	background-color: var(--color-palest-blue);
	transition: var(--transition-standard);
	border-radius: 50%;
	}

input:checked + .slider { /* light mode slide color */
	background-color: var(--color-primary-purple);
	}

input:checked + .slider:before { /* switch - right */
	transform: translateX(22px);
	}

/*/
/// Papyrus Swap
/*/
		
#papyrus-trigger {
	width: 90px;
	height: 90px;
	cursor: pointer;
	opacity: 0.75;
	transition: var(--transition-standard);
	border-radius: 100%;
	display: inline-block;
	border: 4px solid transparent;
	}

#papyrus-trigger:hover {
	opacity: 1;
	border: 4px solid rgba(var(--color-salmon-rgb), 0.75);
	}

#papyrus-reset {
	display: none;
	z-index: 9999;
	position: absolute;
	background: transparent;
	border: none;
	width: 90px;
	height: 90px;
	cursor: pointer;
	overflow: hidden;
	border-radius: 100%;
	border: 4px solid var(--color-salmon);
	transition: var(--transition-standard);
	}

#papyrus-reset .bar {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90px;       
	height: 3px;   
	background-color: var(--color-salmon);
	border-radius: 3px;
	}

#papyrus-reset .line-1 {
	transform: translate(-50%, -50%) rotate(45deg);
	}

#papyrus-reset .line-2 {
	transform: translate(-50%, -50%) rotate(-45deg);
	}

#papyrus-reset:hover {
	background: #cc0000;
	}

html[data-theme="papyrus"] .secret-trigger-container {
	display: block;
	opacity: 1;
	width: 90px;
	height: 90px;
	cursor: pointer;
	position: fixed;
	bottom: var(--spacing-standard);
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	
	#papyrus-trigger {
		opacity: 1;
		}
	
	#papyrus-reset {
		display: block;
		}
	}