<div class="w-full bg-[#FFFFF8] relative min-h-80">
	<div
		class="absolute top-0 left-0 w-full h-full bg-[url('/noise.png')] bg-repeat opacity-10 pointer-events-none z-0"
	></div>
	<div
		class="opacity-60 absolute w-full h-32 bg-[url('brushstroking.png')] bg-repeat-x z-10 bg-size-[100vw_100vh] mix-blend-overlay"
		style="mask-image: url(/footer-clouds.png); mask-size: contain; mask-repeat: repeat-x; -webkit-mask-image: url(/footer-clouds.png); -webkit-mask-size: contain; -webkit-mask-repeat: repeat-x;"
	></div>
	<div
		class="w-full h-32 bg-[#e99cce] z-5"
		style="mask-image: url(/footer-clouds.png); mask-size: contain; mask-repeat: repeat-x; -webkit-mask-image: url(/footer-clouds.png); -webkit-mask-size: contain; -webkit-mask-repeat: repeat-x;"
	></div>

	<!-- Footer Text -->
	<div
		class="absolute bottom-20 left-32 text-center z-20 max-md:bottom-12 max-md:left-8 max-md:right-4 max-md:text-left"
	>
		<p class="text-gray-700 mb-2">Made with ♡ by teenagers, for teenagers at Hack Club</p>
		<div class="flex space-x-4 max-md:flex-col max-md:space-x-0 max-md:space-y-2">
			<a
				href="https://hackclub.com"
				class="underline text-gray-700 hover:text-gray-900 transition-colors">Hack Club</a
			>
			<span class="text-gray-700 max-md:hidden">・</span>
			<a
				href="https://hackclub.com/slack"
				class="underline text-gray-700 hover:text-gray-900 transition-colors">Slack</a
			>
			<span class="text-gray-700 max-md:hidden">・</span>
			<a
				href="https://hackclub.com/clubs"
				class="underline text-gray-700 hover:text-gray-900 transition-colors">Clubs</a
			>
			<span class="text-gray-700 max-md:hidden">・</span>
			<a
				href="https://hackclub.com/hackathons"
				class="underline text-gray-700 hover:text-gray-900 transition-colors">Hackathons</a
			>
		</div>
	</div>

	<div
		class="max-sm:hidden absolute bottom-2 right-16 h-2/3 aspect-square bg-[url('brushstroking.png')] bg-repeat z-10 bg-size-[100vw_100vh] mix-blend-overlay"
		style="mask-image: url(/thought-bubbles.png); mask-size: contain; mask-repeat: no-repeat; -webkit-mask-image: url(/thought-bubbles.png); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;"
	></div>
	<div
		class="max-sm:hidden absolute bottom-2 right-16 h-2/3 aspect-square bg-[#e99cce]"
		style="mask-image: url(/thought-bubbles.png); mask-size: contain; mask-repeat: no-repeat; -webkit-mask-image: url(/thought-bubbles.png); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;"
	></div>
</div>
