@keyframes pixelBackToTopArrow {
	40% {
		transform: translateY(-15px);
		opacity: 0;
	}

	41% {
		transform: translateY(15px);
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.pixel-back-to-top {
	bottom: 50px;
	right: 50px;
	z-index: 10;
	opacity: 0;
	visibility: hidden;
	transform: translateY(25px);
	transition: all 0.65s cubic-bezier(0.23, 1, 0.32, 1);
}

.pixel-back-to-top a {
	width: 45px;
	height: 45px;
	background-color: #fff;
	box-shadow: 0 0 30px -2px rgba(0, 0, 0, 0.15);
	font-size: 10px;
	color: #000;
	transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.pixel-back-to-top a svg {
	line-height: 1;
	margin-top: -1px;
	transition: transform 0.3s ease;
	mix-blend-mode: difference;
}

.pixel-back-to-top a:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
}

.pixel-back-to-top a:hover svg {
	animation: pixelBackToTopArrow 1s cubic-bezier(0.23, 1, 0.32, 1) both alternate;
}

.pixel-back-to-top .pixel-scrl-indc-el {
	background-color: currentColor;
}

@media screen and (min-width: 480px) {
	.pixel-back-to-top.is-visible {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}