* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Funnel Sans", serif;
	font-optical-sizing: auto;
}

:root {
	--highlight: #a33466;
	--highlight-light: #db8fb1;
}

a {
	color: var(--highlight);
	fill: var(--highlight);
	transition: color 0.2s ease-in-out;
}

a:hover {
	color: var(--highlight-light);
	fill: var(--highlight-light);
}

.bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-image: url("images/bg2.webp");
	background-size: cover;
}

.bg img {
	width: auto;
	height: auto;
	max-height: 100vh;
	max-width: 100vw;
	filter: saturate(1.5) brightness(0.8);
}

.content {
	position: absolute;
	left: 0;
	overflow: auto;
	height: 100%;
	min-width: min(40vw, 550px);
	max-width: max(40vw, 550px);
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	padding: 2rem 5rem;
	background-color: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(20px);
	text-align: center;
}

.content > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.content h1 {
	font-size: 4rem;
	color: var(--highlight);
	font-family: "Pacifico", serif;
	font-weight: 400;
	font-style: normal;
	text-shadow: 2px 2px #000000aa;
}

.content p {
	color: #111;
	margin-bottom: .8rem;
}

.links {
	display: flex;
	flex-direction: row;
	gap: 1rem;
}

.links a {
	display: inline-flex;
	align-items: center;
}

.links svg {
	fill: inherit;
	margin-right: .5rem;
	width: 20px;
	height: 20px;
	transition: fill 0.2s ease-in-out;
}

.content .profile {
	width: 300px;
	height: 300px;
	border-radius: 50%;
	border: 2px solid var(--highlight);
}

.content p {
	color: #111;
}

hr {
	margin: 2rem auto;
	width: 12rem;
	height: .25rem;
	border-radius: .25rem;
	background-color: var(--highlight);
	border: 2px solid var(--highlight);
	font-family: serif;
}

.zia {
	width: 200px;
	height: auto;
	border-radius: 10px;
	border: 2px solid var(--highlight);
}

.highlight {
	color: var(--highlight);
	font-family: "Pacifico", serif;
	font-weight: 400;
	text-shadow: 1px 1px #000000aa;
}