@import url('https://fonts.googleapis.com/css?family=Montserrat:900|Nunito:400,700')
$purple = #5a1886
$light_purple = #e314ff 
$breakpoints = {
	hd: 1280px
	desktop: 1024px
	tablet: 768px
	mobile: 400px
}
@keyframes leftFlame{
	from{transform: translate(0,-2px)}
	to{transform: translate(0,2px)}
}
@keyframes rightFlame{
	from{transform: translate(0,-2px)}
	to{transform: translate(0,2px)}
}
html, body
	padding 0
	margin 0
	width 100%
	height 100%
	font-size 100%
	@media(max-width $breakpoints.tablet)
			font-size 90%
	font-family 'Nunito', sans-serif
	background linear-gradient(45deg,$purple,$light_purple)
	display flex
	flex-direction column
	justify-content center
	align-items center
h1
	font-size 4rem
	@media(max-width $breakpoints.mobile)
			font-size 3rem
	margin 0
	user-select none
h1,h2
	font-family: 'Montserrat', sans-serif
	color #FFF
h1,h2,h3
	text-shadow 1px 3px 5px rgba(0,0,0,.3)
	text-align center
	margin 5px 10px
h3
	&:hover
		span
			display inline-block
			animation-duration 1s
			// animation-delay .5s	
			animation-timing-function: linear
			animation-iteration-count infinite
			animation-direction: alternate
		span:first-child
			animation-name: leftFlame
			transform-origin right center
		span:last-child
			animation-name: rightFlame
			transform-origin left center
a
	color #FFF
	display inline-block
	text-decoration:  none
	user-select none
	transition: transform .1s ease-in
	&:hover
		text-decoration:  underline
a.logo
	font-size 1.2em
	& ~ span
			transition: transform 1s ease-out
			transform: translate(0,0)
	&:hover
		transform translate(10px,0)
		& ~ span
			display inline-block
			transform: translate(45px,-100px)
			transition: transform .2s ease-in
p	
	text-align center
	display flex
	@media(max-width $breakpoints.mobile)
		flex-direction column
		a
			margin 0 0 10px 0 !important
	a
		margin 0 10px