<svelte:head>
	<title>Live Stream</title>
</svelte:head>

<figure class="">
	<video class="shadow rounded" type="video/mp4" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/womp-website/video/streamClips.mp4" autoplay="true" loop="true" video muted="true" style="height: 100%; width: 100%; object-fit: cover;" alt="Video Of Clips From Live Stream"></video>
	<!-- <figcaption>Clips From Stream</figcaption> -->
</figure>

<hr>

<h1>Live Stream</h1>

<h3>Find the Live Stream on Youtube, Facebook or Twitch</h3>

<div class="d-flex justify-content-center align-middle padd">
	<a rel=prefetch class="mx-2" href="https://www.youtube.com/wompmacho"><i class="fab fa-youtube fa-3x"></i></a>
	<a rel=prefetch class="mx-2" href="https://www.twitch.com/wompmacho/"><i class="fab fa-twitch fa-3x"></i></a>
	<a rel=prefetch class="mx-2" href="https://www.facebook.com/wompmacho"><i class="fab fa-facebook fa-3x"></i></a>
</div>

<div class="container shadow rounded">
	<a class="padd" href="https://discord.gg/pVNnTDA"><img src="https://img.shields.io/discord/238458588169895937?label=Discord&style=plastic" alt="Discord Members Online Shield"></a>

	<p>
		I have tried to create a fun and unique livestream experience on various streaming platforms. As a result I have developed skills I never thought I would have obtained. I found myself working in social media engagement, content creation, sound engineering, graphic design, lighting and filmography, animation, coding and dabbling in a multitude of other areas. Over the last few years I have dedicated everything I have to further enhance my stream and become a better entertainer. 
		<br><br>
		I am just having too much fun man.
	</p>
</div>

<h3 class="padd">I hope you are too. ♥</h3>

<hr>

<style>

	.padd{
		padding: 1em;
	}

	.container{
        display: flex;
		flex-direction: column;
        justify-content: center;
		background-color: #333333;
    }

	h1{
		text-align: center;
		font-size: x-large;
		font-weight: 600;
	}

	h3{
		font-size: small;
		text-align: center;
	}

	p{
		margin: auto;
		border-radius: 5px;
		padding: 1em;

	}

	a{
        color: #00ff00;
		text-align: center;
    }
	
    a:hover{
        color: red;
    }
</style>