<script>
	import { currentStream } from '$lib/stores.js';

	currentStream.set({});
</script>

<div class="stream-information">
	<h1 class="title">Auditorium of Babel</h1>
	<h3 class="backlink">ID: aptget</h3>
</div>

<div class="description-bubble">
	<p>Hello, there, welcome to V1.5.</p>
	<p>
		Still in construction. The design is responsive now, so phones should work well enough!
		Needs touch events though.
	</p>
	<p>
		There's gonna be an update feed soon (with RSS, too), but for now, just check the most
		recent stream to see if anything new has been uploaded. I'll post something here if I fill
		in the back-catalog.
	</p>

	<p>
		Also, event sets of mine are available <a href="https://apt-get.xyz/music/">right here</a>.
		They've got visuals alongside and are proper DJ mixes, which makes them rather different
		from the usual streams. They should live under this subdomain soon enough too!
	</p>

	<p style="font-size: smaller">
		Mascot drawn by <a href="https://twitter.com/yuuybee/">yuuybee</a>.
	</p>
</div>

<style>
	.stream-information {
		width: 70%;
		padding: 1px;
		margin-top: 2%;
		margin-left: 3%;
		min-height: 8%;
		border-radius: 2px;
		position: relative;
	}

	.backlink {
		font-family: 'Montserrat';
	}

	.title {
		font-size: x-large;
		font-family: 'Montserrat';
		right: 0;
		position: absolute;
		margin-right: 3%;
		text-decoration: underline;
	}

	.description-bubble {
		position: relative;
		background-color: rgba(255, 255, 255, 0.75);
		border: 1px solid #ccc;
		color: black;
		padding: 10px;
		margin: 10px;
		margin-left: 3%;
		border-radius: 5px;
		min-width: 70%;
		max-width: 70%;
		width: fit-content;
		font-family: Verdana;
		font-size: small;
	}

	.description-bubble :global(:first-child) {
		margin-top: 0px;
	}

	.description-bubble :global(:last-child) {
		margin-bottom: 0px;
	}

	.description-bubble::after {
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 10px 0 10px 10px;
		border-color: transparent transparent transparent #ccc;
		top: 8px;
		right: -10px;
		width: 0;
		height: 0;
	}

	@media (max-width: 575px) {
		.stream-information {
			width: initial;
		}
		.description-bubble {
			max-width: initial;
		}

		.description-bubble::after {
			visibility: hidden;
		}
	}
</style>
