<section>
	<h3>Dark</h3>
	<p>The highlight of 2018 for me was seeing an <a href='https://www.worldwildlife.org/species/amur-leopard'>Amur leopard</a> from up close for the very first time.</p>
	<img src='https://assets.codepen.io/2017/17_05_a_amur_leopard_32.jpg' alt='fluffy Amur leopard'/>
</section>

<section>
	<h3>Light</h3>
	<p>The highlight of 2018 for me was seeing an <a href='https://www.worldwildlife.org/species/amur-leopard'>Amur leopard</a> from up close for the very first time.</p>
	<img src='https://assets.codepen.io/2017/17_05_a_amur_leopard_32.jpg' alt='fluffy Amur leopard'/>
</section>

* { margin: 0 }

body { display: flex }

section {
	padding: .5em;
	background: #222;
	color: #ddd;
	font: italic clamp(1em, 5vw, 2.5em)/ 1.375 marck script, cursive;
	
	&:nth-child(2) {
		&, & img { filter: invert(1) } /* CSS invert() */
		
		a { color: invert(purple) } /* Sass invert() */
	}
}

section a {
	display: inline-block;
	position: relative;
	padding: 0 .25em;
	color: gold;
	text-decoration: none;
	isolation: isolate;
	
	&::after {
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		transform-origin: 0 100%;
		transform: scaley(.05);
		background: currentcolor;
		mix-blend-mode: difference;
		transition: transform .25s;
		pointer-events: none;
		content: ''
	}
	
	&:focus { outline: none }
	&:hover, &:focus { &::after { transform: none } }
}

img {
	display: block; 
	margin-top: .25em;
	max-width: 100%
}

/*
NO JS here

Used in my Taming Blend Modes: `difference` and `exclusion` (https://css-tricks.com/taming-blend-modes-difference-and-exclusion/) article on CSS-Tricks - check it out for context!
*/