<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>

<h1>Live Stream</h1>
<div class="container">
	<a href="https://discord.gg/pVNnTDA"><img src="https://img.shields.io/discord/238458588169895937?label=Discord&style=plastic" alt="Discord Members Online Shield"></a>
</div>
<p>
	See Discord for latest Announcements and Go-Live Notifications
</p>

<hr>
	<h3>
		Sep 2016 - Present
	</h3>

	<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. It has been hard working to develop my stage. 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. 
		I am just having too much fun man.

	</p>

	<p>
		I hope you are too. ♥
	</p>
	
<hr>

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

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

<style>
	.container{
        display: flex;
        justify-content: center;
        margin-bottom: 2em;
    }

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

	h3{
		margin-left: 2em;
		font-size: medium;
		text-align: center;
		margin: 1em;
	}

	p{
		margin: 1em;
		border-radius: 5px;
		padding: 1em;
		background-color: #333333;
	}

	hr{
		background-color: red;
		max-width: 20vw;
	}

	a{
        color: #00ff00;
    }
	
    a:hover{
        color: red;
    }
</style>