:root {
	--trsn: all 5s ease 0s;
	--black: rgba(0,0,0,0.75);
	--black2: rgba(0,0,0,0.5);
}

*, *:before, *:after {
	/*position: absolute;*/
}

body {
	/*margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--black);
	perspective: 100vmin;*/
}

.content {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	overflow: clip;
	display: none;
	align-items: center;
	justify-content: center;
	/*background: url(https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib&auto=format&fit=crop&w=1800&q=80) no-repeat center center;
	background: url(https://source.unsplash.com/random/800x600/?mountain) no-repeat center center;
	background-size: cover;*/
	transition: var(--trsn);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

@media (min-width: 992px) {
	.content {
		display: flex;
	}
}

.content:before {
	font-family: Arial, Helvetica, serif;
	bottom: 0vmin;
	font-weight: 500;
	font-size: 1.35vmin;
	color: #fffD;
	border-radius: 1px;
	padding: 20vmin 2vmin 3vmin;
	letter-spacing: 0.5px;
	word-spacing: 3px;
	background: linear-gradient(0deg, black, transparent);
	width: 100%;
	text-align: center;
	position: absolute;
}

.content:after {
	content: "";
	width: 100%;
	height: 100%;
	box-shadow: 0 0 20vmin 0vmin var(--black2) inset, 0 0 3vmin 0.5vmin var(--black2) inset, 0 0 1vmin 1vmin var(--black2);
	position: absolute;
}

.film, .effect {
	width: 100%;
	height: 100%;
	filter: blur(0.45px) drop-shadow(0px 0px 0px #fff1);
	position: absolute;
}

.film:after, .effect:after {
	content: '';
	width: 120%;
	height: 100%;
	top: 0;
	left: 0;
	padding-left: 100px;
	opacity: 0.5;
	animation: none;
	background: repeating-linear-gradient(90deg, #0002 0 2px, transparent 4px 37vmin);
	position: absolute;
}
@media (min-width: 992px) {
	.film:after, .effect:after {
		content: '';
		width: 120%;
		height: 100%;
		top: 0;
		left: 0;
		padding-left: 100px;
		opacity: 0.5;
		animation: film-scratch 16s steps(1) infinite;
		background: repeating-linear-gradient(90deg, #0002 0 2px, transparent 4px 37vmin);
		position: absolute;
	}	
}

.effect:after {
	left: 30%;
	animation: none;
	position: absolute;
}
@media (min-width: 992px) {
	.effect:after {
		left: 30%;
		animation: effect-scratch 8s infinite;
		position: absolute;
	}	
}

.grain {
	width: 100%;
	height: 100%;
	position: absolute;
}

.grain:after {
	content: '';
	width: 110%;
	height: 110%;
	top: -5%;
	left: -5%;
	opacity: .25;
	background-image: 
		repeating-conic-gradient(var(--black) 0%, transparent .00003%, transparent .0005%, transparent .00095%),
		repeating-conic-gradient(var(--black) 0%, transparent .00005%, transparent 0.00015%, transparent 0.0009%);
	animation: none;
	filter: drop-shadow(0px 0px 1px black);
	position: absolute;
}
@media (min-width: 992px) {
	.grain:after {
		content: '';
		width: 110%;
		height: 110%;
		top: -5%;
		left: -5%;
		opacity: .25;
		background-image: 
			repeating-conic-gradient(var(--black) 0%, transparent .00003%, transparent .0005%, transparent .00095%),
			repeating-conic-gradient(var(--black) 0%, transparent .00005%, transparent 0.00015%, transparent 0.0009%);
		animation: grain 20s steps(1) infinite;
		filter: drop-shadow(0px 0px 1px black);
		position: absolute;
	}	
}


@keyframes grain {
	0%, 100% { transform: translate(0, 0); }
	10% { transform: translate(-1%, -1%); }
	20% { transform: translate(1%, 1%); }
	30% { transform: translate(-2%, -2%); }
	40% { transform: translate(3%, 3%); }
	50% { transform: translate(-3%, -3%); }
	60% { transform: translate(4%, 4%); }
	70% { transform: translate(-4%, -4%); }
	80% { transform: translate(2%, 2%); }
	90% { transform: translate(-3%, -3%); }
}

@keyframes film-scratch {
	0%, 100% { transform: translateX(0); opacity: 0.5; }
	10% { transform: translateX(-1%); }
	20% { transform: translateX(1%); }
	30% { transform: translateX(-2%); opacity: 0.75; }
	40% { transform: translateX(3%); }
	50% { transform: translateX(-3%); opacity: 0.5; }
	60% { transform: translateX(8%); }
	70% { transform: translateX(-3%); }
	80% { transform: translateX(10%); opacity: 0.25; }
	90% { transform: translateX(-2%); }
}

@keyframes effect-scratch {
	0% { transform: translateX(0); opacity: 0.75; }
	10% { transform: translateX(-1%); }
	20% { transform: translateX(1%); }
	30% { transform: translateX(-2%); }
	40% { transform: translateX(3%); }
	50% { transform: translateX(-3%); opacity: 0.5; }
	60% { transform: translateX(8%); }
	70% { transform: translateX(-3%); }
	80% { transform: translateX(10%); opacity: 0.25; }
	90% { transform: translateX(20%); }
	100% { transform: translateX(30%); }
}

/**** OLD FILM EFFECT END ****/