// Vars

$primary: #5a23ff
$primary-dull: #3a17a3
$bg-color: rgba(0, 0, 0, 0.9)

// Root

html
	font-size: 12px
	font-family: 'Roboto', Arial, Helvetica, sans-serif
	font-weight: 300
	color: #8b64ff

// Body

body
	width: 100%
	overflow-x: hidden
	background: $bg-color
	background: linear-gradient(to bottom, #000000 0%, #000000 30%, #2f2730 100%)
	max-width: 768px
	margin: auto

// Typography

h1, h2, h3, h4, h5, h6
	font-weight: 300
	margin: 0

p
	margin: 0

a
	color: #fff
	font-weight: 500
	text-decoration: underline dashed

h1
	font-size: 2.8rem

.t-med
	font-size: 1.5em

.t-large
	font-size: 3rem
	margin-bottom: 3rem
	font-weight: 500

.t-right
	text-align: right

.t-center
	text-align: center

.t-white
	color: #fff

.t-uline
	border-bottom: 1px solid rgba(255, 255, 255, 0.5)

.tooltip
	display: none
	width: 120%
	position: absolute
	top: 3rem
	left: 0
	z-index: 200
	background: $primary
	color: #fff
	padding: 0.8rem
	font-size: 1rem
	text-align: left

// FAQ UL

#faq, #work
	list-style: none
	margin: 0
	padding: 0

.faq-item > *
	font-size: 1.5rem
	line-height: 2.2rem
	letter-spacing: 0.5px
	font-weight: 500

#faq > li
	margin-bottom: 2rem

.faq-item > p
	color: #fff
	border-bottom: 1px dotted white
	display: inline-block

#work li:before
	content: "→"

#work .faq-item p
	font-size: 1.3rem
	line-height: 2rem

// Grid

.row-full
	display: block
	display: grid
	align-items: center
	justify-content: center
	min-height: 100vh
	margin: auto
	padding: 1rem
	grid-template-columns: [full] 100%

.row-3
	@extend .row-full
	height: 100vh
	grid-template-rows: [header] 10% [gutter] 5% [content1] 28% [content2] 28%
	grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr
	align-content: center

.col-full
	align-self: center
	grid-column: full
	margin: auto

.row-head
	align-self: center
	grid-row: header
	grid-column-start: span 3
	margin: auto
	
.row-head h2
	color: #fff
	font-size: 1.5rem

@for $rown from 1 through 2
	@for $coln from 1 through 3
		.col-#{$rown}-#{$coln}
			@extend .col-full
			grid-row: content#{$rown}
			grid-column: col#{$coln}
			min-height: 100%
			padding: 0.5rem
			z-index: #{100 - $rown}

@media screen and (max-width: 768px)
	.row-full
		margin: 0
		display: flex
		flex-direction: column
	.row-3
		height: auto
		margin: 5rem auto
		max-width: 260px
	.row-head
		margin: 2em auto

// Portfolio Item

.p-item
	position: relative
	height: 22vh
	padding: 1.5rem 1.8rem
	border-radius: .5rem
	text-align: left
	background: #2c829a
	color: #fff
	box-shadow: 0rem 0.5rem 3rem #000

.p-item:hover
	transform: translateY(-5px) scale(1.02)
	z-index: 100
	background: $primary
	box-shadow: 0rem 1rem 4rem #000

.p-item h3
	padding-top: .3rem
	margin-bottom: .8rem
	font-size: 0.9rem
	font-weight: 500

.p-links a
	display: inline-block
	margin: 0.5rem 0.5rem

@media screen and (max-width: 768px)
	.p-item
		height: auto

// Tags

.tags
	padding: 0
	display: inline-block

.tags li
	list-style: none
	display: inline-block
	background: rgba(24, 32, 231, .25)
	border-radius: 1rem
	font-size: .7rem
	font-weight: 500
	text-transform: uppercase
	padding: .5em 0.8rem
	margin: 0.2em 0

// Accessibility

.accessible
	text-align: center
	margin: 10px auto
	width: 100vw
	background: #fff
	color: #000
	position: relative
	top: -100px

.accessible:focus
	margin: 10px auto
	width: 100vw
	background: #fff
	color: #000
	position: static
	top: 0

// Micro-classes

.is-relative
	position: relative