<!DOCTYPE html>
<html>
<head>
<title>The Moon</title>
<meta name="viewport" content="initial-scale=1.0">
<style>
body {
background-color: black;
text-align: center;
}
#image {
max-width: min(90%, 834px);
height: auto;
max-height: 90%;
margin: auto;
}
</style>
</head>
<body>
<main>
<img id="image" src="the-satellite.jpeg">
</main>
<script>
const moon_image = new Image();
moon_image.src = "the-moon.jpeg";
function show_the_moon() {
let image = document.getElementById("image");
image.src = moon_image.src;
}
document.addEventListener("visibilitychange", show_the_moon);
document.body.addEventListener("mouseleave", show_the_moon);
setTimeout(show_the_moon, 60000);
</script>
</body>
</html>