/* CUSTOM PROPERTIES
--------------------------------------------*/
:root { /* define custom color labels */
	--honeybronze:      #fcb353;
	--cornflowerocean:  #006ba6; /* rgb(0 107 166) */
	--dodgerblue:       #0496ff;
	--graphite:         #383838;
	--rosepunch:        #cc3f79;
	--color-light:      var(--honeybronze);
	--color-dark2:      var(--dodgerblue);
	--color-prime:      var(--cornflowerocean);
	--color-dark1:      var(--graphite);
	--color-acnt1:      var(--rosepunch);
	--font-size-h1:		10.5rem;
	--font-size-h2:		3rem;
	--font-size-h3:		1rem;
	--font-size-h4:		1rem;
	--font-size-base:	0.9375rem;
	--font-size-tagline:	1.3rem;
	--font-size-small:	.8rem;
}


/* GLOBAL
--------------------------------------------*/
/* Alternative Box Model */
html {
	box-sizing: 		border-box;
}
a, a::before, a::after {
	box-sizing: 		inherit;
}
html, body {
	height: 			100%;
}
body {
	margin: 			0;
	padding: 			0;
	font-family: 		"Lexend", sans-serif;
	font-size: 			var(--font-size-base);
	line-height: 		1.4;
}
/*========================*/

a {
	color: 				var(--color-dark2);
}
a:hover {
	text-decoration: 	none;
}
h1 {
	font-size: 			var(--font-size-h1);
}
h2 {
	font-size: 			var(--font-size-h2);
}
h1, h2, h3, h4 {
	margin: 			0;
	font-family: 		"Fugaz One", sans-serif;
}
.bg-dark a {
	color: 				var(--color-acnt1);
}
.bg-dark {
	background: 		var(--color-dark1);
	color: 				var(--color-light);
}
.bg-light {
	background: 		var(--color-light);
	color: 				var(--color-dark);
}
.bg-prime {
	background: 		var(--color-prime);
	color: 				var(--color-light);
}
.list-reset {
	list-style-type: 	none; /* remove all list styles */
	margin: 			0;
	padding: 			0;
}
.content-wrap {
	max-width: 			800px;
	margin: 			0 auto;
	padding: 			60px;
}
.btn {
	background: 		var(--color-light);
	color: 				var(--color-prime);
	text-decoration: 	none;
	padding: 			3px;
	line-height: 		1;
	border-radius: 		4px;
	text-transform: 	uppercase;
	font-size: 			var(--font-size-small);
}
.btn:hover {
	background: 		var(--color-prime);
	color: 				var(--color-light);
}
#quote {
	border-bottom: 		1px solid var(--color-acnt1);
}


/* HEADER + NAV
--------------------------------------------*/
header {
	height: 			80%;
	background-image: 	linear-gradient(rgb(0 107 166/.5), rgb(0 107 166/.5)),
						url(../images/BGthin.png);
	background-repeat: 	no-repeat;
	background-size: 	cover;
	color: 				var(--color-acnt1);
	display: 			flex;
	align-items: 		center;
	justify-content: 	center;
	text-align: 		center;
}
nav {
	position: 			fixed;
	top: 				0;
	left: 				0;
	right: 				0;
	height: 			60px;
}
.nav-list {
	display: 			flex;
	justify-content: 	center;
}
.nav-list a {
	padding: 			20px;
	display: 			inline-block;
	text-decoration: 	none;
	font-weight: 		bold;
	text-transform: 	uppercase;
}
.nav-list a:hover {
	text-decoration: 	underline;
}
hgroup {
	line-height: 		1;
}
.tagline {
	font-size: 			var(--font-size-tagline);
	margin: 			0;
	color: 				aliceblue;
}
blockquote {
	font-style: 		italic;
}


/* SPOTLIGHT
--------------------------------------------*/
#spotlight h2 {
	color: 				var(--color-prime);
	margin-bottom: 		10px;
}
.media-item {
	border: 			1px solid var(--color-prime);
	padding: 			20px;
	margin-bottom:		10px;
}
.media-item video {
	width: 				100%;
}


/* FOOTER
--------------------------------------------*/
footer {
	text-align: 		center;
	padding: 			60;
}
.form-wrap {
	max-width: 			800px;
	margin: 			0 auto;
}
.field {
	display: 			grid;
	max-width:			200px;
	margin: 			auto;
}
button {
	background: 		var(--color-light);
	color: 				var(--color-dark1);
	text-decoration: 	none;
	padding: 			3px;
	line-height: 		1;
	border-radius: 		4px;
	text-transform: 	uppercase;
	margin-top: 		3px;
}
.socials-list {
	display: 			flex;
	justify-content: 	center;
	
}
.socials-list img {
	width: 				35px;
	margin: 			15px;
}


/* IMAGE
--------------------------------------------*/
.responsive {
    width: 				100%;
    height: 			auto;
}
.copyright {
	font-size: var(--font-size-small);
}



/* MEDIA QUERIES
--------------------------------------------*/
@media screen and (min-width: 900px) {
	.media-item {
		border: 			1px solid var(--color-prime);
		padding: 			20px;
		margin-bottom:		10px;
		display: 			grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 		20px;
}
}
@media screen and (orientation: portrait) {
	header {
		height: 			50%;
	}
}