<script>
	import star from '$lib/assets/img/star.gif';
	import randomQuote from '$lib/functions/randomquote';
</script>

<div class="billboard noselect">
	<div class="quote">
		<img src={star} alt="" />
		<p>{randomQuote()}</p>
		<img src={star} alt="" />
	</div>
</div>

<style lang="scss">
	@use '$lib/styles/variables' as vars;
	.billboard {
		border: solid 2px vars.$base-colour;
		background-color: black;
		box-sizing: border-box;
		overflow: hidden;
		width: 800px;
		margin: 0 auto;
	}
	.quote {
		display: flex;
		justify-content: center;

		// line-height: 32px;
		margin: 8px 0 8px 0;

		p {
			padding-top: .3em;
		}

		animation: billboard 20s linear infinite;
	}
	img {
		margin: 0 8px 0 8px;
	}
	@keyframes billboard {
		0% {
			transform: translate3d(100%, 0, 0);
		}
		25% {
			transform: translateZ(0);
		}
		75% {
			transform: translateZ(0);
		}
		to {
			transform: translate3d(-100%, 0, 0);
		}
	}
</style>
