Cole Sample Code - CSS

HTML

<div id="humans">
	<div class="cole">
		<main></main>
		<div></div>
	</div>
</div>

CSS

/* Human container */
#humans {
	font-family: 'Homo Sapiens', Arial, sans-serif;
	box-shadow: 12px 2px 16px 1px rgb(0 0 0 / 0.3);
	animation: walk 10s;

	/* Average male height, medium build, and imperfect posture */
	.cole {
		block-size: 177cm;
		padding: 1cm;
		font-style: italic;

		/* Hazel eyes and light skin tone */
		main {
			color: #514a3a;
			background-color: #efdec4;
		}

		/* Mouth */
		> div {
			inline-size: 5cm;
			block-size: 1cm;
			color: #ccc8c5;
			background-color: #9f7879;

			/* Smile */
			&:active {
				border-radius: 0 0 8px 8px;
			}
		}
	}
}

/* Walk forward */
@keyframes walk {
	from {
		translate: 0;
	}

	to {
		translate: 100px;
	}
}