<h1 class="titles">The many faces of poop</h1>
<h1 class="poop cool-animals mr-poop">💩</h1>
<h1 class="poop animal-kingdom poop-king">💩</h1>
<h1 data-heading="🎩" class="poop gentlemen gentlemen-poop">💩</h1>
<h1 class="poop smart-poop">💩</h1>
<h1 class="poop holiday-poop">💩</h1>
<h1 class="poop hot-poop">💩</h1>
<h1 class="poop cowboy-poop">💩</h1>
<h1 class="poop dev-poop">💩</h1>
<h1 class="poop sparkles-poop">💩</h1>
<h1 class="poop english-poop">💩</h1>
<h1 class="poop santa-poop">💩</h1>
<h1 class="poop poopnado">🌪</h1>
<hr> 
<br/>
<h1 class="titles">Requests</h1>
<br />
<h1 class="spidey spidey-notwet">🕷</h1>
<h1 class="spidey spidey-ohno">☂️</h1>
<h1 class="spidey spidey-ohno">😨</h1>
<h1 class="spidey spidey-ohno-uber">😱</h1>

<hr> 
<br/>
<h1 class="titles">The animal kingdom</h1>
<h3 class="animal-kingdom">🐹</h3>
<h3 class="animal-kingdom">🐯</h3>
<h3 class="animal-kingdom">🐶</h3>
<h3 class="animal-kingdom">🐱</h3>
<h3 class="animal-kingdom poop-king">💩</h3>
<h3 class="animal-kingdom">🐵</h3>
<h3 class="animal-kingdom">🐼</h3>
<h3 class="animal-kingdom">🦊</h3>
<h3 class="animal-kingdom">🐻</h3>
<h3 class="animal-kingdom">🐷</h3>
<h3 class="animal-kingdom">🐨</h3>
<h3 class="animal-kingdom">🦁</h3>

<hr>
<br/>
<h1 class="titles">The originals</h1>
<h1 data-heading="💖">💜</h1>
<h1 data-heading="🙌🏼">🙌🏾</h1>
<h1 data-heading="😺">😸</h1>
<h1 data-heading="💚">💛</h1>
<h1 data-heading="🙏🏽">🙏🏿</h1>
<h1 data-heading="😩">😫</h1>
<h1 data-heading="👐🏽">👐🏼</h1>
<h1 data-heading="🦋" class="butterfly">🦋</h1>
<h1 data-heading="💩" class="poop-coloured">💩</h1>
<h1 data-heading="💚" class="fenders-heart">💜</h1>
<h1 data-heading="😐">😑</h1>
<h1 data-heading="😗">😙</h1>
<h1 data-heading="😡">😠</h1>
<h1 data-heading="💙" class="star-heart">💜</h1>
<h1 data-heading="🦄" class="unicorn">🐴</h1>

<hr>
<br>
<h1 data-heading="🕴" class="floatyman">💁</h1>
<h1 data-heading="🎩" class="gentlemen">😁</h1>
<h1 data-heading="😒" class="skeptical">🤔</h1>
<h1 data-heading="😎" class="skeptical">🤔</h1>

<hr>
<br/>
<h1 class="titles">The Masked Vigilante</h1>
<h2 class="masked-face">😏</h2>
<h2 class="masked-face">🤔</h2>
<h2 class="masked-face">😔</h2>
<h2 class="masked-face small">🤕</h2>
<h2 class="masked-face">😦</h2>
<hr>
<br />

<h1 class="titles">Cool animals</h1>
<h3 class="cool-animals">🐼</h3>
<h3 class="cool-animals monkey">🐵</h3>
<h3 class="cool-animals">🐼</h3>
<h3 class="cool-animals">🦊</h3>
<h3 class="cool-animals">🐻</h3>
<h3 class="cool-animals cool-cat">😺</h3>

<h3 class="cool-animals pig">🐷</h3>
<h3 class="cool-animals">🐨</h3>
<h3 class="cool-animals lion">🦁</h3>
<h3 class="cool-animals mr-poop">💩</h3>

<hr><br/>

html {
	height: 100%;
	background: radial-gradient(ellipse at center, rgba(161,219,255,1) 33%,rgba(73,179,215,1) 99%);
}

body {
	padding: 2rem;
	height: 100%;
}

.titles {
	font-size: 24px;
	display: block;
	text-align: left;
	margin-bottom: 24px;
}

h1 {
	font-size: 60px;
	margin: 0;
	position: relative;
	text-align: center;
	display: inline-block;

	&:before {
		content: attr(data-heading);
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
		width: 50%;
		display: inline-block;
	}
}

.butterfly:before {
	filter: hue-rotate(60deg)
}

.poop-coloured {
	filter: hue-rotate(270deg);
	&:before {
		filter: hue-rotate(180deg)
	}
}

.fenders-heart:before {
	clip-path: polygon(32% 0%, 100% 70%, 100% 100%, 0 100%, 0 0);
	width: auto;
}


.star-heart:before {
	width: auto;
	clip-path: polygon(50% 22%, 56% 38%, 72% 38%, 58% 48%, 64% 65%, 50% 55%, 37% 65%, 42% 48%, 29% 38%, 44% 38%);
}

.unicorn:before {
	width: auto;
	clip-path: polygon(0 0, 0 90%, 48% 0);
}

.floatyman {
	&:before {
		width: auto;
		transform: translate(34%, -32%);
	}
}

.gentlemen {
	&:before {
		width: auto;
		transform: scale(.8) translate(0, -65%);
	}
}


.skeptical:before {
	width: 100%;
	height: 52%;
	transform: translateY(-2px)
}

.masked-face {
	font-size: 80px;
	margin: 0;
	position: relative;
	text-align: center;
	display: inline-block;
	font-size: 60px;

	&:before {
		content: '😈';
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
		width: 50%;
		display: inline-block;
		width: 100%;
		height: 56%;
		display: inline-block;
		filter: hue-rotate(80deg);
	}
	
	&.small:before {
		transform: scale(1.03);	
	}
}


// THE ANIMAL KINGDOM
.animal-kingdom {
	font-size: 80px;
	margin: 0;
	position: relative;
	text-align: center;
	display: inline-block;
	font-size: 60px;

	&:before {
		content: '🤴'; // change to the crown emoji, who knew there was a crown emoji? Not me until I did this and then realised afterwards.
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
		width: 50%;
		display: inline-block;
		width: 100%;
		height: 40%;
		display: inline-block;
		transform: translate(0, -25%);
	}
	
	&.poop-king:before {
		transform: translate(0, 0%);
	}
}



// ALL THE COOL ANIMALS 
.cool-animals {
	font-size: 80px;
	margin: 0;
	position: relative;
	text-align: center;
	display: inline-block;
	font-size: 60px;

	&:before {
		content: '🕶';
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
		display: inline-block;
		width: 100%;
		height: 100%;
		display: inline-block;
		transform: translate(0, 10%) scale(0.9);
	}
	
	&.lion:before,
	&.monkey:before,
	&.pig:before{
		transform: translate(0, 0%) scale(0.9);
	}
	
	&.mr-poop:before {
		transform: translate(0, 7%) scale(.8);
	}
}


//smart poop
.poop {
	margin: 0;
	position: relative;
	text-align: center;
	display: inline-block;
	font-size: 60px;
	
	&:before {
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
		display: inline-block;
		width: 100%;
		display: inline-block;
	}
}

// Poop with tiny hat...why is there no monocle emoji?
.gentlemen-poop:before {
	transform: scale(.4) translate(25%, -80%) rotate(15deg);
}

.smart-poop:before {
	content: '👓';
	height: 100%;
	transform: translate(0, 7%) scale(0.9);
	mix-blend-mode: darken;
}

// Holiday Poop
.holiday-poop:before {
	content: '🌺';
	height: 100%;
	transform: translate(-15%, -25%) scale(0.3);
}

//hot poop
.hot-poop:before {
	content: '🔥';
	height: 100%;
	transform: translate(0,-45%) scale(.5);
}


//cowboy poop
.cowboy-poop:before {
	content: '🤠';
	height: 28%;
	transform: translate(0,24%) scale(1);
}


//Dev poop - seemed appropriate
.dev-poop:before {
	content: '👩‍💻';
	transform: translate(0,3%) scale(1);
	clip-path: polygon(17% 50%, 86% 50%, 85% 100%, 17% 100%);
}

//Sparkles poop - I made this just so i could have the class "sparkles-poop". It's late, I don't even know what I'm doing anymore.
.sparkles-poop:before {
	content: '✨';
	transform: translate(5%,-20%) scale(.4);
}

.english-poop:before {
	content: '💂';
	height: 51%;
	transform: translate(-2%,-30%) scale(1);
}

.santa-poop:before {
	content: '🎅';
	height: 31%;
	transform: translate(-2%,20%) scale(.8, 1);
}

.poopnado {
	&:before {
		content: '💩';
		transform: rotate(20deg) scale(.5);
	}
	
	&:after {
		content: '💩';
		transform: rotate(-30deg) scale(.3) translate(160%, -60%);
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
		display: inline-block;
		width: 100%;
		display: inline-block;
	}
}


.spidey {
	margin: 0;
	position: relative;
	text-align: center;
	display: inline-block;
	font-size: 60px;
	margin: 0 20px 0 0;
	
	&:before {
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
		display: inline-block;
		width: 100%;
		display: inline-block;
	}
}

.spidey-notwet:before {
	content: "☔️";
	transform: translate(19%, -39%) rotate(17deg);
	mix-blend-mode: darken;
}

.spidey-ohno:before {
	content: "🕷";
	transform: translate(20%, -20%) rotate(-20deg) scale(0.4);
}


.spidey-ohno-uber:before {
	content: "🕷";
	transform: translate(5%, -20%) rotate(-50deg) scale(0.35);
}