$background-color: #efefef

body 
	// Override browser default padding and margin
	margin: 0
	padding: 0
	// Set font globally
	font-family: 'Helvetica', 'Arial', sans-serif
	font-weight: 300
	font-display: swap
	// Sticky the footer
	display: flex
	min-height: 100vh
	flex-direction: column
	// Backgorund color
	background: $background-color
	// Box sizing
	* 
		box-sizing: border-box

	h1
		font-size: 2rem
	h2
		font-size: 1.1rem


main 
	// make footer sticky
	flex: 1 0 auto
	// Vertically align content
	display: flex
	align-items: center
	justify-content: flex-start
	flex-direction: column


#footer 
	// make the copyright notics less in your face
	text-align: center
	padding: 10px
	opacity: 0.6
	font-size: 13px

// ///////////////////////////////
// Index page
// ///////////////////////////////
#index

	section
		position: relative
		display: flex
		flex-direction: column
		align-items: center
		justify-content: center
		width: 100%
		min-height: 300px
		padding: 1rem

		margin: 3rem 0
		&:first-child
			margin-top: 0
		

	.stretch
		position: absolute
		z-index: -1
		overflow: hidden
		min-width: 100%
		min-height: 100%
	.circle
		border-radius: 50%
		height: 100%
		width: 100%
		margin-bottom: 3rem

	#hero

		padding: 2rem 1rem
		width: 100%
		height: 99vh
		max-height: 100vh
	
		h1, h2, a
			background: rgba( 0,0,0,.9 )
			color: white
			padding: 1rem
			text-align: center

	#usps
		flex-direction: row
		flex-wrap: wrap
		.usp
			width: 300px
			max-width: 100%
			padding: 1rem
			text-align: center
			p
				&:first-child
					font-size: 4rem
					margin: 0
				&:nth-child( 2 )
					font-size: 1.2rem

		#ctabuttons
			margin-top: 4rem
			width: 100%
			text-align: center
			a
				padding: 1rem
				text-decoration: none
				margin: 0 1rem
				&:first-child
					background: black
					color: white
				&:last-child
					border: 2px solid black
					color: black

	#credits, #about
		background: rgba( 0,0,0, .05 )
		text-align: center
		p
			max-width: 400px

	#cta
		#compressed
			height: 200px
			width: 200px
		a
			background: black
			color: white
			padding: 1rem
			text-decoration: none