body {
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	background-color: #000;
	position: relative;
}

body:after {
	content: "";
	background: url('./assets/img\ \(1\).webp') repeat center center;
	opacity: 0.07;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: fixed;
	z-index: 100;
	pointer-events: none;
}

.angle {
	cursor: pointer;
	width: 100%;
	height: 1000px;
	margin-bottom: -400px;
	padding: 0;
	background-color: #000;
	background-size: cover, auto;
	background-attachment: fixed;
	background-position: center center;
	clip-path: polygon(50% 25%, 100% 0%, 100% 50%, 50% 75%, 0% 100%, 0% 50%);
	transition: all .7s ease-in-out;
	background-blend-mode: lighten;
}

.angle.first {
	clip-path: polygon(50% 0%, 100% 0%, 100% 50%, 50% 75%, 0% 100%, 0% 0%);
}

.angle.last {
	clip-path: polygon(50% 25%, 100% 0%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);
}

.arrow {
	clip-path: polygon(50% 25%, 100% 50%, 100% 100%, 50% 75%, 0% 100%, 0% 50%);
}

.arrow.first {
	clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 75%, 0% 100%, 0% 0%);
}

.arrow.last {
	clip-path: polygon(50% 25%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);
}

.one {
	background-image: url('./assets/img\ \(2\).webp');
}

.two {
	background-image: url('./assets/img\ \(3\).webp');
}

.three {
	background-image: url('./assets/img\ \(4\).webp');
}

.four {
	background-image: url('./assets/img\ \(5\).webp');
}

.five {
	background-image: url('./assets/img\ \(6\).webp');
}

.six {
	background-image: url('./assets/img\ \(7\).webp');
}