$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


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



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

	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, a
			background: rgba( 0,0,0,.9 )
			box-shadow: 0px 0 20px 2px rgba( 0, 0, 0, .7)
			color: white
			padding: 1rem
			text-align: center
			&.invert
				background: rgba( 255,255,255,.9 )
				color: black

		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
		.circle
			width: 200px
			height: 200px

