#footer {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 50px;
	height: 100vh;
	border-right: dashed var(--textInvert) 1px;
	z-index: 11;
	mix-blend-mode: difference;
}

#footerContent {
	display: flex;
	flex-direction: column;
	width: 30px;
	height: 100%;
	border-right: solid var(--textInvert) 1px;
	gap: 15%;
	padding: 100px 0 100px 0;
	justify-content: center;
}

.footerText {
	color: var(--textInvert);
 	font-size: var(--tinyText);
	font-weight: 400;
	transform: rotate(-90deg);
	width: 49px; /* no idea why this works to push them to the right (or rather, their relative bottom?) */
}

.footerText:hover {
	color: var(--highlightInvert);
}