profile-boot-duration = 2s

.profile
	vertical
	align-items center

	position relative
	left calc(content-padding * -1)
	top calc(content-padding-top * -1)
	min-width calc(100% + content-padding * 2)
	padding calc(content-padding * 2)

	color white
	text-shadow 0px 0px 2px rgb(0, 0, 0, 0.5)

	// default-transition
	// animation appear transition-speed

	overflow hidden

.profile-field
	text-align center

	a
		color white

.intro-container
	vertical
	align-items center
	margin-top calc(content-padding * 1.5)

.profile-actions
	vertical
	margin-top content-padding

	:empty
		display none

.profile-action
	margin-bottom 0.5rem
	text-shadow none !important

.profile-pro-status
	margin-top calc(typography-margin * 2)

	.icon
		color pro-color
		animation sk-pulse 1.5s infinite linear

> 740px
	.profile
		horizontal
		align-items flex-start
	
	.profile-field
		text-align left

	.intro-container
		align-items flex-start
		margin-top 0
		padding content-padding
		padding-top 0
		padding-left calc(content-padding * 2)
		max-width 900px

	.profile-actions
		position absolute
		top 0
		right 0
		padding content-padding
		margin-top 0
	
	.profile-pro-status
		position absolute
		right 0
		bottom 0
		padding content-padding
		margin-top 0
	
	// .profile-pro-status-text
	// 	display none

// animation appear
// 	0%
// 		transform rotateX(90deg)
// 		filter opacity(0) saturate(0) blur(10px)
// 	100%
// 		transform rotateX(0)
// 		filter opacity(1) saturate(1) blur(0)

.profile-cover
	position absolute
	left 0
	top 0
	width 100%
	height 100%
	z-index -1
	object-fit cover
	// background-size cover
	overflow hidden
	
	// default-transition
	// animation cover-animation profile-boot-duration
	// animation-fill-mode forwards
	filter brightness(30%) blur(0)

// animation cover-animation
// 	0%
// 		filter brightness(500%) blur(5px)
// 	100%
// 		filter brightness(35%) blur(0)

.profile-image
	object-fit cover
	width 100%
	height auto

.profile-image-container
	flex 1
	max-width 280px
	max-height 280px
	border-radius 3px
	overflow hidden

#nick
	margin-bottom 1rem

.no-data
	width 100%
	text-align center