<script>
	export const prerender = true;
</script>

<footer>
	<p>Brock Tomlinson © 2025</p>
	<div>
		<a href="mailto:darkicewolf50@gmail.com">
			<img src="https://www.svgrepo.com/show/491226/email.svg" alt="Email's logo/icon" />
			<p>Email</p>
		</a>
		<a href="https://www.youtube.com/@darkicewolf50">
			<img src="https://www.svgrepo.com/show/521936/youtube.svg" alt="Youtube's logo/icon" />
			<p>Youtube</p>
		</a>
		<a href="https://www.linkedin.com/in/brock-tomlinson/">
			<img src="https://www.svgrepo.com/show/521725/linkedin.svg" alt="LinkedIn's logo/icon" />
			<p>LinkedIn</p>
		</a>
		<a href="https://www.twitch.tv/darkicewolf50">
			<img src="https://www.svgrepo.com/show/519925/twitch.svg" alt="Twitch's logo/icon" />
			<p>Twitch</p>
		</a>
		<a href="https://github.com/darkicewolf50">
			<img src="https://www.svgrepo.com/show/512317/github-142.svg" alt="Github's logo/icon" />
			<p>Github</p>
		</a>
	</div>
</footer>

<style>
	footer {
		display: flex;
		flex-direction: column;
		text-align: center;

		background-color: var(--card-background-color);
		border-radius: var(--card-border-radius);

		/* background-color: #d3d3d3; */
	}

	footer div {
		display: flex;
		flex-direction: row;
		flex: 1 1 2;
		justify-content: space-evenly;
	}

	footer img {
		height: 60px;
		filter: invert() hue-rotate(180deg);
	}

	footer a {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-decoration: none;
		color: inherit;
	}

	footer a:hover {
		color: #91a4d2;
		cursor: pointer;
		filter: brightness(0) saturate(100%) invert(65%) sepia(13%) saturate(733%) hue-rotate(187deg)
			brightness(95%) contrast(90%);
	}
</style>
