#content {
	background-color: transparent !important;
	background-image: url("../assets/imgs/parallax/bg.png");
	background-size: 100% auto;
	background-repeat: no-repeat;
	margin-top: -10rem;
}

nav {
	background-color: var(--bg);
	padding: 1rem 5rem;
	justify-content: space-between;
	width: 100vw;
	position: fixed;
	z-index: 10;

	a {
		font-family: 'Chelsea Market';
		font-size: 1.2rem;
		text-decoration: none;
		margin: 0 0.5rem;
	}

	a.active {
		color: #FF6565;
	}
}

footer {
	position: relative;
	background-color: var(--bg2);
	padding: 2rem 10rem 7rem 10rem;
	z-index: 5;

	h3 {
		margin-right: auto;
		color: var(--bodyText);
	}

	&>div {
		width: 100%;
		justify-content: space-between;
		padding-right: 15rem;
	}

	&>p {
		margin-top: 3rem;
		color: rgba(255, 255, 255, 0.3);
	}

	.icons {
		align-self: flex-start;

		img {
			width: 2rem;
			margin-right: 1rem;
		}
	}

	#back-to-top-btn {
		position: absolute;
		bottom: 2rem;
		right: 15rem;

		img {
			width: 20rem;
		}
	}

	#copyright {
		position: absolute;
		bottom: 1rem;
		left: 7rem;
	}

	#footer-top {
		position: absolute;
		top: 0;
		transform: translateY(-100%);
		width: 100vw;
	}
}

div#parallax {
	width: 100%;
	height: 40vw;
	z-index: -10;

	img {
		width: 100%;
		position: relative;
		z-index: inherit;
	}
}

div#content {
	background-color: var(--bg);
	padding: 5rem;
	position: relative;
	z-index: 5;

	/* testing "fake content" */
	height: 100vh;
}

.sprite-swap-btn {
	background-color: transparent;
	border: none;
	position: relative;
	transition-duration: 0.3s;
	width: fit-content;
	height: fit-content;

	img {
		position: absolute;
		transform: translate(-50%, -50%);
	}

	&> :last-child {
		display: none;
	}

	&:hover> :last-child {
		display: block;
	}

	/* animation */
	&:hover {
		transform: scale(1.2) rotate(5deg);
	}

	&:active {
		scale: 0.8;
		filter: brightness(0.8);
	}
}