html, body
	margin: 0
	padding: 0


input, button
	outline: none

button
	cursor: pointer

ul, li
	list-style: none

ul
	margin: 0
	padding: 0
	
a
	text-decoration: none

// CONVENIENCE
.clear
	display: block
	clear: both

.light-text
	color: white

.right
	float: right

.left
	float: left

.center
	text-align: center


//mixins
@mixin fullScreen
	position: fixed
	top: 0
	left: 0
	width: 100vw
	height: 100vh


@mixin pureCenter($left: 50%, $top: 50%)
	position: absolute
	top: $top
	left: $left
	transform: translate(-50%, -50%)


@mixin maintain-aspect-ratio ($width-factor: 16, $height-factor: 9, $target-width: 80vw, $target-height: 80vh)
	width: $target-width
	height: $target-width * ($height-factor / $width-factor)
	max-width: $target-height * ($width-factor / $height-factor)
	max-height: $target-height