<section class="tagline__container"><h2 class="tagline">CSS Only Marquee</h2></section>

.tagline__container {
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 5em;
	background: #333;
	$border: 5px solid #8bc34a;
	border-top: $border;
	border-bottom: $border;
	// box-shadow: 0 2px 5px #000;
}

.tagline {
	color: #8bc34a;
	font-weight: 900;
	width: 100%;
	font-family: "Press Start 2P", monospace;

	text-align: center;
	font-size: 3em;
	margin: 0.25em;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	position: absolute;
	animation: slide 10s infinite linear;


	&:before {
		content: "CSS Only Marquee";
		position: absolute;
		left: 100%;
		width: 100%;
		display: inline-block;
	}
}

@keyframes slide {
	0% {
		right: 0%;
	}

	100% {
		right: 99.999%;
	}
}

// Unimportant Stuff

body {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(60deg, #333, #111, );
}

// This Doesn't Count
jackHarnerSig();