$layout-a-max: 820px
$layout-b-min: 821px

body
	margin: 0
	padding: 0
	font-size: 18px

.main-divider
	display: block

	@media screen and (min-width: $layout-b-min)
		display: grid
		grid-template-columns: 235px 1fr
		min-height: 100vh

.pfp
	border-radius: 50%

@mixin link-button
	color: hsl(107, 100%, 21.8%)
	background: hsl(87, 78.4%, 80%)
	padding: 12px
	border-radius: 10px
	border: 1px solid hsl(106.9, 49.8%, 46.9%)
	line-height: 1
	text-decoration: none

	&:hover
		color: hsl(106.4, 100%, 12.9%)
		background: hsl(102.1, 77.2%, 67.3%)
		border-color: hsl(104, 51.4%, 43.5%)

.profile-overview
	text-align: center
	z-index: 1
	position: relative
	contain: paint // </3 css
	line-height: 1

	@media screen and (max-width: $layout-a-max)
		border-bottom: 1px solid #333
		box-shadow: 0px -2px 4px 4px rgba(0, 0, 0, 0.4)
		padding-bottom: 25px

	@media screen and (min-width: $layout-b-min)
		border-right: 1px solid #333
		box-shadow: -2px 0px 4px 4px rgba(0, 0, 0, 0.4)

	.profile-sticky
		position: sticky
		top: 0
		bottom: 0
		padding: 10px

	.pfp
		margin: 25px 0

	.full-name
		margin: 0 0 8px
		font-size: 30px

	.username
		margin: 0
		font-size: 20px
		font-weight: normal

	.profile-counter
		line-height: 1.3

		.count
			font-weight: bold

.timeline
	--image-size: 260px
	$image-size: var(--image-size)
	$background: #fff4e8

	@media screen and (max-width: $layout-a-max)
		--image-size: 120px

	background-color: $background
	padding: 15px 15px 12vh

	.page-number
		color: #444
		line-height: 1
		max-width: 600px
		margin: 0px auto
		padding: 20px 0px // separate margin and padding for better page hash jump locations
		text-align: center
		position: relative

		.number
			position: relative
			z-index: 1
			padding: 10px
			background-color: $background

		&::before
			position: absolute
			display: block
			content: ""
			left: 0
			right: 0
			top: 50%
			border-top: 1px solid

	.next-page-container
		margin: 20px 0px
		display: flex
		justify-content: center

		.next-page
			@include link-button
			font-size: 18px
			text-align: center

	.timeline-inner
		display: flex
		justify-content: center
		flex-wrap: wrap
		margin: 0 auto

		.image
			$margin: 5px

			background-color: rgba(40, 40, 40, 0.25)
			margin: $margin
			max-width: $image-size
			max-height: $image-size
			width: 100%
			height: 100%

			&:hover
				$border-width: 3px
				margin: $margin - $border-width
				border: $border-width solid #111