@import url("https://use.fontawesome.com/releases/v5.15.3/css/all.css");

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	font-size: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2em;
	font-family: sans-serif;
	background-color: #f2f8f4;
	background-image: url("../img/bg.jpg");
	background-position: center bottom;
	background-repeat: no-repeat;
	overflow-x: hidden;
}
h1 {
	margin-bottom: 1em;
	text-align: center;
}
#dir-sign {
	list-style-type: none;
	counter-reset: step;
	display: flex;
	flex-direction: column;
	gap: 1.5em;
	position: relative;
	padding-top: 2.5em;
	padding-bottom: 7.5em;
}
#dir-sign::before,
#dir-sign::after {
	content: "";
	position: absolute;
	left: 50%;
}
#dir-sign::before {
	width: 1.5em;
	height: 100%;
	border-radius: 1em 1em 0.25em 0.25em;
	top: 0;
	transform: translateX(-50%);
	background-color: rgb(134, 65, 19);
	background-image: linear-gradient(
		to right,
		rgba(255, 255, 255, 0.25),
		transparent 30%,
		rgba(0, 0, 0, 0.25) 60% 80%,
		transparent
	);
}
#dir-sign::after {
	width: 10em;
	height: 1em;
	background-image: radial-gradient(rgba(0, 0, 0, 1) 0em, rgba(0, 0, 0, 0) 1.5em),
		radial-gradient(rgba(0, 0, 0, 0.5) 1em, rgba(0, 0, 0, 0) 70%);
	bottom: 0;
	transform: translate(-50%, 50%);
	border-radius: 50%;
	z-index: -1;
}

#dir-sign li {
	display: flex;
	align-items: center;
	background: var(--signColor);
	background-image: var(--woodTexture);
	background-size: cover;
	color: var(--textColor);
	counter-increment: step;
	position: relative;
	--shadow: drop-shadow(0.025em 0.025em 0.05em rgba(0, 0, 0, 0.5));
}

#dir-sign li:nth-child(odd) {
	padding: 0.5em 1.5em 0.5em 2em;
	flex-direction: row;
	clip-path: polygon(
		2em 0,
		100% 0,
		calc(100% - 1em) 50%,
		100% 100%,
		2em 100%,
		0 50%
	);
	left: 50%;
	transform: translateX(calc(-100% + 5em));
	align-self: flex-start;
}

#dir-sign li:nth-child(even) {
	padding: 0.5em 2em 0.5em 1.5em;
	flex-direction: row-reverse;
	clip-path: polygon(
		0 0,
		calc(100% - 2em) 0,
		100% 50%,
		calc(100% - 2em) 100%,
		0 100%,
		1em 50%
	);
	right: 50%;
	transform: translateX(calc(100% - 5em));
	align-self: flex-end;
}

#dir-sign li > * {
	filter: var(--shadow);
}
#dir-sign li::after {
	content: "0" counter(step);
	width: 2em;
	height: 2em;
	border: 0.05em solid var(--textColor);
	border-radius: 50%;
	display: grid;
	place-items: center;
	text-align: center;
	filter: var(--shadow);
}

#dir-sign li:nth-child(odd):after {
	margin-left: 3em;
}
#dir-sign li:nth-child(even):after {
	margin-right: 3em;
}

#dir-sign li .icon {
	width: 2em;
	height: 2em;
	display: grid;
	place-content: center;
	font-size: 0.9em;
}

#dir-sign li:nth-child(odd) .icon {
	margin-right: 1em;
}
#dir-sign li:nth-child(even) .icon {
	margin-left: 1em;
}

#dir-sign li .icon i {
	font-size: 1.5em;
}
#dir-sign li .text {
	flex: 1;
	/* max-width: 22vw; */
	position: relative;
}

#dir-sign li .text::before,
#dir-sign li .text::after {
	content: "";
	width: 1em;
	height: 1em;
	background-color: rgb(180, 180, 180);
	background-image: linear-gradient(
		to right,
		transparent 40%,
		rgba(0, 0, 0, 0.25) 40% 60%,
		transparent 60%
	);
	position: absolute;
	border-radius: 50%;
	top: 50%;
	--scale: scale(0.3);
}

#dir-sign li .text::before {
	transform: translateY(calc(-50% + 0.75em)) var(--scale) rotate(45deg);
}
#dir-sign li .text::after {
	transform: translateY(calc(-50% - 0.75em)) var(--scale) rotate(135deg);
}

#dir-sign li:nth-child(odd) .text::before,
#dir-sign li:nth-child(odd) .text::after {
	right: -2em;
}

#dir-sign li:nth-child(even) .text::before,
#dir-sign li:nth-child(even) .text::after {
	left: -2em;
}

@media screen and (max-width: 500px) {
	body {
		padding-left: 1em;
		padding-right: 1em;
		align-items: flex-start;
		font-size: 18px;
	}
	h1 {
		text-align: left;
	}
	#dir-sign::before,
	#dir-sign::after {
		left: 4.5em;
	}

	#dir-sign li:nth-child(odd),
	#dir-sign li:nth-child(even) {
		padding: 0.5em 2em 0.5em 1.5em;
		flex-direction: row-reverse;
		clip-path: polygon(
			0 0,
			calc(100% - 2em) 0,
			100% 50%,
			calc(100% - 2em) 100%,
			0 100%,
			1em 50%
		);
		left: 0;
		transform: none;
		align-self: flex-start;
	}

	#dir-sign li:nth-child(odd):after,
	#dir-sign li:nth-child(even):after {
		margin: 0 2em 0 0;
	}
	#dir-sign li:nth-child(odd) .icon,
	#dir-sign li:nth-child(even) .icon {
		margin: 0 0 0 1em;
	}

	#dir-sign li:nth-child(odd) .text::before,
	#dir-sign li:nth-child(odd) .text::after,
	#dir-sign li:nth-child(even) .text::before,
	#dir-sign li:nth-child(even) .text::after {
		left: -1.5em;
		right: unset;
	}

	#dir-sign li .icon {
		width: 1.5em;
		height: 1.5em;
		display: grid;
		place-content: center;
		font-size: 0.8em;
	}
}

#dir-sign {
	--woodTexture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100'%3E%3Cdefs%3E%3Cstyle%3E path%7B fill:black ;opacity:0.05; %7D %3C/style%3E%3C/defs%3E%3Cpath d='M400.35,60.68c-7.56.29-15.13.79-22.63,1.11-40.5,1.68-81-.45-121.5,2.55-20.78,1.53-41.4,5.84-62.17,7.78-22.25,2.08-45,.49-67.24-.09C84.67,71,42.54,69.15.39,68.87v2.91C43.2,72.15,86,73.94,128.8,75c20.91.54,41.9,1.39,62.8-.09,24.55-1.74,48.81-7.2,73.41-8.5,45-2.36,90.27-2.1,135.34-2.87Z' transform='translate(-0.36 -0.22)'/%3E%3Cpath d='M400.36,91.11a140.32,140.32,0,0,0-22.67.49C339.89,96,303.23,96,265.29,94.53c-38.24-1.44-76.72-.59-114.9-3.26-14-1-27.54-3.84-41.53-1.48C101,91.12,93.48,95.7,86.1,100.21h7.15c12.43-6.39,24.28-8.75,38.2-7.17a469.37,469.37,0,0,0,50.82,2.8c36.43.18,72.78,2,109.2,3.14,16.52.55,33,1.55,49.54.3,16.77-1.28,33.39-4.59,50.22-5.43,3-.15,6.09-.15,9.13-.08Z' transform='translate(-0.36 -0.22)'/%3E%3Cpath d='M400.33,27.07c-13.14,2.45-26.16,6.46-39.35,8.39-21.75,3.21-43.82,2.13-65.67,2.09-21.53,0-43.45,1.54-64.81-2.2-16.79-2.92-32.81-7.79-49.89-7.15-18.89.71-37.81,1.67-56.7,2.58-21.85,1.07-43.27,6-65.19,5.19C39.26,35.24,19.93,32.06.45,31.54v2.94C18.68,35.2,36.81,37.7,55,38.8,75.52,40,95.5,35.45,115.88,33.91c23.35-1.78,47.85-3.6,71.24-2.93,20,.57,39.3,8.64,59.33,9.3,40.73,1.34,82.87,3,123.32-3.82,10.49-1.76,20.52-3.82,30.56-5.41Z' transform='translate(-0.36 -0.22)'/%3E%3Cpath d='M400.32.22C385,2.31,369.65,4.57,354.23,5.57c-21.41,1.39-43-1.37-64.34-3.1-22.34-1.8-44.48-1.13-66.84-.58-41.69,1-83.31-1-125,.49-23.84.88-47.5.75-71.33.2C17.61,2.37,9,4.3.49,6.59v3.55a116.12,116.12,0,0,1,29.69-3c18.7.42,37.3.65,56,0,45-1.49,89.81.11,134.76-.86,42.26-.89,84.17,4.44,126.35,3.89,17.8-.21,35.43-2.84,53-5.3Z' transform='translate(-0.36 -0.22)'/%3E%3Cpath d='M400.33,18a284.67,284.67,0,0,0-30.11,3.89c-32.5,6.3-63.69,10-96.64,8.84-30.38-1-60.33-5.64-90.63-7.7-14.36-1-28.62,1.56-43,1.55-31.87,0-63.74-1.39-95.62-1.16-5.07,0-32.09-2.72-43.88,2.05v2.3c6.68-2.79,24.36-1.93,26.77-2,15.27-.56,30.56-.39,45.84-.21,25.83.31,51.74,1.81,77.56.88,47.84-1.72,95.25,6.37,143.21,6.8,27.68.25,54.25-5.15,81.52-10.44a240.9,240.9,0,0,1,25-3.29Z' transform='translate(-0.36 -0.22)'/%3E%3Cpath d='M400.35,51.9c-9.9.7-19.78,1.39-29.6,1.64-43.21,1.1-86.3-2.11-129.48,1.45-42.16,3.47-81.93,12.33-124.45,7.21-20.82-2.51-41-9.13-61.93-10.64C36.75,50.25,18.51,51.94.41,54v3.86c19.48-2.09,38.91-3.43,58.49-2,19,1.37,37.55,7.59,56.46,10.24,38.69,5.41,75.8-1.31,114.21-6,43.35-5.33,87.12-2.93,130.6-2.59,13.33.11,26.75-.87,40.18-1.8Z' transform='translate(-0.36 -0.22)'/%3E%3Cpath d='M400.36,78.58c-13.93-.18-27.89-1.12-41.81-.74-43.91,1.16-87.5,4.33-131.47,3.6-42.89-.71-86.22-3.26-129.08-.38-20,1.35-38.24,10.36-58.5,5.27-13-3.28-25.85-8.68-39.13-9.06v5.2c14,.57,27.72,6.62,41.35,10,17,4.28,33.56-3.14,50.35-5.8,20-3.18,41-1.47,61.08-1.06,22.58.47,45.17.48,67.74.86,43.95.75,87.52-1.41,131.42-3.31,16-.68,32-.06,48.06.25Z' transform='translate(-0.36 -0.22)'/%3E%3Cpath d='M400.32,7.84c-14.07,2-28.15,3.93-42.27,5.31-43.2,4.24-86.63,4.45-129.92,2.88-40-1.46-80-6.9-120.12-6.85-19.26,0-38.3,3.74-57.57,3.88-16.77.11-33.37-.21-50,2.73v3.63c17.6-3,35.31-2.4,53.06-2.52,19.26-.15,38.29-3.84,57.58-3.85,40.14,0,80.36,5.6,120.5,7.06A1015.75,1015.75,0,0,0,346,17.91c18.15-1.4,36.23-4,54.31-6.5Z' transform='translate(-0.36 -0.22)'/%3E%3Cpath d='M400.34,45c-11,1-21.95,1.7-33.14,1.68-46-.09-91.6-2.74-137.51-5a440.34,440.34,0,0,0-62.38,1c-23.19,2.12-43.83,11.71-67.49,6.86C67.09,42.75,33.59,35.81.43,42.71v4.87c19.21-4.09,39-2.63,58.32-.74,18.64,1.84,37.39,10.32,56,9.73,21.37-.66,41.95-8.36,63.25-9.93,24-1.77,48.05-.34,72,1.22,42.49,2.75,84.74,3.7,127.28,3.79,7.72,0,15.39-.51,23-1.25Z'/%3E%3C/svg%3E");
}