.navigation {
	display: flex;
	gap: .8rem;
	align-items: center;
}

.navigation a:first-child svg {
	transform: rotate(180deg);
}

.navigation a {
	width: 3.2rem;
	height: 3.2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.6rem;
	color: hsla(215, 23%, 65%, 1);
	line-height: 120%;
	letter-spacing: -5%;
	border-radius: .8rem;
	transition: .3s linear;
}

.navigation svg {
	width: 1.6rem;
	height: 1.6rem;
}

.navigation a:hover {
	background-color: hsla(213, 29%, 84%, 1);
	color: hsla(217, 36%, 18%, 1);
}

.navigation a.active {
	background-color: hsla(227, 76%, 41%, 1);
	color: #fff;
}