@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--primary-bg-color: #eee;
	--primary-text-color: #1f1f1f;
	--secondary-text-color: #757575;
	--nav-border-color: #454545;
	--primary-color: #f92672;
	--accent-color: #b40544;
	--border-color: #454545;
}

@media (prefers-color-scheme: dark) {
	:root {
		--primary-bg-color: #0d0d0d;
		--primary-text-color: #eee;
		--primary-color: #8c54fe;
		--accent-color: #b28cfe;
	}
}

html {
	background: var(--primary-bg-color);
	line-height: 1.2;
	font-size: 1.2em;
	color: var(--primary-text-color);
}

html,
button,
input,
select,
textarea,
.pure-g [class*="pure-u"] {
	font-family: Roboto, sans-serif;
}

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

a:visited, a:link {
	color: var(--primary-color);
}

a:hover {
	color: var(--accent-color);
}

.content {
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
}

.content-title {
	text-align: center;
}

.content-body {
	text-align: center;
}

.footer-quote {
	margin: 1em;
	color: var(--secondary-text-color);
	font-size: 0.8em;
}

.vertical-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline;
}

.text-center {
	text-align: center;
}

.social-links {
	margin: 1em auto;
	color: var(--nav-border-color);
	max-width: fit-content;
}

.social-links-item {
	padding: 0.2em;
}

.social-links-item:hover {
	background: none;
}

img.avatar-img {
	max-width: 25%;
	margin: auto;
	border: 2px solid var(--primary-color);
	border-radius: 50%;
}

@media screen and (max-width: 992px) {
	img.avatar-img {
		max-width: 50%;
	}
}

img.avatar-img:hover {
	transition: all 250ms ease;
	filter: brightness(80%);
}