:root{
	--black: #000000;
	--white: #ffffff;
	--brand: #00FFE1;

	--font: Helvetica, Arial, sans-serif;
}

*, *:before, *:after{
	box-sizing: border-box;
}

html{
	font-size: 62.5%;
}

body{
	background: var(--black);
	color: var(--brand);
	font: 400 1.6rem/1.25 var(--font);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	margin: 0;
}

	a{
		color: inherit;
	}

		a:active, a:focus, a:hover{
			text-decoration: none;
		}

	h1, h2, h3, h4, h5, h6{
		font: inherit;
		font-weight: bold;
		line-height: 1.1;
		margin: 0;
	}

	p{
		margin: 0;
	}

#app{
	display: flex;
		align-items: center;
		justify-content: center;
	height: 100%;
	overflow: hidden;
	padding: 0;
	position: absolute;
		top: 0;
		left: 0;
	width: 100%;
}

	#logo{
		display: flex;
			align-items: center;
			justify-content: center;
		height: 80%;
		position: relative;
		width: 80%;
	}

	.btns{
		position: absolute;
			top: 8rem;
			left: 3rem;
	}

	.btn{
		background: none;
		background: var(--brand);
		border: none;
		border-radius: 3rem;
		box-shadow: none;
		color: var(--black);
		cursor: pointer;
		display: inline-block;
		font: inherit;
		margin-right: 0.25rem;
		outline: none;
		padding: 0.5rem 1rem;
	}

		.btn:hover{
			background: var(--white);
			color: var(--black);
		}

		#btnPlay{
		}

	#wordmark{
		position: absolute;
			top: 3rem;
			left: 3rem;
		width: 100%;
			max-width: 150px;
	}

		#wordmark svg{
			height: auto;
			width: 100%;
		}