<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>

<link rel="stylesheet" href="style.css">


<style>
    body {
        /* background: linear-gradient(181deg, #ec3d41, #ef2e33); */
        background: white;
        font-family: 'Roboto', sans-serif;
        overflow: hidden;
        height: 100vh;
    }

    .mini {
        font-size: 1em;
        color: #ec3d41;
        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: #ec3d41;
        font-family: 'Roboto', sans-serif;
        width: 300px;
        height: 300px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -150px;
        margin-top: -150px;
    }

    .boom {
        color: #f5f5f5;
    }

    .bth {
        color: white;
        text-decoration: none;
        font-size: 14px;
        width: 100%;
        height: 100%;
        text-align: center;
        justify-content: center;
        align-items: center;
        display: flex;
        padding-top: 120px;
        z-index: 99;
        position: relative;

    }

    .bth a {
        text-decoration: none;
    font-size: 22px;
    font-weight: 100;
    color: #ec3d41;
    }
</style>

<section class="wawe-sec text-center" style="height: 100%;">
    <div class="pd-middele"></div>
    <img src="assets/img/partc.png">
</section>


<div class="og-abt-ball-1 og-ball" data-aos="fade-left" data-aos-duration="1500" data-aos-delay="600" id="imgPf1"></div>
<div class="og-abt-ball-2 og-ball" data-aos="fade-left" data-aos-duration="1500" data-aos-delay="700" id="imgPf2"></div>
<div class="og-abt-ball-3 og-ball" data-aos="fade-left" data-aos-duration="1500" data-aos-delay="800" id="imgPf3"></div>
<div class="og-abt-ball-4 og-ball" data-aos="fade-right" data-aos-duration="1500" data-aos-delay="900" id="imgPf4"></div>
<div class="og-abt-ball-5 sing-ball-5 og-ball" data-aos="fade-right" data-aos-duration="1500" data-aos-delay="1000" id="imgPf5"></div>
<div class="og-abt-ball-6 og-ball" data-aos="fade-left" data-aos-duration="1500" data-aos-delay="1100" id="imgPf6"></div>
<div class="og-abt-ball-7 og-ball" data-aos="fade-right" data-aos-duration="1500" data-aos-delay="1200" id="imgPf7"></div>
<div class="og-abt-ball-8 sing-bl-8  og-ball" data-aos="fade-right" data-aos-duration="1500" data-aos-delay="1300" id="imgPf8"></div>
<div class="og-abt-ball-9 og-ball" data-aos="fade-right" data-aos-duration="1500" data-aos-delay="1400" id="imgPf9"></div>

<p class="mega">4<span class="boom">0</span>4
<div class="bola">
</div>
</p>







<div class="bth">
    <!-- <div>
        <p class="pnf">Page not found.</p>
    </div> -->
    <br>
    <div>
        <a href="index.php">Back to Home</a>
    </div>
</div>


<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 pinkMat = new THREE.MeshPhongMaterial({
        color: new THREE.Color("rgb(226,35,213)"),
        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), pinkMat);
    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>
    let image1 = document.getElementById("imgPf1");
    let image2 = document.getElementById("imgPf2");
    let image3 = document.getElementById("imgPf3");
    let image4 = document.getElementById("imgPf4");
    let image5 = document.getElementById("imgPf5");
    let image6 = document.getElementById("imgPf6");
    let image7 = document.getElementById("imgPf7");
    let image8 = document.getElementById("imgPf8");
    let image9 = document.getElementById("imgPf9");




    window.addEventListener('mousemove', function(e) {

        let valueX = e.clientX;
        let valueY = e.clientY;


        image1.style.marginTop = valueY * 0.007 + 'px';
        image1.style.marginRight = valueX * 0.007 + 'px';

        image2.style.marginTop = valueY * 0.009 + 'px';
        image2.style.marginRight = valueX * 0.009 + 'px';

        image3.style.marginTop = valueY * 0.004 + 'px';
        image3.style.marginRight = valueX * 0.004 + 'px';

        image4.style.marginTop = valueY * 0.006 + 'px';
        image4.style.marginRight = valueX * 0.006 + 'px';

        image5.style.marginTop = valueY * 0.009 + 'px';
        image5.style.marginRight = valueX * 0.009 + 'px';

        image6.style.marginTop = valueY * 0.005 + 'px';
        image6.style.marginRight = valueX * 0.005 + 'px';

        image7.style.marginTop = valueY * 0.004 + 'px';
        image7.style.marginRight = valueX * 0.004 + 'px';

        image8.style.marginTop = valueY * 0.009 + 'px';
        image8.style.marginRight = valueX * 0.009 + 'px';

        image9.style.marginTop = valueY * 0.005 + 'px';
        image9.style.marginRight = valueX * 0.005 + 'px';
    })
</script>