404.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="404.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <title>Adam Shea Error 404r</title>
</head>

<body>
    <main>
        <h1 class=smile id=face>:(</h1>
        <div class=text>
            <h1>There seems to have been an error!</h1>
            <p>We are very sorrry about this. Please try again by following the link below.</p>
            <div onmouseenter="changeFace()" onmouseleave="returnFace()" onmousedown="smileOn()" class=button>
                <h1><a href="https://adam-shea.github.io">Take me back!</a>
                </h1>
            </div>
        </div>
    </main>

    <script>
        var faces = [":)", ":/", ";)", "( ͡° ͜ʖ ͡°)", ":p", ":()", "0.o", "0.0", "XD", "(╯°□°）╯︵ ┻━┻", "( ͡° ͜ʖ ͡°)", "¯\_(ツ)_/¯", "(ᵔᴥᵔ)", "ʕ•ᴥ•ʔ", "O_O", "o‑o", "O_o", "o_O", "o_o", "O - O ", " (」゜ロ゜)」", "(꒪Д꒪)ノ", "(꒪Д꒪)ノ", "╰[ ⁰﹏⁰ ]╯", "(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧", "▐  ⊙ ▃ ⊙ ▐", "(∩╹□╹∩)", "乁| ･ 〰 ･ |ㄏ"]
        var face = document.getElementById("face");

        function changeFace() {
            fadeOut()
            var randomFace = Math.floor(Math.random() * faces.length);
            face.innerHTML = faces[randomFace];
            fadeIn()
        }

        function returnFace() {
            fadeOut()
            face.innerHTML = ":(";
            fadeIn()
        }

        function smileOn() {
            fadeOut()
            face.innerHTML = ":)";
            fadeIn()
        }

        function fadeOut() {
            face.classList.remove("fadeOut");
            void face.offsetWidth; // trigger a DOM reflow            
            face.classList.add("fadeOut");
        }

        function fadeIn() {
            face.classList.remove("fadeIn");
            void face.offsetWidth; // trigger a DOM reflow
            face.classList.add("fadeIn");
        }
    </script>
</body>

</html>