/* style-000.css */

/*

	Colours

	Material Design
	Amber 200	#ffe082
	Amber 500	#ffc107
	Amber 800	#ff8f00
	Blue 500	#2196f3

*/

/* Keyframes */

@keyframes shrinkingHeart {
	from {
		background-position: 1400px;
	}
	to {
		background-position: 0;
	}
}

/* Generic */

* { color: #222; }

/* Elements */

h1 { text-align: center; }

/* Objects */

.site-header  { background-color: #ffc107; }
.site-content { background-color: #ffe082; }
.site-footer  { background-color: #2196f3; }

/* Components */

.animation-inner,
.note {
	max-width: 30rem;
	background-color: #ffc107;
	margin: 0 auto;
}

/* hint: base styles for button before JS is loaded */
.animation-like {
	display: block;
	margin: 0 auto;
}

/* hint: progressively enhanced styles when JS loads */
.js-animation-like {
	background-color: transparent;
}

.js-animation-like path#heart {
	fill: #00ff00;
}

/* hint: toggling styles when the heart is clicked.
This drives the colour change and sparkle animation */

.is-liked {
	position: relative;
}
.is-liked .heart {
	fill: #ff0000;
}

.is-liked::after {
	display: block;
	position: absolute;
	content: ' ';
	/*
		hint: top and left compensate for space character
		and padding: 0.5rem 2rem on button
	*/
	top: 0.5rem;
	left: 2.2rem;
	width: 200px;
	height: 200px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="200"><g transform="translate(0,-852.36218)"><path transform="translate(0,852.36218)" class="h" d="M 100,40 C 120,-20 200,0 200,60 200,124.77294 175.63443,141.19061 100,200 20,140 0,123.24555 0,60 0,0 80,-20 100,40 z" /><path class="h" d="m 300,899.7885 c 17.6,-52.8 88,-35.2 88,17.6 0,57.00018 -21.4417,71.44773 -88,123.2 -70.4,-52.8 -88,-67.54392 -88,-123.2 0,-52.8 70.4,-70.4 88,-17.6 z" /><path class="h" d="m 500,908.13111 c 14.90388,-44.71164 74.51941,-29.80776 74.51941,14.90388 0,48.26842 -18.15708,60.50277 -74.51941,104.32721 -59.61553,-44.71168 -74.51941,-57.19699 -74.51941,-104.32721 0,-44.71164 59.61553,-59.61552 74.51941,-14.90388 z" /><path class="h" d="m 700,915.70021 c 12.45775,-37.37324 62.28873,-24.91549 62.28873,12.45774 0,40.34625 -15.177,50.5726 -62.28873,87.20425 -49.83098,-37.37326 -62.28873,-47.8094 -62.28873,-87.20425 0,-37.37323 49.83098,-49.83098 62.28873,-12.45774 z" /><path class="h" d="m 900,923.90006 c 9.80776,-29.42329 49.03882,-19.61553 49.03882,9.80777 0,31.76389 -11.94859,39.81492 -49.03882,68.65437 -39.23106,-29.42331 -49.03882,-37.6395 -49.03882,-68.65437 0,-29.4233 39.23106,-39.23106 49.03882,-9.80777 z" /><path class="h" d="m 1100,931.46916 c 7.3616,-22.08488 36.8081,-14.72326 36.8081,7.36163 0,23.84171 -8.9685,29.88475 -36.8081,51.53141 -29.4465,-22.0849 -36.8081,-28.2519 -36.8081,-51.53141 0,-22.08489 29.4465,-29.44651 36.8081,-7.36163 z" /><path class="h" d="m 1300,939.66902 c 4.7116,-14.13494 23.5582,-9.4233 23.5582,4.71164 0,15.25936 -5.7401,19.12708 -23.5582,32.98154 -18.8466,-14.13495 -23.5582,-18.082 -23.5582,-32.98154 0,-14.13494 18.8466,-18.84658 23.5582,-4.71164 z" /><path class="h" d="m 1500,947.23811 c 2.2655,-6.79653 11.3276,-4.53102 11.3276,2.26551 0,7.33719 -2.7601,9.19691 -11.3276,15.85858 -9.062,-6.79654 -11.3276,-8.6944 -11.3276,-15.85858 0,-6.79653 9.0621,-9.06204 11.3276,-2.26551 z" /></g></svg>');
	z-index: 10;
	overflow: hidden;
	/*
		hint: animation here
	*/
	animation: shrinkingHeart 0.2s 1 steps(7);
}

.h {
	fill: #ffffff;
	fill-opacity: 1;
	fill-rule: nonzero;
	stroke: none;
}

.note {
	margin-top: 1rem;
	padding: 1rem;
}

.note ul {
	padding: 1rem;
}

.note li {
	
}

/* Trumps */

/* Animation */