.bg
	.inner
		h1 Let the valleys <br> rise to meet Him.
		span -Johann G. Olearius, "Comfort, comfort ye my people"

// https://dribbble.com/shots/2399268-Valleys-Song-Lyric

$size: 480px;
$width: $size * 8/8;
$height: $size * 6/8;
//---------------------------------------------------------------


@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700);

html,body{ height: 100%;}

body {
	font-family: 'Open Sans Condensed', sans-serif;
	background-color: #dBAEf1;
}

.inner {
	position: absolute;
	top: 50%; left: 50%;
	width: 100%;
	transform: translate(-50%,-50%);	
	text-align: center;
	text-transform: uppercase;
	line-height: 1.2;
}

h1 {
	color: #fff;
	font-weight: bold;
	font-size: $size*0.067;
	text-shadow: -1px -1px 1px rgba(0,0,0,0.25);
	margin-bottom: 1vw;
}

span {
	color: rgba(0,0,0,0.75);
	font-size: $size*0.022;
	display: block;
}

.bg {
	width: $width;
	height: $height;
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	background-color: #9758A3;
	box-shadow: 10px 10px 12px rgba(0,0,0,0.7);
	background-image: 
		// background
		radial-gradient(circle at 50% 100%, #351648 6%, transparent 6%),
		radial-gradient(circle at 50% 100%, #AB87BE 7%, transparent 7%),
		radial-gradient(circle at 50% 100%, #A57BB7 7%, transparent 7%),
		radial-gradient(circle at 50% 100%, #A070B1 7%, transparent 7%),
		radial-gradient(circle at 50% 100%, #9B64AA 12.5%, transparent 12.5%),
		radial-gradient(circle at 50% 100%, #995FA7 12.5%, transparent 12.5%),
	;
	background-size:
		6% 100%, 6% 100%, 6% 100%, 6% 100%, 10% 100%, 12.5% 100%;
	background-position:
		0 $height*1, 0 $height*0.975, 0 $height*0.95, 0 $height*0.92, 0 $height*0.865, 0 $height*0.795;

	
	&:before,
	&:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	// mountain
	&:before {
		// 9            9
		//8 7 5 6  6 5 7 8
		//1 2 3 4  4 3 2 1
		
		background-image:
		// 1
		linear-gradient(60deg, #5A2D80 $width/2*0.2, transparent $width/2*0.2),
		linear-gradient(-60deg, #5A2D80 $width/2*0.2, transparent $width/2*0.2),
		
		// 4 left
		linear-gradient(60deg, #5A2D80 $width/2*0.0875, transparent $width/2*0.0875),
		linear-gradient(-60deg, #5A2D80 $width/2*0.0875, transparent $width/2*0.0875),
		// 4 right
		linear-gradient(60deg, #5A2D80 $width/2*0.0875, transparent $width/2*0.0875),
		linear-gradient(-60deg, #5A2D80 $width/2*0.0875, transparent $width/2*0.0875),
		
		// 2 left
		linear-gradient(60deg, #774198 $width/2*0.0875, transparent $width/2*0.0875),
		linear-gradient(-60deg, #774198 $width/2*0.0875, transparent $width/2*0.0875),
		// 2 right
		linear-gradient(60deg, #774198 $width/2*0.0875, transparent $width/2*0.0875),
		linear-gradient(-60deg, #774198 $width/2*0.0875, transparent $width/2*0.0875),
		
		// 3 left
		linear-gradient(60deg, #5A2D80 $width/2*0.125, transparent $width/2*0.125),
		linear-gradient(-60deg, #5A2D80 $width/2*0.125, transparent $width/2*0.125),
		// 3 right
		linear-gradient(60deg, #5A2D80 $width/2*0.125, transparent $width/2*0.125),
		linear-gradient(-60deg, #5A2D80 $width/2*0.125, transparent $width/2*0.125),
		
		// 5 left
		linear-gradient(60deg, #351648 $width/2*0.2, transparent $width/2*0.2),
		linear-gradient(-60deg, #351648 $width/2*0.2, transparent $width/2*0.2),
		// 5 right
		linear-gradient(60deg, #351648 $width/2*0.2, transparent $width/2*0.2),
		linear-gradient(-60deg, #351648 $width/2*0.2, transparent $width/2*0.2),
		
		// 6 left
		linear-gradient(60deg, #774198 $width/2*0.195, transparent $width/2*0.195),
		linear-gradient(-60deg, #774198 $width/2*0.195, transparent $width/2*0.195),
		// 6 right
		linear-gradient(60deg, #774198 $width/2*0.195, transparent $width/2*0.195),
		linear-gradient(-60deg, #774198 $width/2*0.195, transparent $width/2*0.195),
		
		// 7 left
		linear-gradient(75deg, #774198 $width/2*0.175, transparent $width/2*0.175),
		linear-gradient(-75deg, #774198 $width/2*0.175, transparent $width/2*0.175),
		// 7 right
		linear-gradient(75deg, #774198 $width/2*0.175, transparent $width/2*0.175),
		linear-gradient(-75deg, #774198 $width/2*0.175, transparent $width/2*0.175),
		
		// 8 left
		linear-gradient(75deg, #432A6F $width/2*0.25, transparent $width/2*0.25),
		linear-gradient(-75deg, #432A6F $width/2*0.25, transparent $width/2*0.25),
		
		// 9 left
		linear-gradient(75deg, #351648 $width/2*0.2, transparent $width/2*0.2),
		linear-gradient(-75deg, #351648 $width/2*0.2, transparent $width/2*0.2),
		// 9 right
		linear-gradient(75deg, #351648 $width/2*0.2, transparent $width/2*0.2),
		linear-gradient(-75deg, #351648 $width/2*0.2, transparent $width/2*0.2),
	;
	
		background-position:
			// 1
			0 0, 0 0,
			// 4
			$width*0.3875 0, $width*0.3875 0,
			$width*0.6125 0, $width*0.6125 0,
			// 2
			$width*0.18125 0, $width*0.18125 0,
			$width*0.81875 0, $width*0.81875 0,
			// 3
			$width*0.775 0, $width*0.775 0,
			$width*0.225 0, $width*0.225 0,
			// 5
			$width*0.225 0, $width*0.225 0,
			$width*0.775 0, $width*0.775 0,
			// 6
			$width*0.688 0, $width*0.688 0,
			$width*0.312 0, $width*0.312 0,
			// 7
			$width*0.15 0, $width*0.15 0,
			$width*0.85 0, $width*0.85 0,
			// 8
			0 0, 0 0,
			// 9
			$width*0.075 0, $width*0.075 0,
			$width*0.925 0, $width*0.925 0,
		;
	}
	
	&:after {
		background-image: 
			
			// cloud-left
			radial-gradient(circle at 50% 100%, #351648 $width/2*0.0375, transparent $width/2*0.0375),
			radial-gradient(circle at 50% 100%, #351648 $width/2*0.05, transparent $width/2*0.05),
			radial-gradient(circle at 50% 100%, #351648 $width/2*0.06875, transparent $width/2*0.06875),
			
			// cloud-left-small
			radial-gradient(circle at 50% 100%, #351648 $width/2*0.04375, transparent $width/2*0.04375),
			radial-gradient(circle at 50% 100%, #351648 $width/2*0.0375, transparent $width/2*0.0375),
			radial-gradient(circle at 50% 100%, #351648 $width/2*0.03125, transparent $width/2*0.03125),
			
			// cloud-right-front
			radial-gradient(circle at 50% 100%, #351648 $width/2*0.1, transparent $width/2*0.1),
			radial-gradient(circle at 50% 100%, #351648 $width/2*0.08125, transparent $width/2*0.08125),
			radial-gradient(circle at 50% 100%, #351648 $width/2*0.065, transparent $width/2*0.065),
			
			// moon
			radial-gradient(circle at 50% 100%, #E6AB6F $width/2*0.09375, transparent $width/2*0.09375),
			radial-gradient(circle at 50% 0%, #E6AB6F $width/2*0.09375, transparent $width/2*0.09375),
			
			// cloud-right-back
			radial-gradient(circle at 50% 100%, #351648 $width/2*0.04375, transparent $width/2*0.04375),
			radial-gradient(circle at 50% 100%, #351648 $width/2*0.05625, transparent $width/2*0.05625),
			radial-gradient(circle at 50% 100%, #351648 $width/2*0.06875, transparent $width/2*0.06875),
		;
			
		background-position:
			// cloud-left
			$width*0.5825 $height*0.355, $width*0.615 $height*0.355, $width*0.6475 $height*0.355,
			// cloud-left-small
			$width*0.71 $height*0.2725, $width*0.7325 $height*0.2725, $width*0.7525 $height*0.2725,
			// cloud-right-front
			$width*0.535/2 $height*0.25, $width*0.65/2 $height*0.25, $width*0.75/2 $height*0.25,
			// moon
			$width*0.53/2 $height*0.175, $width*0.53/2 $height*0.175,
			// cloud-right-back
			$width*0.305/2 $height*0.2175, $width*0.38/2 $height*0.2175, $width*0.455/2 $height*0.2175,
		;
	}
}