/* Color Palette */

$softPink: #F9D8D4;
$yellow: #F9A734;
$DarkYellow: #FB8B24;
$green: #36964C;
$DarkGreen: #286E38;


/* Background styles */

body { 
	background:
	/* Pineapple details */
	radial-gradient(circle closest-side at 50px 50px, $DarkYellow 3px, transparent 0),
	radial-gradient(circle closest-side at 40px 60px, $DarkYellow 3px, transparent 0),
	radial-gradient(circle closest-side at 60px 60px, $DarkYellow 3px, transparent 0),
	radial-gradient(circle closest-side at 50px 70px, $DarkYellow 3px, transparent 0),
	
	radial-gradient(circle closest-side at 150px 165px, $DarkYellow 3px, transparent 0),
	radial-gradient(circle closest-side at 140px 175px, $DarkYellow 3px, transparent 0),
	radial-gradient(circle closest-side at 160px 175px, $DarkYellow 3px, transparent 0),
	radial-gradient(circle closest-side at 150px 185px, $DarkYellow 3px, transparent 0),
	
	/* Pineapple base */
	radial-gradient(ellipse closest-side at 50px 60px, $yellow 18px, transparent 0),
	
	radial-gradient(ellipse closest-side at 150px 175px, $yellow 18px, transparent 0),
	
	/* Pineapple leafs */
	radial-gradient(circle closest-side at 30px 40px, $softPink 15px, transparent 0),
	radial-gradient(circle closest-side at 40px 35px, $green 15px, transparent 0),
	radial-gradient(circle closest-side at 70px 40px, $softPink 15px, transparent 0),
	radial-gradient(circle closest-side at 60px 35px, $DarkGreen 15px, transparent 0),
	
	radial-gradient(circle closest-side at 130px 155px, $softPink 15px, transparent 0),
	radial-gradient(circle closest-side at 140px 150px, $green 15px, transparent 0),
	radial-gradient(circle at 170px 155px, $softPink 15px, transparent 0),
	radial-gradient(circle at 160px 150px, $DarkGreen 15px, transparent 0)
	;
	background-color: $softPink;
	background-size: 180px 210px;
	animation: animatedBackground .5s cubic-bezier(.61,-0.64,.58,1.46) forwards;
}


/* Animation */

@keyframes animatedBackground {
	from { background-position: 0 50%; }
	to { background-position: 0 0; }
}