/**
	Wall style
*/
.graffiti-parent {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	height: 100vh;
	background-color: #222;
	user-select: none;
	pointer-events: none;


	z-index: -500;
}
#graffitis {
	position: fixed;
	left: 0;
	top: 0px;
	bottom: 0;

	
	margin: 0px;
	background: #222;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

#graffitis .graffiti-overlay {
	position:sticky;
	left: 0px;
	top: 0;

	z-index: -1;
	background: url('/img/bg/graffiti/bricks.jpg');
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	mix-blend-mode: overlay;
}

/*
	Graffitis
*/
#graffitis img {
	mix-blend-mode: lighten;
	opacity: 0.5;
	position: absolute;
	z-index: -499;
	background-color: transparent;
	height: 20%;
	translate: -50% -50%;
}

#graffitis {
	--size: 50vw;
}


@media (min-width:1280px) {
	#graffitis {
		--size: calc((100vw - 1192px) / 2);
	}
}

/* Max */
#graffitis img:nth-child(1) {
	transform: rotate(-25deg);
	left: calc(0.4 * var(--size));
	top: 20%;
}

/* Stef */
#graffitis img:nth-child(2) {
	transform: rotate(15deg);
	left: calc(0.65 * var(--size));
	top: 50%;
}

/* Pat */
#graffitis img:nth-child(3) {
	transform: rotate(-10deg);
	left: calc(0.3 * var(--size));
	top: 80%;
}

/* Greg */
#graffitis img:nth-child(4) {
	transform: rotate(20deg);
	left: calc(100% - (0.25 * var(--size)));
	top: 14%;
}

/* Greg */
#graffitis img:nth-child(5) {
	transform: rotate(-35deg);
	left: calc(100% - (0.65 * var(--size)));
	top: 35%;
}

/* Alex */
#graffitis img:nth-child(6) {
	transform: rotate(25deg);
	left: calc(100% - (0.4 * var(--size)));
	top: 60%;
}

/* Ray */
#graffitis img:nth-child(7) {
	transform: rotate(25deg);
	left: calc(100% - (0.6 * var(--size)));
	top: 80%;
}

@media (max-width:1280px) {
	:root {
		--g-right: 50vw;
		--g-left: 50vw;
	}
}