text: // Partials ==========================================================================
  @import 'functions';
  @import 'extensions';
  @import 'reset';
  
  
  // Variables =========================================================================
  $mobile: 30em;
  $tablet: 50em;
  $easing: ease-in-out;
  
  $purple : #181236;
  	$purple_dark : shade($purple, 40%);
  $brown : #3F1F13;
  $gold : #EDBF68;
  	$gold_light : tint($gold, 30%);
  	$gold_dark : rgba($gold, .5);
  $blue : #283377;
  	$blue_twitter : #1da1f2;
  	$blue_dark : shade($blue, 40%);
  $black : shade($blue, 85%);
  $white : #fafafa;
  	$shadow : rgba($purple_dark, .2);
  	$gray : mix($white, $black);
  
  $transition: 1s;
  $radius: 1rem;
  
  
  // Partials width variable access ====================================================
  @import 'keyframes';
  
  
  // Base Styles =======================================================================
  body {
  	position: relative;
  	background: $purple_dark;
  	background: linear-gradient($purple_dark, $purple);
  	color: $gold;
  	font: 400 100%/1.2 Amatic SC, sans-serif;
  	min-height: 100vh;
  	text-align: center;
  
  	@media (min-width: $tablet) {
  		padding: 1em;
  		font-size: 110%;
  	}
  }
  
  
  // Typography ========================================================================
  h1, h2, h3, h4, h5, h6 {
  	font-weight: normal;
  }
  
  h1 {
  	font-size: 3em;
  	line-height: 1;
  }
  
  h2 {
  	font-size: 1.6em;
  	margin-bottom: 1rem;
  }
  
  h3 {
  	font-size: 1.3em;
  	margin-bottom: 1rem;
  }
  
  a {
  	@extend %no-drag;
  	text-decoration: none;
  	cursor: pointer;
  	color: $gold;
  	border-bottom: thin dashed $gold_dark;
  
  	&:hover {
  		color: $gold_light;
  		border-bottom: thin dashed $gold;
  	}
  }
  
  
  // Structural Styles =================================================================
  .container {
  	max-width: 70em;
  	margin: 0 auto;
  	padding: 1em;
  }
  
  
  // Header ============================================================================
  header {
  	@extend %no-select;
  	text-align: left;
  
  	.content {
  		display: flex;
  		align-items: center;
  		justify-content: space-between;
  		flex-wrap: wrap;
  		padding: 0 0 0 1em;
  	}
  }
  
  .logo, .directions-toggle {
  	@extend %no-select;
  	font-size: 1.5em;
  	cursor: pointer;
  
  	@media (min-width: $tablet) {
  		font-size: 2em;
  	}
  }
  
  .logo {
  	line-height: 1.5;
  	margin-right: 1rem;
  	color: $gold;
  
  	&, &:hover {
  		border: 0;
  	}
  
  	@media (min-width: $tablet/2) {
  		font-size: 2em;
  	}
  
  
  	@media (min-width: $tablet) {
  		font-size: 3em;
  		line-height: 1;
  
  		.showing-directions & {
  			transform-origin: top left;
  			transform: scale(.75);
  		}
  	}
  }
  
  
  // Directions ==========================================================================
  .directions-toggle, .directions-box {
  	background: $blue;
  	color: $white;
  	border-radius: $radius;
  }
  
  .directions-toggle {
  	@extend %no-tap;
  	display: inline-block;
  	position: relative;
  	cursor: pointer;
  	padding: 1rem .75em;
  	margin-bottom: 1rem;
  	box-shadow: inset .3rem -.3rem $shadow;
  
  	header & {
  		margin-bottom: 0;
  	}
  
  	footer & {
  		font-size: 1em;
  	}
  
  	.showing-directions header & {
  		border-radius: $radius $radius 0 0;
  		box-shadow: none;
  
  		&:after {
  			@extend %psuedo;
  			position: absolute;
  			width: $radius*2;
  			height: $radius*2;
  			background: transparent;
  			bottom: 0;
  			right: 100%;
  			border-radius: $radius;
  			box-shadow: $radius $radius $blue;
  		}
  	}
  
  	.showing-directions footer & {
  		box-shadow: inset 0 0 0 2px $blue;
  		background: transparent;
  	}
  
  	.close {
  		display: none;
  		position: absolute;
  		top: 0;
  		right: 0;
  		width: 100%;
  		height: 100%;
  		border-radius: $radius $radius 0 0;
  		text-align: center;
  		vertical-align: middle;
  		background: rgba($blue, .9);
  		background: linear-gradient(90deg, rgba($blue, 0), $blue 66%);
  
  		path {
  			stroke: $gold;
  			stroke-width: 1px;
  			stroke-linecap: round;
  		}
  
  		&:hover {
  			path {
  				stroke: $gold_light;
  			}
  		}
  
  		.showing-directions & {
  			display: inline-block;
  		}
  	}
  }
  
  .directions-box {
  	display: none;
  	position: relative;
  	box-shadow: inset .3rem -.3rem $shadow;
  
  	h2, h3 {
  		margin: 0;
  	}
  
  	.showing-directions & {
  		display: block;
  		border-radius: $radius 0 $radius $radius;
  		padding-bottom: .3rem;
  
  		@media (min-width: $tablet) {
  			display: flex;
  			align-items: center;
  			text-align: center;
  		}
  	}
  }
  
  .examples {
  	font-weight: bold;
  	list-style: none;
  	padding: 1em;
  
  	@media (min-width: $tablet) {
  		flex: 1 0 24em;
  		text-align: left;
  	}
  }
  
  .example-tweet {
  	display: block;
  	position: relative;
  	padding: .5rem 1rem .5rem 1.75em;
  	vertical-align: middle;
  	background: $white;
  	font-size: 1.5em;
  	color: $black;
  	border: 0;
  	margin-top: .25em;
  	cursor: text;
  	border-radius: $radius;
  }
  
  .handle-highlight, .color-highlight, .more-highlight, .personality-highlight {
  	border-radius: .25em;
  	font-weight: bold;
  	box-shadow: -.1em 0 rgba($gold, 0), .1em 0 rgba($gold, 0);
  }
  
  .showing-directions {
  	$highlight-duration : 12s;
  
  	.handle-highlight, .color-highlight, .more-highlight, .personality-highlight {
  		animation: highlight-light-on-dark $highlight-duration ease-in-out infinite;
  	}
  
  	.instructions {
  		.handle-highlight, .color-highlight, .more-highlight, .personality-highlight {
  			animation-name: highlight-dark-on-light;
  			color: $gold;
  		}
  	}
  
  	.color-highlight { animation-delay: $highlight-duration * .25; }
  	.personality-highlight { animation-delay: $highlight-duration * .5; }
  	.more-highlight { animation-delay: $highlight-duration * .75; }
  }
  
  
  .twitter-logo {
  	width: 1.5em;
  	height: 1.5em;
  	vertical-align: middle;
  	position: absolute;
  	top: .125em;
  	left: .125em;
  
  	path {
  		fill: $blue_twitter;
  	}
  }
  
  .is-visible {
  	display: block;
  }
  
  
  // Creature structure ================================================================
  .creatures {
  	min-height: 25vh;
  	text-align: center;
  
  	.showing-directions & {
  		opacity: .25;
  
  		a {
  			pointer-events: none;
  		}
  	}
  }
  
  .item {
  	@extend %no-select;
  	animation: load .5s ease-out both;
  	display: inline-block;
  	width: 50%;
  	vertical-align: middle;
  	text-align: center;
  	padding: 1em;
  
  	// Animation delay
  	@for $i from 1 through 16 {
  		&:nth-child(#{$i}) {
  			animation-delay: $i*.15s;
  		}
  	}
  
  	// Media queries for sizing creatures
  	@for $i from 3 through 8 {
  		@media (min-width: 14em * $i) {
  			width: 100%/$i;
  		}
  	}
  
  	// Limit number of creatures for performance
  	@media (max-width: 14em * 3) {
  		&:nth-last-child(-n+4) {
  			display: none;
  		}
  	}
  	@media (min-width: 14em * 3) and (max-width: 14em * 4) {
  		&:nth-last-child(1) {
  			display: none;
  		}
  	}
  	@media (min-width: 14em * 4) and (max-width: 14em * 5) {
  		&:nth-last-child(-n+2) {
  			display: none;
  		}
  	}
  	@media (min-width: 14em * 5) and (max-width: 14em * 5) {
  		&:nth-last-child(-n+4) {
  			display: none;
  		}
  	}
  
  	&.ad-box,
  	&.default-box {
  		display: inline-block !important;
  	}
  
  	&.is-hidden {
  		display: none !important;
  	}
  }
  
  .default-box {
  	cursor: default;
  }
  
  .info {
  	padding: 1rem 0;
  	line-height: 1.5;
  
  	.default-box & {
  		line-height: 1.2;
  	}
  
  	h3 {
  		margin-bottom: 0;
  	}
  	a {
  		font-weight: bold;
  	}
  }
  
  
  // Creature ==========================================================================
  .creature {
  	animation: wobble 3s ease-in-out infinite;
  	animation-delay: inherit;
  	position: relative;
  	width: 100%;
  	padding-bottom: 100%;
  	margin: 0 auto;
  	border-radius: 50%;
  	transform-origin: center bottom;
  	box-shadow: inset .3rem -.5rem $shadow;
  	transition: box-shadow $transition;
  
  	$colors_list: #f44336, #d8a635, #5aa959, #3cb9b9, #5a31bb, #785cbb, #f44336, #d8a635, #5aa959, #3cb9b9;
  
  	@for $i from 1 through length($colors_list) {
  		.creature-box:nth-last-child(#{$i}) & {
  			background-color: nth($colors_list, $i);
  		}
  	}
  
  	.creature-box:hover & {
  		box-shadow: inset .3rem -.75rem $shadow;
  		transition-duration: $transition*.25;
  	}
  
  	.showing-directions & {
  		filter: grayscale(1);
  	}
  }
  
  
  // Face ------------------------------------------------------------------------------
  .face {
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	right: 0;
  	bottom: 0;
  	transition: transform $transition;
  
  	.creature-box:hover & {
  		transform: translateY(-5%) scale(.95);
  		transition: transform $transition*.25;
  	}
  }
  
  
  // Eyes ------------------------------------------------------------------------------
  .eyes {
  	position: absolute;
  	top: 22%;
  	width: 100%;
  	height: 14%;
  }
  
  .eye {
  	animation: blink 5s linear infinite;
  	position: absolute;
  	height: 100%;
  	width: 9%;
  	background: $purple_dark;
  	border-radius: 50%;
  
  	&:nth-child(1) {
  		left: 33%;
  	}
  	&:nth-child(2) {
  		right: 33%;
  	}
  }
  
  
  // Moustache -------------------------------------------------------------------------
  .moustache {
  	position: absolute;
  	top: 38%;
  	left: 18%;
  	width: 64%;
  	height: 14%;
  }
  
  
  // Mouth -----------------------------------------------------------------------------
  .mouth {
  	position: absolute;
  	background: $purple_dark;
  	top: 45%;
  	left: 22%;
  	right: 22%;
  	bottom: 45%;
  	border-radius: 20% 20% 50% 50%;
  	transform-origin: center top;
  	overflow: hidden;
  	transition: transform $transition*.25;
  
  	.creature-box:hover & {
  		transform: scale3d(.95,.75,1);
  	}
  }
  
  .tooth {
  	position: absolute;
  	top: 0;
  	width: 15%;
  	bottom: 55%;
  	background: $white;
  	border-radius: 0 0 2px 2px;
  
  	&:nth-child(1) {
  		left: 32%;
  	}
  	&:nth-child(2) {
  		right: 32%;
  	}
  }
  
  
  // Modifiers =========================================================================
  .mod-angry {
  	.face {
  		animation: angry 4s ease-in-out infinite;
  	}
  	.mouth {
  		border-radius: 50% 50% 5px 5px;
  		left: 30%;
  		right: 30%;
  	}
  }
  
  .mod-camouflage {
  	.creature {
  		background: url(img/mod-camouflage.png);
  		background-position: center center;
  	}
  }
  
  .mod-cyclops {
  	.eye {
  		&:nth-child(1) {
  			left: 45%;
  		}
  		&:nth-child(2) {
  			right: 45%;
  		}
  	}
  }
  
  .mod-dark {
  	.mouth, .eye {
  		background: #333;
  	}
  }
  
  .mod-frozen {
  	* {
  		animation-play-state: paused !important;
  	}
  }
  
  .mod-ghost {
  	.creature {
  		background: shade($white, 20%) !important;
  		border-radius: 50% 50% 30% 30%;
  	}
  	.mouth {
  		animation: ghost 5s ease-in-out infinite;
  		left: 42%;
  		right: 42%;
  		bottom: 40%;
  		border-radius: 50% 50% 40% 40%;
  	}
  	.tooth {
  		display: none;
  	}
  }
  
  .mod-hungry {
  	.mouth {
  		animation: hungry 1s ease-in-out infinite;
  	}
  }
  
  .mod-hyper {
  	.face {
  		animation: hyper 5s ease-in-out infinite;
  	}
  
  	.mouth {
  		top: 45%;
  		left: 20%;
  		right: 20%;
  		bottom: 25%;
  	}
  
  	.tooth {
  		bottom: 70%;
  	}
  }
  
  .mod-jack-o-lantern {
  	.creature, .tooth {
  		background: shade(darkorange, 50%) !important;
  	}
  	.mouth, .eye, .moustache path {
  		animation: jackolantern 4s ease-in-out infinite;
  		background: shade(gold, 25%);
  		fill: shade(gold, 25%);
  	}
  	.eye {
  		clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  		border-radius: 0;
  	}
  	.moustache {
  		top: 40%;
  		left: 28%;
  		width: 44%;
  		height: 10%;
  	}
  	.mouth {
  		clip-path: polygon(0 0, 100% 0, 100% 50%, 70% 100%, 30% 100%, 0 50%);
  		border-radius: 0;
  	}
  }
  
  .mod-moustache {
  	.mouth {
  		top: 54%;
  		bottom: 32%;
  	}
  }
  
  .mod-nervous {
  	.mouth {
  		border-radius: 50% 50% 20% 20%;
  		left: 35%;
  		right: 35%;
  		bottom: 40%;
  	}
  }
  
  .mod-sad {
  	.mouth {
  		border-radius: 50% 50% 20% 20%;
  		left: 35%;
  		right: 35%;
  		bottom: 40%;
  	}
  }
  
  .mod-sleepy {
  	.face {
  		transform: rotate(45deg);
  	}
  	.eyes {
  		transform: scaleY(.5);
  	}
  	.mouth {
  		animation: ghost 5s ease-in-out infinite;
  		left: 42%;
  		right: 42%;
  		bottom: 40%;
  		border-radius: 50%;
  	}
  	.tooth {
  		display: none;
  	}
  
  	&:hover {
  		.eyes {
  			transform: scale(1);
  		}
  	}
  }
  
  .mod-square {
  	.mouth, .eye {
  		border-radius: 5px;
  	}
  	.creature {
  		border-radius: 10%;
  		width: 95%;
  		padding-bottom: 95%;
  		margin-top: 5%;
  	}
  }
  
  .mod-tall {
  	.creature {
  		width: 82%;
  	}
  }
  
  .mod-tiny {
  	.creature {
  		width: 82%;
  		padding-bottom: 82%;
  		margin-top: 18%;
  	}
  }
  
  .mod-transparent {
  	.creature {
  		background: url(img/mod-transparent.png);
  	}
  }
  
  .mod-nervous {
  	.mouth {
  		animation: nervous $transition*6 ease-in-out infinite;
  	}
  }
  
  .mod-upside-down {
  	.face {
  		transform: rotate(180deg);
  	}
  
  	&:hover .face {
  		transform: rotate(180deg) translateY(-5%) scale(.95);
  		transition: transform $transition*.25;
  	}
  }
  
  .mod-wink {
  	.eye:nth-child(2) {
  		animation: none;
  	}
  }
  
  
  // Advertisment ======================================================================
  .ad-box {
  	display: inline-flex;
  	justify-content: center;
  	flex-direction: column;
  	padding: 1em;
  
  	a {
  		border: 0;
  	}
  }
  
  .carbon-img {
  	display: block;
  	margin: 0 auto;
  
  	img {
  		border-radius: $radius;
  		width: 100%;
  		height: auto;
  	}
  }
  
  .carbon-text {
  	display: block;
  	font-size: 1.3em;
  	color: $white;
  	margin: .5em 0;
  	transition: color $transition*.5;
  
  	.ad-box:hover & {
  		color: $gold;
  		transition: color $transition*.25;
  	}
  }
  
  .carbon-poweredby {
  	display: block;
  	color: mix($white, $purple_dark);
  }
  
  
  // Footer ============================================================================
  	footer {
  		padding: 0 1em;
  	}
  
  
  // Share =============================================================================
  .share {
  	display: inline-block;
  	font-size: 1em;
  	margin-left: .5em;
  }
  
  
  .share-button {
  		@extend %no-select;
  		@extend %no-drag;
  		display: inline-block;
  		border-radius: $radius;
  		text-decoration: none;
  		box-shadow: $shadow;
  		color: $white;
  		padding: 1rem .7em;
  		background: $blue;
  		border: 0;
  		box-shadow: inset .15em -.15em $shadow;
  		transition:
  			background $transition,
  			color $transition;
  	}
  
  	.share-button {
  		position: relative;
  		cursor: pointer;
  		margin-right: .25em;
  		padding-left: 2em;
  
  		.twitter-logo {
  			top: .525em;
  			left: .5em;
  
  			path {
  				fill: $blue_twitter;
  			}
  		}
  
  		&:hover {
  			color: white;
  			border: 0;
  		}
  	}