/* Styles for morenoaa.com coded by Aaron Moreno. moreno (dot) aa (at) gmail (dot) com */

:root {
	--black:rgba(4,4,4,1); /* #040404 */
	--dark: rgba(42,42,42,1); /* #2a2a2a */
	--night:#585858; 
	--storm: #888888;
	--gray: #ccc; 
	--cloud: #d6d6d6;
	--sky: #eaeaea; 
	--light: #f8f8f8;
	--white: #fff;

	
	--darkBlue:rgba(48,48,108,1);
	
	--blue:rgba(77,77,212, 1);
	--blue20:rgba(200,200,242, .20);
	--blue40:rgba(77,77,212, .40);
	--blue60:rgba(77,77,212, .60);
	--blue80:rgba(77,77,212, .80);


	--lightBlue:rgba(129,157,221, 1);
	
	--gold:#ddb421; /* #040404 */
	--red:#d44d4d; /* #040404 */

	--space-small:1rem;
	--space-medium:2rem;
	--space-large:3rem;

	--radius-small:.125em;
	--radius-medium:.25em;
	--radius-large:.5em;

	--textNormal:16px;
	--textSmall: 14px;
	--textXSmall: 12px;

}


/* Color system */

::selection {
    appearance: none;
    background-color: var(--dark);
    color: var(--sky);
}

.black {color: var(--black);}
.bg_black {background: var(--black);}

.dark {color: var(--dark);}
.bg_dark {background: var(--dark);}

.night {color: var(--night);}
.bg_mud {background: var(--night);}

.storm {color: var(--storm);}
.bg_storm {background: var(--storm);}

.gray {color: var(--gray);}
.bg_gray {background: var(--gray);}

.cloud {color: var(--cloud);}
.bg_cloud {background: var(--cloud);}

.sky {color: var(--sky);}
.bg_sky {background: var(--sky);}
.sky-underline {width:100%; height:4px; border-bottom: 2px solid var(--sky); margin:1em 0;}

.white {color: var(--white);}
.bg_white {background: var(--white);}


.blue {color: var(--blue);}
.blue20 {color: var(--blue20);}
.blue20 {color: var(--blue40);}
.blue60 {color: var(--blue60);}
.blue80 {color: var(--blue80);}

.bg_blue {background: var(--blue);}
.bg_blue20 {background: var(--blue20);}
.bg_blue40 {background: var(--blue40);}
.bg_blue60 {background: var(--blue60);}
.bg_blue80 {background: var(--blue80);}



.gold {color: var(--gold);}
.bg_gold {background: var(--gold);}

.red {color: var(--red);}
.bg_red {background: var(--red);}



/* Global */

* {
	transition: all 300ms;

	 -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.centered {
	display:flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: auto;
}

.about {
	border-radius: 50%; 
	border:4px solid var(--gray);
}


body {
	font-size: var(--textNormal);
	color: var(--dark);
	font-family: "PublicSans-Regular",sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	padding:2rem;
	/*cursor: url('img/cursor.cur'), auto; */
	font-smooth: never;
}

@font-face {
  font-family: 'PublicSans-Regular';
  font-style: normal;
  font-weight: 400;
  src: local('PublicSans-Regular'), url(webfonts/PublicSans-Regular.woff2) format('woff2');
}



a {
	font-weight: 500;
	color: var(--blue);
	text-decoration: none;
}

a:hover {
		text-decoration: underline;
		text-underline-position:under;
		text-underline-offset: 2px;
		text-decoration-thickness: 4px;
}

p {
	font-size:var(--textNormal) ;
	color: var(--black);
	margin: .875em 0;
	font-weight: 400;
	line-height: 1.5em;
	letter-spacing: 1px;
}

small {
	font-size: var(--textXSmall);
}

strong, small strong {
	font-weight: 900;
}

.underline {
		text-decoration: underline;
		text-underline-position:under;
		text-underline-offset: 2px;
		text-decoration-thickness: 2px;
}

.italic {
	text-decoration: italic;
	text-transform: italic;
}

.thin { font-weight: 300;}
.light { font-weight: 400;}
.medium { font-weight: 700;}
.bold { font-weight: 900;}

.uppercase {
	text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "PublicSans-Regular", sans-serif;
	font-optical-sizing: auto;
	font-weight:500;
	font-style: normal;
	letter-spacing: 1px;
}

h1 {font-size: 3em; margin: .5em 0;}
h2 {font-size: 2.75em; margin: .5em 0;}
h3 {font-size: 2.225em; margin: .5em 0;}
h4 {font-size: 1.875em; margin: .5em 0;}
h5 {font-size: 1.5em; margin: .5em 0;}
h6 {font-size: 1.125em; margin: .5em 0;}

@media screen and (max-width: 1024px) {

	h1 {font-size: 2.5em; margin: .5em 0;}
	h2 {font-size: 2em; margin: .5em 0;}
	h3 {font-size: 1.75em; margin: .5em 0;}
	h4 {font-size: 1.325em; margin: .5em 0;}
	h5 {font-size: 1.125em; margin: .5em 0;}
	h6 {font-size: 1em; margin: .5em 0;}

}

ul {
	padding-inline-start: 20px;
}

.nav a {
	font-weight: 500;
	color: var(--blue);
	text-decoration: none;
	padding:var(--space-small);
	border-radius: .375em;
	background: var(--white);
	border: 2px solid var(--blue40);
}

.nav a:hover {
	border: 2px solid var(--blue80);
	background: var(--blue20);
}

button {
	font-weight: 500;
	color: var(--blue);
	text-decoration: none;
	background: var(--white);
	font-size: 1em;
	border: none;
}

button:hover {
		text-decoration: underline;
		text-underline-position:under;
		text-underline-offset: 2px;
		text-decoration-thickness: 2px;
}

/* Modal */

:modal {
	width: 88vw;
	height: 88vh;
	background: var(--white);
	border:2px solid var(--storm);
	border-radius: var(--radius-medium);
	padding: 2em;
}

dialog::backdrop {
	backdrop-filter: blur(20px);
}

dialog img {
	width: 100%;
	object-fit: cover;
} 


/* End Modal */


.image-preview img {
	width: 50%;
}



/* a:hover {
	cursor: url('img/cursor.png'), auto;
} */

.link {
	display: flex;
	align-items: center;
	justify-content:space-evenly;
	gap: 1em;
	padding: 1em 2em;
	border-radius: .375em;
	background: var(--blue);
}

.link:hover {
	background: var(--darkBlue);
	cursor: pointer;
}

.link a:hover {
	text-decoration: none;
}

.link-outline {
	display: flex;
	align-items: center;
	justify-content:space-evenly;
	gap: 1em;
	padding: 1em 2em;
	border-radius: .375em;
	border:2px solid var(--blue);
}

.link-outline:hover {
	background: var(--blue20);
	border:2px solid var(--darkBlue);
	cursor: pointer;
}

.link-outline:hover a {
	color: var(--dark);
	text-decoration: none;
}

.link-outline a:hover {
	color: var(--dark);
	text-decoration: none;
}

.item a {
	display: inline-flex;
	justify-content:space-evenly;
	gap: 1em;
}


.pillSet {
	display:inline-flex;
	flex-flow: row;
	flex:1 auto;
	flex-wrap: wrap;
	gap:8px;
	height:auto;
	padding:0;
	margin:1em 0 .5em 0;
	align-items: center;
}

.pillSet a, .pillSet a:hover {
	width:auto;
	font-size: var(--textXSmall);
	font-weight: 400;
	text-align:center;
	padding: 4px 10px 2px 10px;
	color: var(--blue);
	background:var(--blue20);
	border: 1px solid var(--blue60);
	border-radius: .25em;
	text-decoration: none;
}

hr {
	border:1px dashed var(--cloud);
	margin:2.5rem 0;
}


/* Native Accordion */

details {
	padding: 1em 1em;
	background: var(--blue20);
	border-radius: var(--radius-medium);
}

details > summary {
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--blue);
}


summary {

  position: relative;
  anchor-name: --summary;
  
  &::marker {
    content: "";
  }
  
  &::before,
  &::after {
    content: "";
    border-block-start: 3px solid var(--blue);
    height: 0;
    width: 1rem;
    
    inset-block-start: 50%;
    inset-inline-end: 0;
    
    position: absolute;
    position-anchor: --summary;
    position-area: top end;
  }

  &::after {
    transform: rotate(90deg);
    transform-origin: 50%;
  }
}

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

/* End Native Accordion */

/* Add-ons */

.shadow {
	box-shadow: 0 0 16px 8px rgba(180,180,180,.375);
}

.vert {
	color: var(--blue40);
	padding:0 .675em;
}

.strike {
	border-top: 1px solid var(--sky);
	border-bottom: 1px solid var(--sky);
	padding: 1em 0;
	margin: 1em 0;
}

.eyebrow {
	font-size: 14px;
	text-transform: uppercase;
	color: var(--blue);
	margin:0;
	padding: 0;
}

/* Utilities */

.edge1 {
	border:2px solid var(--cloud);
}

.borderhalf {
	border-radius: .5em;
}

.border1 {
	border-radius: 1em;
}

.top-border1 {
	border-top-left-radius: 1em;
	border-top-right-radius: 1em;
}

.bottom-border1 {
	border-bottom-left-radius: 1em;
	border-bottom-right-radius: 1em;
}

.border2 {
	border-radius: 2em;
}

.top-border2 {
	border-top-left-radius: 2em;
	border-top-right-radius: 2em;
}

.bottom-border2 {
	border-bottom-left-radius: 2em;
	border-bottom-right-radius: 2em;
}


/* Containers and embedded containers */

.container {
	display: flex;
	flex-flow: column;
	min-height: -webkit-fill-available;
}

/* Content */

.content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	background: var(--white);
}


.row-items {
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	gap: 1em;
}

.row-items a {
	vertical-align: middle;
	padding-top: 1em;
}

.folio-item {
	display: flex;
	flex-flow: column;
	border-bottom:2px solid var(--cloud);
	padding: 2em;
	margin: 1em 0 6em 0;
	gap: 2em;
	transition: all 200ms ease-in;
}

.folio-item:hover {
	border-bottom:2px solid var(--storm);
}

.folio-item p, .folio-item h5 {
	color: var(--storm);
}

.folio-item:hover p, .folio-item:hover h5 {
	color: var(--dark);
}

.folio-item img {
	width: -webkit-fill-available;
}

.col50 {
	width: 50%;
}

.col66 {
	width: 66%;
}

.col75 {
	width: 75%;
}

.col100 {
	width: 100%;
}

.pad0 {
	padding:0;
}

.pad1 {
	padding:1em;
}

.pad2 {
	padding:2em;
}

.pad3 {
	padding:3em;
}

.pad5 {
	padding:5em;
}



.mar0 {
	margin:0em;
}

.mar-tb1 {
	margin:1em 0em;
}

.mar-lr1 {
	margin:0em 1em;
}

.mar-tb2 {
	margin:2em 0em;
}

.mar-lr2 {
	margin:0em 2em;
}

.mar-tb3 {
	margin:3em 0em;
}

.mar-lr3 {
	margin:0em 3em;
}

.mar-tb5 {
	margin:5em 0em;
}

.mar-lr5 {
	margin:0em 5em;
}

/* Header */

.header {
	display: flex; 
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	vertical-align: middle;
}

.inline-content {
	display: flex; 
	flex-direction: row;
	justify-content: flex-start;
	gap: 1em;
}

.intro {
	display: flex; 
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 1em;
}

.stacked {
		display: grid;
		grid-template-columns: 30% 66%;
		grid-template-areas: 'myImage myText';
		width: 100%;
		gap: 2em;
}

.itemFirst {
	grid-area:myImage;
	min-width: -webkit-fill-available;
}

.stacked #button {
	width: 100%;
}

/*.stacked img {
	width: 100%;
	aspect-ratio: 3/2;
	min-width: -webkit-fill-available;
}*/

.preview {
	width:25%;
	aspect-ratio: 3/2;
}

/* 1024 */
@media screen and (max-width: 1024px) {
	.header {
		display: flex; 
		flex-direction:column-reverse;
		justify-content: space-around;
		gap:.5em;
	}	

	.inline-content {
		display: flex; 
		flex-direction:column;
	}

	.contact a {
		width: 100%;
		align-items: center;
		justify-content: center;
	}	

	.content a {
		width: 100%!important;
	}

	.display {
		display: flex; 
		flex-direction:column;
		justify-content: space-between;
	}

	.intro {
		display: flex; 
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	body {
		padding: 1em;
	}

	.pad3 {
		padding: 2.175em;
	}

	.col50 {
		width: 100%;
	}

	.folio-item {
		display: flex;
		flex-flow: column;
		border:1px solid var(--cloud);
		border-radius: .25em;
		padding: 2em 0em;
		margin: 1em 0;
		align-items: center;
		gap: 2em;
	}

	.col66 {
		width: 100%;
	}

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


}


/* 881 */
@media screen and (max-width: 881px) {

	body {
		padding: 0;
	}

	p {
		font-size: 14px;
	}

	details {
	padding: 1em 1em;
}

.footer p {
	font-size: var(--textXSmall);
	text-align: center;
}

.footer h6 {
	text-align:center;
}

.footer .links {
	flex-flow: column!important;
	text-align: center!important;
	justify-content: center!important;
	align-items: center!important;
}

.footer .links a {
	margin-top:1em;
}

.footer .vert {
	display: none;
}

.footer .pad1 {
	padding: 0!important;
}

.footer img {
	display: block;
	justify-content: center;
	margin: auto auto;
	padding-bottom:1em;
}


	.header {
		display: flex; 
		flex-direction:column-reverse;
		justify-content: space-around;
		gap:.5em;
	}	

	.nav a {
		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		max-width: 225px;
		margin: auto auto;
	}

	.inline-content {
		display: flex; 
		flex-direction:column;
		width: 100%;
	}

	.intro {
		display: flex; 
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.stacked {
		display: flex;
		flex-flow: column;
		justify-content: center;
	}

	.preview {
		width:100%;
		min-height: 30vh;
		aspect-ratio: 3/2;
}

	.pad1 {
		padding:.25em;
	}

	.pad2 {
		padding:1em;
	}

	.pad3 {
		padding:1.175em;
	}

	.pad5 {
		padding:2.5em;
	}

	.pillSet {
		display:flex;
		flex-flow: row;
		flex-wrap: wrap;
	}

	.image-preview img {
	width: 100%;
	}

}


/* Inline content */

.widget {
	display:flex;
	justify-content: center; 
	align-items: space-between; 
	gap: 1em;
	border-radius: 10rem;
	background: var(--sky);
	border: 1px solid var(--blue20);
	padding:1em 2em;
}

.widget:hover {
	background: var(--white);
	border:1px solid var(--blue60);
}

.widget .social a img:hover {
	scale:1.2;
}

.social {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}

.jumpto {
	display: inline-block;
	position: initial;
	rotate: 270deg;
}


/* Footer */

.footer {
	width: 100%;
}

.footer p {
	line-height: 1em;
	margin:.5em 0;

}

.footer .links {
	display: flex;
	flex-flow: row;
	align-items: flex-start;
	padding:0;
}

.footer img {
	padding-bottom:1em;
}

/* Portfolio items */

.fbanner {
	display:flex; 
	flex-flow:row; 
	align-items:center; 
	width:100%; 
	min-height:220px; 
}

.img1 {
	background: url(img/banner-img1.png) no-repeat; 
	background-size: cover; 
	background-position: center center;
	transition: all 300ms ease-in;
	border: 2px solid var(--blue20);
}

.img2 {
	background: url(img/banner-img2.png) no-repeat; 
	background-size: cover; 
	background-position: center center;
	transition: all 300ms ease-in;
	border: 2px solid var(--blue20);
}

.img3 {
	background: url(img/banner-img3.png) no-repeat; 
	background-size: cover; 
	background-position: center center;
	transition: all 300ms ease-in;
	border: 2px solid var(--blue20);
}

.img4 {
	background: url(img/banner-img4.png) no-repeat; 
	background-size: cover; 
	background-position: center center;
	transition: all 300ms ease-in;
	border: 2px solid var(--blue20);
}

.img5 {
	background: url(img/banner-img5.png) no-repeat; 
	background-size: cover; 
	background-position: center center;
	transition: all 300ms ease-in;
	border: 2px solid var(--blue20);
}

.img6 {
	background: url(img/banner-img1.png) no-repeat; 
	background-size: cover; 
	background-position: center center;
	transition: all 300ms ease-in;
	border: 2px solid var(--blue20);
}