<html>
<head>
<title>
Error 404 
</title>
<style>
body {
  background-color: #242424;
  font-family: 'Roboto', sans-serif; 
  color: #00468c; }
h1 {
  text-align: center; }
.background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1; }
.mini {
  font-size: 1em;
  color: #00468c;
  line-height: 9em;
  text-indent: 2.5em;
  position: absolute;
  left: 50%;
  top: 50%; }
.mega, .bola {
  line-height: 1.65em;
  font-weight: bold;
  font-size: 11em;
  color: #00468c;
  font-family: 'Roboto', sans-serif;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: -150px;
  margin-top: -150px; }
.boom {
  color: #242424; }
</style>

<body>
<canvas class="background"></canvas>
<p class="mega">4<span class="boom">0</span>4<div class="bola">
</div></p>
<p class="mini">Ares-Software Ltd.</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js"></script>
<script src="https://npmcdn.com/particlesjs@2.2.2/dist/particles.min.js"></script>
<script>
var $container = $('.bola');
var renderer = new THREE.WebGLRenderer({antialias: true});
var camera = new THREE.PerspectiveCamera(80,1,0.1,10000);
var scene = new THREE.Scene();

scene.add(camera);
renderer.setSize(300,300);
$container.append(renderer.domElement);

///////////////////////////////////////////////

// Camera
camera.position.z = 200;

// Material
var myMat = new THREE.MeshPhongMaterial({
  color      :  new THREE.Color("rgb(0,128,255)"),
  emissive   :  new THREE.Color("rgb(0,0,0)"),
  specular   :  new THREE.Color("rgb(255,155,255)"),
  shininess  :  100,
  shading    :  THREE.FlatShading,
  transparent: 1,
  opacity    : 1
});

var L1 = new THREE.PointLight( 0xffffff, 1);
L1.position.z = 100;
L1.position.y = 100;
L1.position.x = 100;
scene.add(L1);

var L2 = new THREE.PointLight( 0xffffff, 0.8);
L2.position.z = 200;
L2.position.y = 400;
L2.position.x = -100;
scene.add(L2);

// IcoSphere -> THREE.IcosahedronGeometry(80, 1) 1-4
var Ico = new THREE.Mesh(new THREE.IcosahedronGeometry(75,1), myMat);
Ico.rotation.z = 0.5;
scene.add(Ico);

function update(){
   Ico.rotation.x+=2/100;
   Ico.rotation.y+=2/100;
}

// Render
function render() {
  requestAnimationFrame(render);			
  renderer.render(scene, camera);	
  update();
}

render();
</script>
<script>
  window.onload = function() {
    Particles.init({
      selector: '.background',
      color: ['#00468c', '#404B69', '#DBEDF3'],
      maxParticles: 130,
      connectParticles: true,
      responsive: [
        {
          breakpoint: 768,
          options: {
            maxParticles: 80
          }
        }, {
          breakpoint: 375,
          options: {
            maxParticles: 50
          }
        }
      ]
    });
  };
</script>
</body>

</html>