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

:root {
	--black:#040404;
	--dark: #121212;
	--mud:#666060;
	--storm: #888888;
	--gray: #ccc;
	--cloud: #d6d6d6;
	--sky: #eaeaea;
	--white: #f8f8f8;

	--blue:#4d4dd4;
	--gold:#ddb421;
	--red:#d44d4d;


}


/* Color system */

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

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

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

.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);}

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


.blue {color: var(--blue);}
.bg_blue {background: var(--blue);}

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

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



/* Global */

* {
	transition: all 600ms;
}

html, body {
	margin:0;
	padding:0;
}

body {
	font-size: 16px;
	color: var(--dark);
	background:var(--cloud);
	font-family: 'Whitney SSm Book', sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	padding:4rem;
}

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

a:hover {
	color: var(--black);
	text-decoration: none;
}


.link a {
	display: flex;
	align-items: center;
	gap: 1em;
	font-weight: 800;
	padding: 1em 2em;
	color: var(--black);
	border:1px solid var(--gray);
	border-radius: .5em;
}

.link a:hover {
	color: var(--blue);
	border:1px solid var(--storm);
	background: var(--cloud);
}

.underline, .underline:hover {
	text-decoration: underline;
	text-underline-offset:3px;
}

i {
	font-family: 'FontAwesome';
	font-style: normal;
	padding: 0 1em;
}

p {
	font-family: 'Whitney SSm Book', sans-serif;
	color: var(--black);
	margin: 0;
	font-weight: 400;
	line-height: 1.375em;
	margin: auto;
}

small {
	font-size: 12px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Whitney SSm Semibold', sans-serif;
	font-optical-sizing: auto;
	font-weight:800;
	font-style: normal;
	text-transform: uppercase;
}

h1 {font-size: 2.875em; margin: 0;}
h2 {font-size: 2.5em; margin: 0;}
h3 {font-size: 2.125em; margin: 0;}
h4 {font-size: 1.875em; margin: 0;}
h5 {font-size: 1.5em; margin: 0;}
h6 {font-size: 1.125em; margin: 0;}

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

	h1 {font-size: 2.275em; margin: 0;}
	h2 {font-size: 2em; margin: 0;}
	h3 {font-size: 1.75em; margin: 0;}
	h4 {font-size: 1.5em; margin: 0;}
	h5 {font-size: 1.25em; margin: 0;}
	h6 {font-size: 1.125em; margin: 0;}

}



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

/* Fonts */


@font-face {
    font-family: 'Whitney SSm Book';
    src:url('woff2/WhitneySSm-Book_Web.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    
}


@font-face {
    font-family: 'Whitney SSm Medium';
    src:url('woff2/WhitneySSm-Medium_Web.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    
}

@font-face {
    font-family: 'Whitney SSm Semibold';
    src:url('woff2/WhitneySSm-Semibold_Web.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    
}


/* Add-ons */

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


/* Utilities */

.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;
}



.space1 {height: 1rem;}
.space2 {height: 2rem;}
.space3 {height: 3rem;}
.space5 {height: 5rem;}
.space10 {height: 10rem;}
.space20 {height: 20rem;}

/* Containers and embedded containers */

.container {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	width: 100%;
	height:auto;
}

.pad1 {
	display: block;
	width: auto;
	height: auto;
	padding:1em;
}

.pad2 {
	display: block;
	width: auto;
	height: auto;
	padding:2em;
}

.pad3 {
	display: block;
	width: auto;
	height: auto;
	padding:3em;
}

.pad5 {
	display: block;
	width: auto;
	height: auto;
	padding:5em;
}

/* Content */

.content {
	display: flex;
	flex-grow: 1;
	width: 100%;
	height: 100vh;
	background: var(--white);
}

/* Header */

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

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

.contact {
	display: flex;
	align-items: center;
}

@media screen and (max-width: 1024px) {
	.header {
		display: flex; 
		flex-direction:column-reverse;
		justify-content: space-between;
		align-items: flex-start;
	}	

	.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;
	}

	body {
		padding: 2em;
	}

	.pad3 {
		padding: 1.5em;
	}


}

/* Inline content */

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


/* Footer */

.footer {
	width: 100%;
}

.footer p {
	font-size: 16px;
	font-weight: 800;
}

.footer * {
	color: var(--mud);
}

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

/* Helpers */

.full-height {
	width: auto;
	height: 100vh;
}

.space1 {
	width: auto;
	height: 1rem;
}

.space2 {
	width: auto;
	height: 2rem;
}

.space3 {
	width: auto;
	height: 3rem;
}

.space4 {
	width: auto;
	height: 4rem;
}

.space5 {
	width: auto;
	height: 5rem;
}

.space10 {
	width: auto;
	height: 10rem;
}

.space20 {
	width: auto;
	height: 20rem;
}