const enlargeImg = document.querySelectorAll(".enlarge");
const body = document.querySelector("body");
const main = document.querySelector("main");
const nav = document.querySelector("nav");
const header = document.querySelector("header");

enlargeImg.forEach((img) => {
	img.style.cursor = "pointer";

	img.addEventListener("click", () => {
		let div = document.createElement("div");
		div.style.height = "100vh";
		div.style.width = "auto";
		div.style.backgroundColor = "#000000";

		main.style.display = "none";
		nav.style.display = "none";

		// i do not know why i have to do footer this way
		// if i declare it at the top as a const it is null
		// will figure out later
		document.querySelector("footer").style.display = "none";
		header.style.display = "none";

		body.style.display = "block";
		body.append(div);

		div.addEventListener("click", () => {
			div.remove();
			body.style.display = "grid";
			main.style.display = "block";
			nav.style.display = "block";
			header.style.display = "flex";
			document.querySelector("footer").style.display = "flex";
		});
	});
});