404.html

<style>
*{
    transition: all 0.6s;
}

html {
    height: 100%;
}

body{
    font-family: 'Lato', sans-serif;
    color: #888;
    margin: 0;
}

#main{
    display: table;
    width: 100%;
    height: 100vh;
    text-align: center;
}

.fof{
	  display: table-cell;
	  vertical-align: middle;
}

.fof h1{
	  font-size: 50px;
	  display: inline-block;
	  padding-right: 12px;
	  animation: type .5s alternate infinite;
}

@keyframes type{
	  from{box-shadow: inset -3px 0px 0px #888;}
      to{box-shadow: inset -3px 0px 0px transparent;}
}


</style>

<meta charset="utf-8">
<title>ElijahRus | 404</title>
<meta name="description" content="Are you lost? Go home at elijahrus.xyz, think this page is ment to be there? contact me on the connect page"/>
<meta name="theme-color" content="#ffc800" />
<meta name="msapplication-TileColor" content="#ffc800" />
<meta name="description" content="Are you lost? Go home at elijahrus.xyz, think this page is ment to be there? contact me on the connect page">
<meta name="keywords" content="ElijahRus, ElijahRus, ElijahRus.xyz, Elijah T, Elijah, 404, lost">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="img/staticpfp.png"/>


<div id="main">
    <div class="fof">
    <h1>Error 404</h>
    <h2>Page not found</h2>

    <a href="https://elijahrus.xyz" button type="button" class="btn btn-primary btn-lg">Go Home</button>

    </div> 


   <div>
    
        <a href="https://elijahrus.xyz/jkdnjbhkjlkbhjvbejhlkbkhvdshlkebhvbclkdvhbknbhvdwkvb" button type="button-small-ee" class="btn">👻</button>
    
        </div> 
        <style>
            #snowflakeContainer {
              position: absolute;
              left: 0px;
              top: 0px;
              display: none;
            }
          
            .snowflake {
              position: fixed;
              background-color: #CCC;
              user-select: none;
              z-index: 1000;
              pointer-events: none;
              border-radius: 50%;
              width: 10px;
              height: 10px;
            }
          </style>
          
          <div id="snowflakeContainer">
            <span class="snowflake"></span>
          </div>
          
          <script>
            // Array to store our Snowflake objects
            var snowflakes = [];
          
            // Global variables to store our browser's window size
            var browserWidth;
            var browserHeight;
          
            // Specify the number of snowflakes you want visible
            var numberOfSnowflakes = 50;
          
            // Flag to reset the position of the snowflakes
            var resetPosition = false;
          
            // Handle accessibility
            var enableAnimations = false;
            var reduceMotionQuery = matchMedia("(prefers-reduced-motion)");
          
            // Handle animation accessibility preferences 
            function setAccessibilityState() {
              if (reduceMotionQuery.matches) {
                enableAnimations = false;
              } else { 
                enableAnimations = true;
              }
            }
            setAccessibilityState();
          
            reduceMotionQuery.addListener(setAccessibilityState);
          
            //
            // It all starts here...
            //
            function setup() {
              if (enableAnimations) {
                window.addEventListener("DOMContentLoaded", generateSnowflakes, false);
                window.addEventListener("resize", setResetFlag, false);
              }
            }
            setup();
          
            //
            // Constructor for our Snowflake object
            //
            function Snowflake(element, speed, xPos, yPos) {
              // set initial snowflake properties
              this.element = element;
              this.speed = speed;
              this.xPos = xPos;
              this.yPos = yPos;
              this.scale = 1;
          
              // declare variables used for snowflake's motion
              this.counter = 0;
              this.sign = Math.random() < 0.5 ? 1 : -1;
          
              // setting an initial opacity and size for our snowflake
              this.element.style.opacity = (.1 + Math.random()) / 3;
            }
          
            //
            // The function responsible for actually moving our snowflake
            //
            Snowflake.prototype.update = function () {
              // using some trigonometry to determine our x and y position
              this.counter += this.speed / 5000;
              this.xPos += this.sign * this.speed * Math.cos(this.counter) / 40;
              this.yPos += Math.sin(this.counter) / 40 + this.speed / 30;
              this.scale = .5 + Math.abs(10 * Math.cos(this.counter) / 20);
          
              // setting our snowflake's position
              setTransform(Math.round(this.xPos), Math.round(this.yPos), this.scale, this.element);
          
              // if snowflake goes below the browser window, move it back to the top
              if (this.yPos > browserHeight) {
                this.yPos = -50;
              }
            }
          
            //
            // A performant way to set your snowflake's position and size
            //
            function setTransform(xPos, yPos, scale, el) {
              el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0) scale(${scale}, ${scale})`;
            }
          
            //
            // The function responsible for creating the snowflake
            //
            function generateSnowflakes() {
          
              // get our snowflake element from the DOM and store it
              var originalSnowflake = document.querySelector(".snowflake");
          
              // access our snowflake element's parent container
              var snowflakeContainer = originalSnowflake.parentNode;
              snowflakeContainer.style.display = "block";
          
              // get our browser's size
              browserWidth = document.documentElement.clientWidth;
              browserHeight = document.documentElement.clientHeight;
          
              // create each individual snowflake
              for (var i = 0; i < numberOfSnowflakes; i++) {
          
                // clone our original snowflake and add it to snowflakeContainer
                var snowflakeClone = originalSnowflake.cloneNode(true);
                snowflakeContainer.appendChild(snowflakeClone);
          
                // set our snowflake's initial position and related properties
                var initialXPos = getPosition(50, browserWidth);
                var initialYPos = getPosition(50, browserHeight);
                var speed = 5 + Math.random() * 40;
          
                // create our Snowflake object
                var snowflakeObject = new Snowflake(snowflakeClone,
                  speed,
                  initialXPos,
                  initialYPos);
                snowflakes.push(snowflakeObject);
              }
          
              // remove the original snowflake because we no longer need it visible
              snowflakeContainer.removeChild(originalSnowflake);
          
              moveSnowflakes();
            }
          
            //
            // Responsible for moving each snowflake by calling its update function
            //
            function moveSnowflakes() {
          
              if (enableAnimations) {
                for (var i = 0; i < snowflakes.length; i++) {
                  var snowflake = snowflakes[i];
                  snowflake.update();
                }      
              }
          
              // Reset the position of all the snowflakes to a new value
              if (resetPosition) {
                browserWidth = document.documentElement.clientWidth;
                browserHeight = document.documentElement.clientHeight;
          
                for (var i = 0; i < snowflakes.length; i++) {
                  var snowflake = snowflakes[i];
          
                  snowflake.xPos = getPosition(50, browserWidth);
                  snowflake.yPos = getPosition(50, browserHeight);
                }
          
                resetPosition = false;
              }
          
              requestAnimationFrame(moveSnowflakes);
            }
          
            //
            // This function returns a number between (maximum - offset) and (maximum + offset)
            //
            function getPosition(offset, size) {
              return Math.round(-1 * offset + Math.random() * (size + 2 * offset));
            }
          
            //
            // Trigger a reset of all the snowflakes' positions
            //
            function setResetFlag(e) {
              resetPosition = true;
            }
          </script>

    
</div>