@import url('https://fonts.googleapis.com/css2?family=Delius&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Recursive:wght@300..1000&family=Space+Grotesk:wght@300..700&display=swap');

body {
	font-family: 'Inter', Arial, sans-serif;
	margin: auto;
}

hr {
	height: 5px;
	border-width: 0;
	color:#DBD00F;
	background-color:#DBD00F;
}

h1, h2, h3, h4, h5 {
	font-family: 'Space Grotesk', Arial, sans-serif;
}

.navbar-brand {
	font-family: 'Space Grotesk', Arial, sans-serif;
	font-size: 2.85em;
}

.feathered-image {
	/*This doesn't fade it out all the way before the image ends. The other version only fades the bottom, but looks pretty good. Might need to edit the image directly.*/
/*	mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);*/
/*	-webkit-mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);*/
/*	mask-size: cover;*/
/*	-webkit-mask-size: cover;*/
/*	mask-repeat: no-repeat;*/
/*	-webkit-mask-repeat: no-repeat;*/
/*	display: inline-block;*/
	mask-image: linear-gradient(to top, transparent 0%, black 20%, black 80%, transparent 100%);
	-webkit-mask-image: linear-gradient(to top, transparent 0%, black 20%, black 80%, transparent 100%);
}

.caption {
	font-family: 'Recursive', Arial, sans-serif;
}

.img-left, .img-right {
	margin-top: 0;                     /* avoid pushing it down */
	width: clamp(220px, 28vw, 395px);  /* responsive width, never above 395px */
	margin-bottom: 10px;
}
.img-left {
	float: left;
	margin-right: 16px;
}
.img-right {
	float: right;
	margin-left: 16px;
}

.founder-blurb {
	display: flow-root;   /* modern clearfix */
	margin-bottom: 24px;  /* space before footer */
}

.shadow {
	box-shadow: rgb(0 0 0 / 33%) 10px 10px 30px;
}

.header-with-image {
	display: flex;
	align-items: center; /* keeps text vertically aligned with image */
	flex-wrap: wrap;     /* allows the image to wrap under the text */
	margin-bottom: 20px;
}

.header-with-image h1 {
	flex: 1 1 50%; /* text takes priority space, grows/shrinks */
	margin: 0;
}

.header-with-image img {
	flex: 0 1 35%; /* image shrinks if needed */
	max-width: 40%;
	height: auto;
	margin-left: 16px;
}


/* Light mode */
@media (prefers-color-scheme: light) {
	.navbar-brand {
		color: #012A81;
	}
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	.navbar-brand {
		color: #587CE9;
	}
}

/* On narrow screens, force the image below the text */
@media (max-width: 576px) {
	.header-with-image {
		flex-direction: column; /* stack text above image */
		align-items: flex-start;
	}

	.header-with-image img {
		max-width: 80%; /* shrink the image when stacked */
		margin-left: 0;
		margin-top: 10px;
	}
}