/* Default */
/*
:root {
	--foreground: #0C006E;
	--foreground-max: #000;
	
	--background: #FFFE00;
	--background-overlay-em: #F35F00;
	--background-overlay: #F35F00;
	--background-max: #fff;
	--background-max-overlay: #ffffff;
	
	--background-success: #009F12;
	
	--control-default: #D60098;
	
	--shadow: rgba(0,0,0,0.5);
	--shadow-light: rgba(0,0,0,0.3);
	--img-border: rgba(0,0,0,0.3);
}
*/

/* Dark */
/*
:root {
	--foreground: #efefef;
	--foreground-max: #fff;
	
	--background: #121212;
	--background-overlay-em: #dbdbdb;
	--background-overlay: #4E4E4E;
	--background-max: #000;
	--background-max-overlay: #2D2C2C;
	
	--background-success: #009F12;
	
	--control-default: #FF00AE;
	
	--shadow: rgba(0,0,0,0.5);
	--shadow-light: rgba(0,0,0,0.3);
	--img-border: rgba(0,0,0,0.3);
}
*/

/* Dark / Blue */
/* 
:root {
	--foreground: #D9DAFF;
	--foreground-max: #fff;
	
	--background: #060838;
	--background-overlay-em: #dbdbdb;
	--background-overlay: #04062B;
	--background-max: #000;
	--background-max-overlay: #091951;
	
	--background-success: #009F12;
	
	--control-default: #F74E0F;
	--control-default: #FF00AE;
	
	--shadow: rgba(0,0,0,0.5);
	--shadow-light: rgba(0,0,0,0.3);
	--img-border: rgba(0,0,0,0.3);
}
 */


/* Light */
:root {
	--foreground: #0C006E;
	--foreground-max: #000;
	
	--background: #fff;
	--background-overlay-em: #5C7282;
	
	--background-overlay: #E2E9EE;
	--background-max: #fff;
	--background-max-overlay: #F1F5F8;
	
	--background-success: #009F12;
	
	--control-default: #FF00AE;
	
	--shadow: rgba(11,44,68, 0.35);
	--shadow-light: rgba(11,44,68, 0.2);
	--img-border: rgba(11,44,68,0.3)
}


html { 
	font-size: 15px;  
}

body { 
	background: var(--background); 	
	color: var(--foreground);
	font-weight: 400;
	font-family: "Libre Franklin", sans-serif;
	line-height: 1.8;
	margin: 0 0 9rem; 
}

h1 { 
    font-family: "Hedvig Letters Serif", serif;
    font-size: 4rem;
    font-weight: 400;
    letter-spacing: -0.05rem;
    line-height: 1.2;
    margin-top: 0;
}

h2 { 
	font-family: "Hedvig Letters Serif", serif;
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.2;
	margin-bottom: 0.5rem;
	margin-top: 3rem;  
}

h3 { 
	font-size: 1.5rem; 
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 0.5rem;
}

h4 { 
	font-size: 1rem; 
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 0.25rem;
}

h3 + p,
h4 + p {  
	margin-top: 0; 
}


ul li em { 
	font-style: normal; 
	font-weight: 600; 
}

ul li p { 
	margin-top: 0; 
}

a { 
	color: var(--control-default); 
	text-decoration:none;
}

a:hover,
a:focus {
	text-decoration: underline;
	cursor: pointer;

}

a:active {
	color: var(--foreground);
}


abbr { 
	border-bottom: 1px dashed; 
	text-decoration: none;
}

.main { 
	margin: 0 auto; 
	max-width: 40rem;
	padding: 1rem 3rem 2rem; 	  
}

.header { 
	margin: 0 auto; 
	max-width: 40rem; 
	padding: 4rem 3rem 1rem; 
}

.main + .header { padding-top: 1rem; }

.logo { 
	height: 20px; 
}

.new { 
	background: var(--background-overlay-em);
	border-radius: 3px; 
	color: var(--background-max);
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700; 
	margin-right: 4px; 
	padding: 0px 9px;
	text-transform: uppercase; 
}

p.em { 
	font-weight: bold;
	font-style: italic; 
}

.standalone_img { 
	display: block; 
	margin: 0 auto; 
	max-width: 600px; 
	width: 100%; 
}

.button {
    background-color: var(--background-max);
    border: none;
    border-radius: 6px;
    box-shadow: 1px 3px 6px 1px var(--shadow-light);
    color: var(--control-default);
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1rem;
    padding: 0.8rem 1.3rem;
    text-decoration: none;
    text-wrap: nowrap;
}

.button:focus,
.button:hover {
	color: var(--background-max);
    background-color: var(--control-default);
    outline: none;
    text-decoration: none;
}

.button:active {
	color: var(--background-max);
    background-color: var(--foreground);
    box-shadow: none;
}


em.b { 
	font-weight: 600; 
	font-style: italic;
}

q { 
	font-style: italic;
}


/* Figures */
figure { 
	margin: 0 auto; 
	padding: 1rem 3rem; 
	text-align: center; 
	max-width: 40rem;
}

.main > figure {
	padding-left: 0;
	padding-right: 0;
}

figure.comparison img { 
	width: 49%;
	box-sizing: border-box; 
}

figure.comparison img + img { margin-left: 1%; }

figure img { 
	border: 1px solid var(--img-border); 
	position: relative; 
	width: 100%; 
}

figure img.noborder { 
	border: none; 
}

figure img.detail, 
figure img.full { 
	box-shadow: 2px 6px 12px 2px var(--shadow); 
}

figure img.mobile {
	max-width: 50%;
}

figure figcaption { 
	border-radius: 4px; 
	font-size: 0.85rem; 
	margin: -1rem auto 0;
	max-width: 40rem;
	padding: 2.5rem 1.5rem 1.5rem; 
	position: relative; 
	z-index: 1; 
}

figure blockquote {
	font-size: 1rem;
	line-height: 1.4;
	text-align: left;
	font-weight: 700;
	background: var(--background-overlay);
	border-radius: 0.75rem;
	padding: 1rem;
}

.lead p,
.lrg { 
	font-size: 1.3rem;  
}


/* Page specific styles */
/* Portfolio home */
#portfolio h1 { 
	font-size: 1.4rem; 
	letter-spacing: 0; 
}

#portfolio h2 { 
	font-size: 1.4rem; 
	line-height: 1.4;
}

#portfolio h3 { 
	font-size: 1.32rem; 
	line-height: 1.4;
}

#portfolio hr { 
	border: 0;
	border-top: 2px solid var(--background-overlay);
	margin: 3rem 0; 
}

#portfolio #resume_heading { 
	align-items: center; 
	display: flex; 
	gap: 2rem; 
	margin-bottom: 0.5rem; 
	margin-top: 3rem; 
}

#portfolio #resume_heading h2 { 
	margin-bottom: 0;
	margin-top: 0rem; 
}

#portfolio .portfolio_items { 
	list-style-type: none; 
	padding-left: 0; 
	margin-left: 0;
}

#portfolio .portfolio_item { 
	margin-top: 3rem; 
	margin-bottom: 3rem;  
}

#portfolio .portfolio_item_topics { 
	list-style-type: none; 
	padding-left: 0; 
	margin-left: 0; 
	margin-bottom: 0.25rem;
}

#portfolio .portfolio_item_topic { 	
	background: var(--background-overlay);
	border-radius: 3px; 
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600; 
	margin-right: 4px; 
	padding: 0px 9px;
	text-transform: uppercase; 
}

#portfolio .portfolio_item_topic.most_relevant { 	
	background: #F35F00;
	background: var(--background-overlay-em);
	color: var(--background-max);
}

#portfolio .hide_intro { 
	text-align: center; 
}

#portfolio .show_intro { 
	display: none; 
}

#portfolio .hide_intro_text .show_intro { 
	display:block; 
}

#portfolio .hide_intro_text .intro_text { 
	display:none; 
}

#portfolio .portfolio_item {
	padding: 2rem;
	padding-left: 20rem;
	border-radius: 1rem;
	background-color: var(--background-max-overlay);
	background-repeat: no-repeat;
	margin: 1rem 0;
}

#portfolio .portfolio_item h3 { 
	font-weight: 700; 
	font-size: 1.1rem; 
	margin-top: 0;
}

#portfolio .portfolio_item p:last-child {
		margin-bottom: 0;
	}


#mobile-job-search-item {
	background-image: url('/portfolio/mobile-job-search/imgs/jobsearch_iphone_v1.1.png');
	background-size: 16rem;
	background-position-y: 1rem;
	background-position-x: 2rem;
}

#mobile-apply-item {
	background-image: url('/portfolio/mobile-apply/imgs/ios_disclaimer_iphone.png');
	background-size: 16rem;
	background-position-y: 1rem;
	background-position-x: 2rem;
}

#ui-examples-item {
	background-image: url('/portfolio/ui-examples/imgs/pih_v2.2.png');
	background-size: 20rem;
	background-position-y: 1rem;
	background-position-x: -2rem;
}

#inventory-reduction-item {
	background-image: url('/portfolio/inventory-reduction/imgs/workflow_v1.1.png');
		background-size: 20rem;
	background-position-y: 1rem;
	background-position-x: -2rem;
}

#front-end-performance-item {
	background-image: url('/portfolio/front-end-performance/imgs/http_statuses.png');
	background-size: 20rem;
	background-position-y: 1rem;
	background-position-x: -2rem;
	background-position-y: center;
}

@media (max-width:40rem) {
	#portfolio .portfolio_item {
		background-image: none;
		padding-left: 2rem;
		margin: 1rem 0;
	}
	
	
}

/* Inventory Reduction */
#inventory-reduction #ir_results { 
	align-items: flex-start; 
	display: flex; 
	flex-wrap: wrap; 
	justify-content: center;
	list-style-type: none; 
	padding: 0;
}

#inventory-reduction .results_callout { 	
	box-sizing: border-box; 
	display: inline-block;  
	font-size: 0.85rem; 
	font-weight: 600; 
	margin: 0; 
	padding: 2em;
	text-align: center; 
	width: 50%; 
}

#inventory-reduction .results_callout:before { 
	background: var(--background-success);
	border-radius: 50%;
	color: var(--background-max);
	display: block;
	height: 3em;
	font-size: 3em;
	font-weight: 900; 
	line-height: 3em;
	text-align: center;
	margin: 0.5em auto;
	width: 3em;
}

#inventory-reduction #forty_callout:before {
  content: "40%"; 
}	

#inventory-reduction #thirty_five_callout:before {
  content: "35%"; 
}

/* Responsive */
@media (min-width: 46rem ) {
	figure {
		max-width: 70vw;
	}
}

@media (max-width:500px) {

	h1 {
		font-size: 3.375rem
	}
	
	h2 { 
		font-size: 2rem;
	}
	

	.header,
	.main, 
	figure {
		padding-left: 2rem;
		padding-right: 2rem;
	}
	
	figure img.mobile { 
		width: 100%; 
		max-width: 100%; 
	}
	
	figure.comparison img { 
		width: 100%;
		box-sizing: border-box; 
	}
	
	figure.comparison img + img {
		margin-left: 0;
	}
	
	#resume_heading { 
		align-items: flex-start;
		flex-direction: column;
		gap: 1rem;
		margin-bottom: 2rem;
	}
	
}

.intro {
	padding: 1rem 3rem 2rem;
	border-radius: 1rem;
	background: var(--background-max-overlay);
	
}