.brand {
	font-size: 4em;
	font-family: cursive;
	font-weight: lighter;
	font-style: italic;
}

@media (min-width: 640px) {
	.brand {
		font-size: 6em;
	}
}

#links-box {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	text-align: center;
}

@media (min-width: 340px) {
	#links-box a::before,
	#links-box a::after {
		content: "";
		position: absolute;
		top: 50%;
		width: 50px;
		height: 0.25vh;
		background: #acd798c1;
	}
}

@media (min-width: 340px) and (max-width: 440px) {
	#links-box a::before {
		left: 40px;
		margin-top: -1vh;
	}

	#links-box a::after {
		right: 40px;
		margin-top: -1vh;
	}
}

@media (min-width: 440px) and (max-width: 640px) {
	#links-box a::before {
		left: 80px;
		margin-top: -1vh;
	}

	#links-box a::after {
		right: 80px;
		margin-top: -1vh;
	}
}

@media (min-width: 640px) {
	#links-box a::before {
		left: -60px;
	}

	#links-box a::after {
		right: -60px;
	}
}

@keyframes fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.visible {
	animation: fade 0.5s ease-in-out;
}

.active {
	background-color: #acd798c1;
	width: min-content;
	padding: 0.3rem 0.9rem;
	border-radius: 0.2rem;
}

.active:hover {
	background-color: #88ac78d8;
	color: #c5c5c5;
}

@media (min-width: 640px) {
	.active {
		padding: 0.2rem 0.4rem;
	}
}