const frontpage-bg-color = rgb(32, 32, 32)

.frontpage
	vertical
	align-items center
	position absolute
	top 50%
	left 50%
	transform translateX(-50%) translateY(-50%)

	a, h1, h2
		color white !important
		text-shadow 0px 0px 4px rgb(0, 0, 0, 0.75)

	h1
		font-size 2.5rem
		font-weight normal
		letter-spacing 5px
		text-transform uppercase
		line-height 1.2em

	h2
		font-size 2rem
		font-weight normal
		margin-top 0
		margin-bottom 1em
		line-height 1.2em
		text-align center

	.footer
		margin-top content-padding

.bg-video-container
	position absolute
	left 0
	top 0
	width 100%
	height 100%
	z-index -100
	background frontpage-bg-color
	overflow hidden

.bg-video
	display none
	position absolute
	top 50%
	left 50%
	transform translateX(-50%) translateY(-50%)
	min-width 100%
	min-height 100%
	width auto
	height auto

> 600px
	.bg-video
		display block

.login-button
	horizontal
	align-items center
	border-radius ui-element-border-radius
	padding 0.75rem 1.25rem
	margin 0.5rem
	font-size 1.2rem
	text-shadow none !important
	box-shadow shadow-medium
	default-transition

.login-button-google
	background hsl(8, 75%, 43%)

	:hover
		background hsl(8, 75%, 48%)

.login-button-facebook
	background hsl(222, 67%, 42%)

	:hover
		background hsl(222, 67%, 47%)

.login-button-twitter
	background hsl(203, 89%, 53%)

	:hover
		background hsl(203, 89%, 58%)