.credit
	h1 Parallax.js design
	p 
		a(href="https://michaelrappaz.com/" target="_blank") Made by Michael
.container#container
	.circle
		svg.frontMountain.layer(viewBox="0 0 1024.000000 411.000000"  data-depth="0.7")
			g(transform="translate(0.000000,411.000000) scale(0.100000,-0.100000)" fill="#F67280" stroke="none")
				path(d="M4505 3510 l-600 -600 -247 247 -248 248 -713 -711 c-391 -391 -1160 -1157 -1707 -1702 l-995 -992 5125 1 5125 0 -1710 1704 -1710 1704 -250 -250 -251 -249 -603 597 c-332 329 -606 599 -610 601 -3 1 -276 -268 -606 -598z")
		svg.middleMountain.layer(viewBox="0 0 830.000000 203.000000" data-depth="0.4")
			g(transform="translate(0.000000,203.000000) scale(0.100000,-0.100000)" fill="#C06C84" stroke="none")
				path(d="M2885 1459 c-307 -313 -563 -568 -567 -567 -5 2 -249 240 -542 531 -294 290 -537 527 -541 527 -6 0 -307 -303 -1072 -1080 l-163 -165 0 -353 0 -353 323 6 c177 3 1278 10 2447 15 2458 11 5514 31 5518 35 7 6 -1939 1927 -1948 1923 -4 -2 -202 -201 -441 -443 -239 -242 -437 -440 -441 -440 -4 0 -208 198 -454 439 l-446 440 -261 -263 -261 -262 -291 291 c-160 159 -293 290 -295 289 -3 -1 -257 -257 -565 -570z")
		svg.backMountain.layer(viewBox="0 0 830.000000 203.000000" data-depth="0.2")
			g(transform="translate(0.000000,203.000000) scale(0.100000,-0.100000)" fill="#6C5B7B" stroke="none")
				path(d="M2885 1459 c-307 -313 -563 -568 -567 -567 -5 2 -249 240 -542 531 -294 290 -537 527 -541 527 -6 0 -307 -303 -1072 -1080 l-163 -165 0 -353 0 -353 323 6 c177 3 1278 10 2447 15 2458 11 5514 31 5518 35 7 6 -1939 1927 -1948 1923 -4 -2 -202 -201 -441 -443 -239 -242 -437 -440 -441 -440 -4 0 -208 198 -454 439 l-446 440 -261 -263 -261 -262 -291 291 c-160 159 -293 290 -295 289 -3 -1 -257 -257 -565 -570z")
		.star1
		.star2
		.star3
		.star4
		.cloud.layer(data-depth="1")
		.cloud.layer.cloud2(data-depth=".3")
		.cloud.layer.cloud3(data-depth=".6")

//Font import
@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,700');
//Var
$font: Ubuntu, sans-serif;
$font-settings: 10px;
$caps: uppercase;
$bgcolor: black;
$fontcolor: white;
//Background color
body {
	background: $bgcolor;
}
//Extender
.font {
	color: $fontcolor;
	font-family: $font;
	letter-spacing: $font-settings;
	text-transform: $caps;
}
//Title
h1 {
	@extend .font;
	font-weight: 300;
	text-align: center;
}
//Link to website
.credit {
	position: relative;
	top: 30px;
	p {
		@extend .font;
		font-size: 10px;
		margin-top: 3px;
		font-weight: 800;
		text-align: center;
	}
	a {
		transition: all 200ms ease-in-out;
	}
	a:link, a:visited, a:hover, a:active {
		text-decoration: none;
		color: $fontcolor;
	}
	a:hover {
		color: #FF69B4;
	}
}
//Reset
* {
	padding: 0;
	margin: 0;
}
//End of template

.circle {
	background: #001848;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	position: relative;
	left: 50%;
	top: 50vh;
	transform: translatex(-50%) translatey(-50%) scale(1.2,1.2);
	overflow: hidden;
}
.frontMountain {
	top: 130px!important;
	z-index: 50;
}
.middleMountain {
	top: 95px!important;
	left: -100px!important;
	z-index: 40;
	height: 90px;
}
.backMountain {
	height: 100px;
	z-index: 30;
	top: 45px!important;
	left: -200px!important;
}
.star1, .star2, .star3, .star4 {
	background: white;
	height: 4px;
	width: 4px;
	border-radius: 50%;
	position: absolute;
	box-shadow: 0px 0px 44px 3px rgba(255,255,255,1);
	top: 20px;
	left: 50px;
	animation: opa 1000ms ease-in-out infinite;
}
.star2 {
	left: 160px;
	top: 60px;
	animation-delay: 200ms;
}
.star3 {
	top: 25px;
	left: 120px;
	animation-delay: 450ms;
}
.star4 {
	top: 50px;
	left: 80px;
	animation-delay: 356ms;
}
@keyframes opa {
	0% {opacity: 1;}
	50% {opacity: 0.5;}
	100% {opacity: 1;}
}
.cloud {
	background: white;
	width: 30px!important;
	height: 10px!important;
	z-index: 60!important;
	position: absolute!important;
	border-radius: 50px!important;
	left: 40px!important;
	top: 130px!important;
	&:after {
		content:"";
		background: white;
		height: 10px!important;
		width: 20px!important;
		position: absolute!important;
		border-radius: 50px!important;
		top: 10px!important;
	}
	&:before {
		content:"";
		background: white;
		height: 10px!important;
		width: 20px!important;
		position: absolute!important;
		border-radius: 50px!important;
		top: 5px!important;
		left: -15px!important;
	}
}
.cloud2 {
	left: 60px!important;
	top: 50px!important;
	z-index: 10!important;
}
.cloud3 {
	left: 140px!important;
	top: 100px!important;
	z-index: 30!important;
	
}

const parent = document.getElementById('container');
const parallax = new Parallax(parent, {
  invertX: true,
  invertY: true,
  limitX:10,
  limitY:5,  
});