@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@300;400;500;600;700&display=swap');

body {
	height: 100%;
	font-family: 'Cabin', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.gradient2 {
	background: radial-gradient(83.13% 83.1% at 50% 50%, #FFF 0%, var(--bg-color) 100%);
}

.hero-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.card {
	background: white;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	/*  */

}

.card-image {
	background: url('/img/me.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	
	border-radius: 10px 10px 0 0;

	height: 280px;
}

.pronouns {
	text-align: right;
	padding: 5px;
}

.card-body {
	padding: 30px;
	padding-top: 0px;
}

.card-body .subtitle {
	max-width: 340px;
}

.social-link {
	display: flex;
	flex-direction: row;
	align-items: center;

	margin-top: 1em;
}

.social-link i {
	margin-right: 10px;
	font-size: 1.6em;
}

.social-link a {
	color: #4a4a4a;
	text-decoration: underline;
	transition: all 0.3s ease-in-out;
	font-size: 1.25em;
}

.mstdn::after {
	content: '@mastodon.social';
}

@media only screen and (max-width: 800px) {
	.mstdn::after {
		font-size: 0.8em;
		content: '@mastodon.social' !important;
	}
}