<!-- I found those snippets here https://www.divicio.us/tutorials/4-text-shadow-effects-for-divi-post-title-and-text-modules/
			 coincidentally and thought they were pretty, I didn't want to loose them so I made this. I slightly adjusted the CSS
			 because I don't need "Divi" styles. Whatever that is. -->

<div class="container">
	<div class="elegantshadow demo-box">
		<h1>h1:<br />ELEGANT SHADOW</h1>
		<p>p: ELEGANT<br />SHADOW</p>
	</div>

	<div class="deepshadow demo-box">
		<h1>h1:<br />DEEP SHADOW</h1>
		<p>p: DEEP<br />SHADOW</p>
	</div>

	<div class="insetshadow demo-box">
		<h1>h1:<br />INSET SHADOW</h1>
		<p>p: INSET<br />SHADOW</p>
	</div>

	<div class="retroshadow demo-box">
		<h1>h1:<br />RETRO SHADOW</h1>
		<p>p: RETRO<br />SHADOW</p>
	</div>
</div>

/*** Demo layout - can be ignored ***/
body {
	font-family: Open Sans, Arial, sans-serif;
	text-align: center;
}

* {
	box-sizing: border-box;
}

.container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	justify-content: center;
}

.demo-box {
	display: inline-block;
	display: flex;
	width: 640px;
	height: 640px;
	flex-direction: column;
	align-content: center;
	align-items: center;
	justify-content: center;
	margin: 0.5em;
}

/*** END Demo layout - can be ignored ***/

/*** Applies to all text ***/

h1,
p {
	margin: 0;
	font-weight: 500;
}

h1 {
	padding-bottom: 10px;
	font-size: 90px;
	line-height: 1em;
}

p {
	padding-bottom: 0.6em;
	font-size: 60px;
	line-height: 1.5em;
}

/*** END Applies to all text ***/

/*** Elegant Shadow ***/
.elegantshadow {
	background-color: #e7e5e4;
	color: #131313;

	h1,
	p {
		letter-spacing: 0.15em;
		text-shadow: 1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474,
			-3px 6px 1px #787777, -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d,
			-6px 12px 1px #828181, -7px 14px 1px #868585, -8px 16px 1px #8b8a89,
			-9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897,
			-12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1, -14px 28px 1px #a8a6a6,
			-15px 30px 1px #adabab, -16px 32px 1px #b2b1b0, -17px 34px 1px #b7b6b5,
			-18px 36px 1px #bcbbba, -19px 38px 1px #c1bfbf, -20px 40px 1px #c6c4c4,
			-21px 42px 1px #cbc9c8, -22px 44px 1px #cfcdcd, -23px 46px 1px #d4d2d1,
			-24px 48px 1px #d8d6d5, -25px 50px 1px #dbdad9, -26px 52px 1px #dfdddc,
			-27px 54px 1px #e2e0df, -28px 56px 1px #e4e3e2;
	}
}

/*** END Elegant Shadow ***/

/*** Deep Shadow ***/
.deepshadow {
	background-color: #333;
	color: #e0dfdc;

	h1,
	p {
		letter-spacing: 0.1em;
		text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a,
			0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222222,
			0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a,
			0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212,
			0 22px 30px rgba(0, 0, 0, 0.9);
	}
}

/*** END Deep Shadow ***/

/*** Inset Shadow ***/
.insetshadow {
	background-color: #2d2d2d;
	color: #202020;

	h1,
	p {
		letter-spacing: 0.1em;
		text-shadow: -1px -1px 1px #111, 2px 2px 1px #363636;
	}
}

/*** END Inset Shadow ***/

/*** Retro Shadow ***/
.retroshadow {
	background-color: #d5d5d5;
	color: #2c2c2c;

	h1,
	p {
		letter-spacing: 0.05em;
		text-shadow: 4px 4px 0px #d5d5d5, 7px 7px 0px rgba(0, 0, 0, 0.2);
	}
}

/*** END Retro Shadow ***/