@keyframes gecko-camouflage {
	0% {
		fill: #209F43;
	}
	10% {
		fill: #93E9BE;
	}
	20% {
		fill: white;
	}
	30% {
		fill: #78D6FE;
	}
	40% {
		fill: #BB126D;
	}
	50% {
		fill: #9C27B0;
	}
	60% {
		fill: #1B4566;
	}
	70% {
		fill: #95C94B;
	}
	80% {
		fill: #E91E63;
	}
	90% {
		fill: AccentColor;
	}
}

/* :root,
window {
	@media (-moz-ev-native-controls-patch) {
		background: transparent;
	}
} */

#window {
	width: 555px;
	height: 516px;
}

#window-content-container {
	padding: 0 !important;
}

.content {
	margin: auto;
	width: 541px;
	height: 313px;
	justify-content: center;
	align-items: center;
}

.banner {
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	width: fit-content;
	margin: auto;
	list-style-image: url("chrome://userchrome/content/windows/gsettings/imgs/logo.svg");
	fill: #209f43;
	-moz-context-properties: fill, fill-opacity;
	padding: var(--inner-padding);
	align-items: center;
	font-weight: 500;
	animation: gecko-camouflage 20s 5000ms infinite;

	> image {
		filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.5));
		opacity: 0;

		// animation settings
		animation-name: splashScreenLogo;
		animation-delay: 500ms;
		animation-duration: 2000ms;
		animation-fill-mode: forwards;
		z-index: 1;
	}
}

#splash-text {
	// animation settings
	opacity: 0;
	margin-block-start: -169px;
	animation-name: splashScreenText;
	animation-delay: 2000ms;
	animation-duration: 1000ms;
	animation-fill-mode: forwards;
}

.button {
	width: fit-content;

	// animation settings
	opacity: 0;
	animation-name: fadeIn;
	animation-delay: 3000ms;
	animation-duration: 500ms;
	animation-fill-mode: forwards;
}

.silverfox-reset {
	position: absolute;
	bottom: 20px;
	left: 20px;
	z-index: 1;
}
:root:not([silverfox]) .silverfox-reset {
	display: none !important;
}
:root[silverfox] {
	.banner {
		animation-delay: 14s;

		> image {
			// animation settings
			animation-name: silverfoxLogo, silverfoxFly, splashScreenLogo;
			animation-delay: 0s, 0s, 8500ms;
			animation-duration: 8s, 8s, 2000ms;
			animation-fill-mode: forwards, forwards, forwards;
			animation-timing-function: ease-in, ease-in, linear;
			z-index: 1;
		}
	}
	// add a delay to the normal animation
	#splash-text {
		animation-delay: 10500ms;
	}
	.button {
		animation-delay: 11500ms;
	}
}