/* Bullionology — Main Stylesheet */


/* =========================================================
   BASE
   ========================================================= */

* {
	box-sizing: border-box;
}

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

body {
	background: #0a0a0a;
	color: #e8e8e8;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.6;
}


/* =========================================================
   HEADER
   ========================================================= */

#site-header {
	width: 100%;
	height: 96px;

	display: flex;
	align-items: center;

	background: #050505;

	padding: 12px 32px;

	border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}


.site-brand {
	display: inline-flex;
	align-items: center;

	gap: 18px;

	text-decoration: none;
}


.site-brand img {
	display: block;

	width: 72px !important;
	height: 72px !important;

	object-fit: cover;

	border-radius: 50%;
	clip-path: circle(48% at 50% 50%);
}


.site-brand-text {
	display: flex;
	flex-direction: column;
	justify-content: center;

	line-height: 1;
}


.site-brand-name {
	color: #d6b35a;

	font-family: Georgia, "Times New Roman", serif;

	font-size: 27px;
	font-weight: 400;

	letter-spacing: 3.6px;

	text-transform: uppercase;
}


.site-brand-tagline {
	margin-top: 9px;

	color: #aaa;

	font-size: 10px;
	font-weight: 400;

	letter-spacing: 2px;

	text-transform: uppercase;
}


/* =========================================================
   TEMPORARY PAGE CONTENT
   ========================================================= */

#headline,
#content,
body > p {
	max-width: 1200px;

	margin-left: auto;
	margin-right: auto;

	padding-left: 40px;
	padding-right: 40px;
}


#headline {
	margin-top: 50px;

	color: #d6b35a;

	font-weight: 400;
}


#content {
	color: #bdbdbd;
}


/* Hide the old demo separator */

body > hr {
	display: none;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
	color: #d6b35a;
}

a:hover {
	color: #f0d987;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

	#site-header {
		height: 80px;

		padding: 10px 20px;
	}


	.site-brand {
		gap: 12px;
	}


	.site-brand img {
		width: 58px !important;
		height: 58px !important;
	}


	.site-brand-name {
		font-size: 20px;

		letter-spacing: 2.3px;
	}


	.site-brand-tagline {
		margin-top: 6px;

		font-size: 8px;

		letter-spacing: 1.2px;
	}


	#headline,
	#content,
	body > p {
		padding-left: 20px;
		padding-right: 20px;
	}

}