// Vars

$primary: hsl(255, 100%, 60%)
$bg-color: #000

// Root

html
	font-size: 14px
	font-family: 'Roboto', Arial, Helvetica, sans-serif
	font-weight: 300
	color: $primary

// Body

body
	width: 100%
	overflow-x: hidden
	background: $bg-color

// Typography

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

p
	margin: 0

h1
	font-size: 2.8em

.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: 100%
	position: absolute
	top: 3em
	left: 0
	z-index: 200
	background: $primary
	color: #fff
	padding: 0.8em
	font-size: 0.8em
	text-align: left

@media screen and (max-width: 600px)
	.t-right
		text-align: center

// Grid

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

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

@media screen and (max-width: 600px)
	.row-full
		margin: 40vh auto
		height: auto

// Micro-class

.is-relative
	position: relative