/* styles.css */
body,
html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.background-container {
	position: fixed;
	top: -10em;
	right: -10em;
	bottom: -10em;
	left: -10em;
	/*
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	*/
	background-size: cover;
	--background-position: center;
	transition-delay: 250ms;
	transition: opacity 19s;
	filter: blur(10px);
	-webkit-filter: blur(10px);
	background-repeat: no-repeat;

	background-position: 50%;
}

#dFront {
	--border-top: 10px red solid;

}

#dBack {
	--border-top: 10px green solid;
}

/*
https://easings.net/
*/

#dFront {
	opacity: 1;
	z-index: 2;
}

#dBack {
	opacity: 1;
	z-index: 1;
}

#wrapper {
	z-index: 3;
	position: relative;
}