---
---
<style>
	a {
		font-size: 1.4rem;
		font-weight: 600;
		padding: 1.3rem;
	}
	a:visited {
		color: dimgrey;
	}
	a:hover {
		color: #333;
	}
	a:link {
		color: #efefef;
	}
</style>
<div id="main-menu" class="flx space-around" style="top:0;position: sticky; z-index: 7;">
	<a href="/">Home</a>
	<a href="/about/">About</a>
	<a href="/pricing/">Pricing</a>
	<a href="/blog/">Blog</a>
</div>

<script>
	let links = document.querySelector('#main-menu').children
	for (let link of links) {
		console.log(link);

		link.addEventListener('mouseover', function(e) {
			e.target.style.boxShadow = "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px";
		});
		link.addEventListener('mouseout', function(e) {
			e.target.style.boxShadow = "";
		});
	}

 
</script>