.profile-container {
	width: 100%;
	height: 100%;
	margin: 0;

	display: flex;
	flex-direction: column;
}

.profile-details {
	background-color: var(--accent-color);
	display: flex;
	flex-direction: row;

	justify-content: space-between;

	padding: 10px;
}

.profile-detail {
	display: flex;
	flex-direction: column;
	gap: 10px;

	justify-content: center;
	align-items: center;
	text-align: center;

	font-size: 40px;
}

.profile-picture {
	width: 200px;
	height: 200px;
	border-radius: 100%;
}

#profile-picture {
	width: 200px;
	font-size: 1em;
}

.profile-videos {
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
	padding: 16px;
}

@media only screen and (max-width: 768px) {
	.profile-detail {
		font-size: 30px;
	}

	.profile-picture {
		width: 100px;
		height: 100px;
	}
}

@media only screen and (max-width: 500px) {
	#profile-video-detail {
		display: none;
	}

	.profile-detail {
		font-size: 25px;
	}
}