/* Parent container */
.user-profile {
	display: flex;
	padding: 16pt;
	padding-top: 22pt;
	height: auto;
	width: inherit;
	align-items: center;
}

/* Profile picture*/
.user-pfp {
	border-radius: 100%;
	width: auto;
	height: auto;
	max-width: 25%;
	object-fit: cover;
	margin-left: 24pt;
	box-shadow: 0 0 5px #111;
}

/* Infobox container */
.user-info {
	margin: 2vh 16pt;
	line-height: 1.25em;
	width: 100%;
	display: flex;
	flex-flow: column;
	align-items: start;
	height: 100%;
}

/* Display name container */
.user-title {
	display: flex;
	flex-flow: row;
	align-items: center;
	gap: 6pt;
	width: 100%;
}

/* Dispĺay name */
.user-name {
	margin: 0;
}

/* Verification badge */
.user-verified {
	max-width: 1.25em;
}

/* User feed button */
.user-feed-link {
	display: flex;
	align-items: center;
}

/* User feed icon */
.user-feed {
	height: 18px;
	opacity: 0.8;
}

.user-feed:hover {
	opacity: 1;
	filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(310deg);
}

/* Username, follower count*/
.user-details {
	line-height: 0.75em;
	margin-top: 3%;
	margin-bottom: 0;
	color: #bbb;
}

/* User bio */
.user-bio {
	margin: 3% 0 1% 0;
}

/* Links, if any */
.user-links {
	margin: 0;
}

/* Adjustments for smaller screens */
@media (max-width: 700px) {
	.base-container {
		align-items: start;
	}

	/* Reduce the font size */
	.user-name {
		line-height: 1em;
		font-size: 18pt;
	}

	/* Align user's profile picture and infobox to the left */
	.user-info {
		margin: 1vh 0;
	}

	.user-pfp {
		margin-left: 0;
	}

	/* Helps align the verification badge to the display name */
	.user-verified {
		max-height: 1em;
	}

	/* Vertical profile */
	.user-profile {
		flex-direction: column;
		justify-items: left;
		align-items: start;
		height: auto;
		left: 20px;
	}
}

/* Light mode adjustments */
@media (prefers-color-scheme: light) {
	/* Since we can't shift hues on black objects, make the element a little more transparent instead */
	.user-feed:hover {
		opacity: 0.6 !important;
	}

	/* Make the user details visible */
	.user-details {
		color: #555;
	}
}