var start2=document.getElementById("welcome");
var maincloth = document.querySelectorAll(".mainimg")[0];

var windowXMaxWidth=window.innerWidth;

function burger(){ 
   /*  maincloth.style.transition="3s"
    maincloth.style.transform="scale(100)";
    maincloth.style.zIndex="99";
 */
    document.getElementById("menubar").style.opacity="100";
   document.getElementById("menubar").style.transition="2s"
   document.getElementById("menubar").style.zIndex="9999999"
    document.getElementById("menubar").style.transform="scale(1)"
    document.getElementById("menubar").style.zIndex="9999"
   setTimeout(function(){document.getElementById("menubar").style.transition="2s"},2000)
}
function profile(){
alert("This page is under Maintenance");
}
function cart(){
    alert("This page is under Maintenance");
    }

function exit(){
   
    document.getElementById("menubar").style.transition="2s"
    document.getElementById("menubar").style.transform="scale(100)"
     document.getElementById("menubar").style.zIndex="-1"
     document.getElementById("menubar").style.opacity="0";
}

function getstart(){
    document.getElementById("video").pause();
    start2.style.transition="1s"
    start2.style.opacity="0";
    start2.style.zIndex='-1';
    maincloth.style.transitionDelay="0.8s";
    if(windowXMaxWidth<600){
        maincloth.style.top="28vh";
    document.getElementById("mainoliv").style.top="28vh";
    document.getElementById("mainmaroon").style.top="28vh";
    }
    else{
        maincloth.style.top="35%";
    document.getElementById("mainoliv").style.top="35%";
    document.getElementById("mainmaroon").style.top="35%";
    }
    document.getElementById("backcloth").style.transitionDelay="1s"
    document.getElementById("backcloth2").style.transitionDelay="1s"
    document.getElementById("backcloth").style.top="0px";
    document.getElementById("backcloth2").style.top="0px";
    document.getElementById("light2").style.transitionDelay="1s";
    document.getElementById("light2").style.opacity="100";
    
    document.getElementById("parent").style.filter="brightness(0.8)"
    document.getElementById("light1").style.transitionDelay="1.5s";
    document.getElementById("light1").style.opacity="100";
    document.getElementById("parent").style.transitionDelay="1.5s";
    document.getElementById("parent").style.transition="2s";
    document.getElementById("parent").style.filter="brightness(1.3)";
    maincloth.style.transitionDelay="0.8s";
    maincloth.style.filter="brightness(1)";
    document.getElementById("parent").style.transitionDelay="2s";
    document.getElementById("frontcontent").style.transitionDelay="5s";
    document.getElementById("frontcontent").style.opacity="100";
    document.getElementById("buybox").style.transitionDelay="6s";
    document.getElementById("buybox").style.opacity="1";
    setTimeout(function(){document.getElementById("colorbox").style.opacity="1"},6500);
    document.getElementById("colorbox").style.transition="2s";
    
}

var currentXPosition=0;

var windowYMaxHeight=window.innerHeight;
var currentYPosition=0;
const mouseMove = (event) => { 
//console.log(`x value = ${event.clientX} & y value = ${event.clientY}`);
currentXPosition = (event.clientX / windowXMaxWidth)+0.8;
currentYPosition = (event.clientY / windowYMaxHeight)+0.8;
if(event.clientX>598){
    currentXPosition =2.5-currentXPosition;
}
if(currentXPosition<=0.6){
    currentXPosition=0.6;
}

if(windowXMaxWidth>=700){
    maincloth.style.transition="0.5s";
maincloth.style.transitionDelay="0s";
maincloth.style.filter = "brightness(" + currentXPosition + ") drop-shadow(" + (currentXPosition*20) + "px " + (-currentYPosition*5) + "px " +"10px rgb(0, 0, 0,0.3))";
}

//document.getElementById("brightball").style.left=event.clientX + "px";
//document.getElementById("brightball").style.top=event.clientY + "px";
}

window.addEventListener('mousemove', mouseMove);
function clear(){
    document.getElementById("backcloth").style.animation="";
    document.getElementById("backcloth2").style.animation="";
}
function light(){
    
    document.getElementById("light2").style.opacity="100";
    document.getElementById("light1").style.opacity="100";
}
function backcloths(element){
    document.getElementById("backcloth").src=element;
    document.getElementById("backcloth2").src=element;
}

function animations(){
    maincloth.style.transition="3s";
    document.getElementById("mainoliv").style.transition="2s";
    document.getElementById("backcloth").style.animation="backcloth 4s ease-in-out";
    document.getElementById("backcloth").style.animationIterationCount="1";
    document.getElementById("backcloth2").style.animation="backcloth 4s ease-in-out";
    document.getElementById("backcloth2").style.animationIterationCount="1";
    document.getElementById("light1").style.transition="0.5s"
    document.getElementById("light2").style.transitionDelay="0.5s"
    document.getElementById("light2").style.transition="0.5s"
    document.getElementById("light2").style.transitionDelay="1s"
    document.getElementById("light2").style.opacity="0";
    document.getElementById("light1").style.opacity="0";
    


    
   
}
var check=0;
function maroon(){
   if(check!=2){
    animations();
    maincloth.style.left="-100%";
    document.getElementById("mainoliv").style.left="-100%"; 
    maincloth = document.querySelectorAll(".mainimg")[2];
    maincloth.style.filter="brightness(1.2)";
    document.getElementById("mainmaroon").style.left="50%";
    setTimeout( function(){backcloths("mainmaroon.png")},3000);
    setTimeout(clear, 5000);
    setTimeout(light , 3000);
    check=2;
   }
}

function oliv(){
    if(check!=1){
    animations();    
    maincloth.style.left="-100%";
    maincloth = document.querySelectorAll(".mainimg")[1];
    maincloth.style.filter="brightness(1.2)";
    document.getElementById("mainoliv").style.left="50%";
    setTimeout( function(){backcloths("mainoliv.png")},3000);
    setTimeout(clear, 5000);
    setTimeout(light , 3000);
    check=1;
    }
}
function black(){
    if(check!=0){
        animations();
    maincloth = document.querySelectorAll(".mainimg")[0];
    maincloth.style.left="50%";
    document.getElementById("mainoliv").style.left="-100%"; 
    document.getElementById("mainmaroon").style.left="-100%"; 
    setTimeout( function(){backcloths("blured.png")},3000);
    setTimeout(clear, 5000);
    setTimeout(light , 3000);
    check=0;
    }


    //menu bar
    
}<?xml version="1.0"?>
<oembed><version>1.0</version><provider_name>Verzekeren in Duitsland</provider_name><provider_url>https://verzekeren-duitsland.com</provider_url><author_name>Verzekeren in Duitsland</author_name><author_url>https://verzekeren-duitsland.com</author_url><title>Blog-Beitrag Titel - Verzekeren in Duitsland</title><type>rich</type><width>600</width><height>338</height><html>&lt;blockquote class="wp-embedded-content" data-secret="ADkfaVN1Nu"&gt;&lt;a href="https://verzekeren-duitsland.com/blog-beitrag-titel/"&gt;Blog-Beitrag Titel&lt;/a&gt;&lt;/blockquote&gt;&lt;iframe sandbox="allow-scripts" security="restricted" src="https://verzekeren-duitsland.com/blog-beitrag-titel/embed/#?secret=ADkfaVN1Nu" width="600" height="338" title="&#x201E;Blog-Beitrag Titel&#x201C; &#x2014; Verzekeren in Duitsland" data-secret="ADkfaVN1Nu" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"&gt;&lt;/iframe&gt;&lt;script type="text/javascript"&gt;
/* &lt;![CDATA[ */
/*! This file is auto-generated */
!function(d,l){"use strict";l.querySelector&amp;&amp;d.addEventListener&amp;&amp;"undefined"!=typeof URL&amp;&amp;(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&amp;&amp;!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i&lt;o.length;i++)o[i].style.display="none";for(i=0;i&lt;a.length;i++)s=a[i],e.source===s.contentWindow&amp;&amp;(s.removeAttribute("style"),"height"===t.message?(1e3&lt;(r=parseInt(t.value,10))?r=1e3:~~r&lt;200&amp;&amp;(r=200),s.height=r):"link"===t.message&amp;&amp;(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&amp;&amp;n.host===r.host&amp;&amp;l.activeElement===s&amp;&amp;(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r&lt;s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document);
/* ]]&gt; */
&lt;/script&gt;
</html><description>Was geh&#xF6;rt in einen Blog-Beitrag? N&#xFC;tzliche branchenbezogene Inhalte, die dem Leser einen Mehrwert bieten, aber auch Ihre Branchenkenntnisse unter Beweis stellen. Nutzen Sie die Blogposts Ihres Unternehmens, um sich &#xFC;ber aktuelle Branchenthemen zu &#xE4;u&#xDF;ern, Ihrem Unternehmen eine menschliche Komponente zu geben und zu zeigen, wie Ihre Produkte und Dienstleistungen Menschen helfen.</description></oembed>