profileBootDuration = 2s

.profile
	position relative
	left contentPadding * -1
	top contentPadding * -1
	min-width calc(100% + 3rem)
	padding contentPadding * 2

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

	transition all transitionSpeed ease
	animation-name appear
	animation-duration transitionSpeed

	// &:hover
	// 	.profile-cover
	// 		filter brightness(28%)

@keyframes 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
	background-size cover
	overflow hidden
	
	transition all transitionSpeed ease
	animation cover-animation profileBootDuration
	animation-fill-mode forwards

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

.profile-image
	border-radius 3px
	width 320px !important
	height 320px !important
	// padding contentPadding
	object-fit cover

#anime-list-container
	flex 1.5

// rotate-y()
// 	transform-origin 0% 0%
// 	animation rotate-y-animation profileBootDuration
// 	animation-fill-mode forwards

// @keyframes rotate-y-animation
// 	0%
// 		opacity 0
// 		transform rotateY(90deg)
// 	100%
// 		opacity 1
// 		transform rotateY(0deg)

.image-container
	float left
	width auto
	// padding contentPadding

.intro-container
	float left
	width auto
	display flex
	flex-flow column
	align-items center
	padding contentPadding
	padding-top 0
	padding-left contentPadding * 2
	max-width 900px
	// rotate-y()

.user-actions
	float right
	display flex
	flex-flow row
	justify-content center

.user-action
	max-width 250px

#nick
	text-align left
	margin-top 0
	margin-bottom 0

.profile-field
	margin-bottom 0.2em

.location
	// ...

.role
	opacity 0.6

.list-provider-username
	margin-top 0
	margin-bottom 0
	font-size 0.9em

.main
	// ...

.alternative
	opacity 0.4

.report-bug-hint
	//

.loading-message
	margin 0 auto
	text-align center
	opacity 0.4

#embedded-footer
	position fixed
	bottom 4em
	right calc(16px + 1em)
	text-align right
	z-index 1
	font-size 0.9em
	display flex
	flex-flow row

	.user
		display inline-block
		width auto
		height auto
		margin-right 1em

.embedded-footer-info
	display flex
	flex-flow column

.embedded-footer-nick
	text-align left
	opacity 0.5

.embedded-footer-separator
	opacity 0.2

@media only screen and (max-width: 900px)
	.intro-container
		margin 1em 0
		padding 0
		width 100%
		text-align center !important

	#anime-list-container
	.image-container
	.user-actions
		width 100%

	#nick
	.profile-field
		width 100%
		text-align center

@media only screen and (min-width: 900px)
	#posts
		margin-left 0.5em

@media only screen and (max-width: 800px)
	.airing-date-prefix
		display none