$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

a.button
	padding: 1rem
	text-decoration: none
	margin: 1rem
	background: black
	color: white
	font-size: 1.2rem
	&.outline
		border: 2px solid black
		color: black
		background: none

.row
	display: flex
	flex-direction: row
	flex-wrap: wrap	
	justify-content: center

.sidenote
	margin-top: 2rem
	font-style: italic

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

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

		margin: 2rem 0
		text-align: center
		p
			max-width: 400px
			text-align: center
		&:nth-child(2n+1)
			background: rgba( 0,0,0, .05 )
			box-shadow: 0px 0 20px 2px rgba( 0, 0, 0, .2)
		&:first-child
			text-align: left
			padding: 0
			margin-top: 0
			max-width: 100%
		h1
			margin-bottom: 2rem

		
	.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
			background: rgba( 0,0,0,.9 )
			color: white
			padding: 1rem
			text-align: center
		h2
			font-family: "Courier New", monospace, serif
			line-height: 2rem
		a
			margin-top: 2rem

	#story
		p
			width: 500px
			max-width: 100%
			text-align: left
			font-size: 1.5rem
			border-left: 5px solid black
			padding-left: 1.5rem
			margin-bottom: 4rem

	#about
		h2
			margin-top: 3rem

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

		#ctabuttons
			margin-top: 4rem
			width: 100%
			text-align: center
			

	#cta
		a
			background: black
			color: white
			padding: 1rem
			text-decoration: none

	#community
		.button
			margin-top: 4rem
		p
			margin: 4rem