<div class="m-intro">
	<div class="e-text">
		<span class="subtitle">Hello Little World</span>
		<h1>Hello World</h1>
		<p class="preamble">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni cum similique incidunt expedita vel dolore quae adipisci at ea laborum?
		</p>
	</div>
	<div id="particleCanvas-Orange" class="e-particles-orange"></div>
	<div id="particleCanvas-Blue" class="e-particles-blue"></div>
</div>

@mixin animation($animate...) {
    $max: length($animate);
    $animations: '';

    @for $i from 1 through $max {
        $animations: #{$animations + nth($animate, $i)};

        @if $i < $max {
            $animations: #{$animations + ", "};
        }
    }
    -webkit-animation: $animations;
    -moz-animation:    $animations;
    -o-animation:      $animations;
    animation:         $animations;
}

@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName} {
        @content;
    }
    @-o-keyframes #{$animationName} {
        @content;
    }
    @keyframes #{$animationName} {
        @content;
    }
}

@include keyframes(rotate) {
  0%   { transform:rotate(0)}
  100% {  transform:rotate(360deg)}
}

body{
	width:100vw;
	height:100vh;
	margin:0;
	padding:0;
	background-color:#151D24;
	background-image:url('https://image.ibb.co/dQMeKk/background.jpg');
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	color:#fff;
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
}

.m-intro{
	text-align:center;
	display: flex;
  align-items: center;
  justify-content: center;
	height: 100%;
	margin:0 auto;
	min-width:785px;
	overflow:hidden;
	position:relative;
	
	&:before, &:after{
		display:block;
		content:" ";
		width:2560px;
		height:2560px;
		position:absolute;
		margin-top:-1280px;
		margin-left:-1280px;
		transform-origin:center;
		background-position:center;
		background-repeat:no-repeat;
		z-index:50;
		top:50%;
		left:50%;
	}
	
	&:before{
		background-image:url('https://image.ibb.co/dwBeKk/circle_inner.png');
		background-size:100% auto;
		@include animation('rotate 30s infinite linear');
	}
	
	&:after{
		background-image:url('https://image.ibb.co/gTN8C5/circle_outer.png');
		background-size:100% auto;
				@include animation('rotate 80s infinite linear');

	}
	
	.e-text{
		width:785px;
		position:relative;
		z-index:100;
		
		h1{
			color:#EA5847;
			margin:0;
			text-transform:uppercase;
			font-size:108px;
			line-height:180px;
			border-top:1px solid #fff;
			border-bottom:1px solid #fff;
			margin:30px 0;
			position:relative;
			
			@supports(-webkit-background-clip: text){
				background: radial-gradient(ellipse at center, rgba(237,103,68,1) 0%, rgba(236,84,63,1) 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
    	}

		}

		.subtitle{
			font-weight:600;
			text-transform:uppercase;
		}

		.preamble{
			max-width:80%;
			display:block;
			margin:0 auto;
		}
	}
}

.e-particles-orange{
	position:absolute;
	border-radius:50%;
	top:50%;
	left:50%;
	z-index:5;
	width:1000px;
	height:600px;
	opacity:0.4;
	transform:translate(-50%, -50%);
}

.e-particles-blue{
	position:absolute;
	top:0%;
	left:0%;
	z-index:5;
	width:100%;
	height:100%;
	opacity:0.1;
}

//PARTICLES ORANGE//
particlesJS("particleCanvas-Orange", 
{
  "particles": {
    "number": {
      "value": 120,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ec543f"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 3
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": true,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 20,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 10,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 0.5,
      "direction": "none",
      "random": true,
      "straight": false,
      "out_mode": "bounce",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 394.57382081613633,
        "rotateY": 157.82952832645452
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab"
      },
      "onclick": {
        "enable": false,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 200,
        "line_linked": {
          "opacity": 0.2
        }
      },
      "bubble": {
        "distance": 1500,
        "size": 40,
        "duration": 7.272727272727273,
        "opacity": 0.3676323676323676,
        "speed": 3
      },
      "repulse": {
        "distance": 50,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
});


//PARTICLES BLUE//
particlesJS("particleCanvas-Blue", 
{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 3
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 0.2,
        "opacity_min": 0,
        "sync": false
      }
    },
    "size": {
      "value": 15,
      "random": true,
      "anim": {
        "enable": true,
        "speed": 10,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 0.5,
      "direction": "none",
      "random": true,
      "straight": false,
      "out_mode": "bounce",
      "bounce": false,
      "attract": {
        "enable": true,
        "rotateX": 3945.7382081613637,
        "rotateY": 157.82952832645452
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false,
        "mode": "grab"
      },
      "onclick": {
        "enable": false,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 200,
        "line_linked": {
          "opacity": 0.2
        }
      },
      "bubble": {
        "distance": 1500,
        "size": 40,
        "duration": 7.272727272727273,
        "opacity": 0.3676323676323676,
        "speed": 3
      },
      "repulse": {
        "distance": 50,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
});