const left = document.querySelector(".left");
const right = document.querySelector(".right");
const container = document.querySelector(".container");
var buttons = document.querySelectorAll(".button")
var close = document.querySelectorAll(".close")
console.log(close)

for(var i = 0; i < buttons.length; i++){
  if(i == 0){
    buttons[0].addEventListener("click", () =>{
      document.querySelector("#bg-modal-signup").style.display = "flex";
    });

  }else{
    buttons[1].addEventListener("click", () =>{
      document.querySelector("#bg-modal-login").style.display = "flex";
    });

  }
}

left.addEventListener("mouseenter", () => {
  container.classList.add("hover-left");
});

left.addEventListener("mouseleave", () => {
  container.classList.remove("hover-left");
});

right.addEventListener("mouseenter", () => {
  container.classList.add("hover-right");
});

right.addEventListener("mouseleave", () => {
  container.classList.remove("hover-right");
});


for(var i = 0; i < close.length; i++){
  if(i == 0){
    close[0].addEventListener("click", () =>{
      console.log("HIII")
      document.querySelector("#bg-modal-login").style.display = "none";
    });

  }else{
    close[1].addEventListener("click", () =>{
      document.querySelector("#bg-modal-signup").style.display = "none";
    });

  }
}