<script>
	let { children } = $props();
</script>

<header>
	<nav>
		<a href="/">Home</a>
		<a href="/projects">Projects</a>
		<a href="/blogs/0">Blogs</a>
		<a href="/contact">Contact</a>
	</nav>
</header>

{@render children()}

<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>
	:global(:root) {
		--underlineTitle: 4px solid purple;
		--underlineTitleBorderRadius: 4px;
		--img-width: 32px;
		--img-height: 32px;
		--card-background-color: rgba(38, 38, 38, 0.5);
		--card-border-radius: 0.5rem;
	}

	:global(body) {
		background-color: #0f1116;
		color: #ffffff;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		margin: 20px;
	}

	:global(h2) {
		border-bottom: var(--underlineTitle);
		border-radius: var(--underlineTitleBorderRadius);
		display: flex;
		margin: 2svh 2svw;
		padding: 0svh 2svw;
		padding-bottom: 1svh;
	}

	nav {
		display: flex;
		flex-direction: row;
	}

	nav a {
		color: #ffffff;
		margin-right: 20px;
		text-decoration: none;
		transition: color 0.2s ease;
	}

	nav a:hover {
		cursor: pointer;
		color: #91a4d2;
	}

	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>
