@use "_fonts";
@use "_consts" as c;

footer {
	background-color: c.$footer_bg;
	color: c.$footer_text_color;
	padding: 8px;
	margin-top: 32px;
	box-sizing: border-box;

	// The simplest trick for sticky footer that works well!
	// It also needs html,body {min-height: 100vh}
	position: sticky;
	top: 100vh;
}

.footer-wrapper {
	display: flex;
	max-width: 1100px;
	padding: 16px 4px;
	margin: auto;
	gap: 20px;
	justify-content: center;
	align-items: center;
}

.footer-pane {
	flex: 1;
	max-width: 800px;
}

footer a, footer a:visited {
	color: c.$footer_link_color;
}

@media screen and (max-width: 800px) {
	.footer-wrapper {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
}