<script>
</script>

<hr />

<footer>
	<section class="main-content">
		<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
		<div>
			<h1>
                <span>Re</span>Vanced
            </h1>
			<h6>Copyright © 2022, we are very legal</h6>
		</div>
	</section>

	<section class="links-container">
		<div class="link-column">
			<h5>Pages</h5>
			<h6>Home</h6>
			<h6>Download</h6>
			<h6>Docs</h6>
			<h6>Patches</h6>
			<h6>Credits</h6>
		</div>
		<div class="link-column">
			<h5>Repos</h5>
			<h6>CLI</h6>
			<h6>Patcher</h6>
			<h6>Patches</h6>
			<h6>Integrations</h6>
			<h6>Manager</h6>
			<h6>Website</h6>
			<h6>API</h6>
		</div>
		<div class="link-column">
			<h5>Repos</h5>
			<h6>CLI</h6>
			<h6>Patcher</h6>
			<h6>Patches</h6>
			<h6>Integrations</h6>
			<h6>Manager</h6>
			<h6>Website</h6>
			<h6>API</h6>
		</div>
	</section>
</footer>

<style>

	footer {
		margin: 4rem 0 5rem 0;
		margin-inline: auto;
		display: flex;
		justify-content: space-between;
		width: min(85%, 90rem);
	}

	.main-content {
		display: flex;
		gap: 1rem;
	}

    .main-content span {
        color: var(--accent-color);
    }

    .main-content h1 {
        letter-spacing: -0.04rem;
        margin-bottom: 0.5rem;
    }

	img {
		height: 3rem;
	}

	.links-container {
		display: flex;
		gap: 5rem;
	}

	.link-column {
		display: flex;
		gap: 0.5rem;
		flex-direction: column;
	}

	hr {
		display: block;
		height: 1px;
		border: 0;
		border-top: 1px solid var(--grey-three);
		margin-top: 1rem;
	}
</style>
