From 873b4e7a3eda6e4f8f5ff052c52f7e14e0a5faaa Mon Sep 17 00:00:00 2001
From: devfzn <dev_fzn@proton.me>
Date: Wed, 2 Aug 2023 16:05:09 -0400
Subject: [PATCH] +: 404

---
 404.html | 179 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 179 insertions(+)
 create mode 100644 404.html
diff --git a/404.html b/404.html
new file mode 100644
index 0000000..33c6cd7
--- /dev/null
+++ b/404.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Page not found</title>
+    <style>
+        @import url("https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@600&family=VT323&display=swap");
+
+        /*
+        font-family: 'M PLUS 1 Code', sans-serif;
+        font-family: 'VT323', monospace;
+        */
+
+        :root {
+          --bck: #2b2f38;
+          --font: rgb(241, 241, 241);
+          --glitch1: hsl(214, 50%, 52%);
+          --glitch2: hsl(9, 50%, 52%);
+          --glitch3: hsl(61, 50%, 52%);
+        }
+        * {
+          margin: 0;
+          padding: 0;
+        }
+        #main {
+          width: 100vw;
+          height: 100vh;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: var(--bck);
+        }
+
+        h1 {
+          color: white;
+          text-align: center;
+          font-size: 10rem;
+          font-family: "VT323", monospace;
+          text-shadow: 6px 4px var(--glitch2), 5px -5px var(--glitch1),
+            2px -4px var(--glitch3);
+          animation: glitch 0.5s infinite;
+        }
+
+        #txt::after {
+          content: "";
+          position: absolute;
+          height: 0.3rem;
+          width: 100%;
+          background: var(--bck);
+          bottom: 0;
+          left: 0;
+          transform: translateY(10px);
+          animation: line 0.4s infinite;
+          box-shadow: 0px 0px 2px 2px var(--bck);
+        }
+        #txt::before {
+          content: "";
+          position: absolute;
+          height: 0.3rem;
+          width: 100%;
+          background: var(--bck);
+          bottom: 0;
+          left: 0;
+          animation: lineTwo 0.9s infinite;
+          box-shadow: 0px 0px 4px 3px var(--bck);
+        }
+        #txt {
+          position: relative;
+          transform: translateX(5px, 3px);
+          animation: move 0.8s infinite;
+        }
+
+        @keyframes glitch {
+          0% {
+            text-shadow: 6px 4px var(--glitch2), 5px -5px var(--glitch1),
+              2px -4px var(--glitch3);
+          }
+          1% {
+            text-shadow: -2px 0px var(--glitch2), -5px 5px var(--glitch1),
+              2px 4px var(--glitch3);
+          }
+          19% {
+            text-shadow: -2px 0px var(--glitch2), -5px 5px var(--glitch1),
+              2px 4px var(--glitch3);
+          }
+          20% {
+            text-shadow: -4px 4px var(--glitch2), 3px 3px var(--glitch1),
+              -2px 4px var(--glitch3);
+          }
+          39% {
+            text-shadow: -4px 4px var(--glitch2), 3px 3px var(--glitch1),
+              -2px 4px var(--glitch3);
+          }
+          40% {
+            text-shadow: 1px -1px var(--glitch2), -1px 5px var(--glitch1),
+              6px -3px var(--glitch3);
+          }
+          59% {
+            text-shadow: 1px -1px var(--glitch2), -1px 5px var(--glitch1),
+              6px -3px var(--glitch3);
+          }
+          60% {
+            text-shadow: -5px -4px var(--glitch2), -4px 4px var(--glitch1),
+              -3px 3px var(--glitch3);
+          }
+          79% {
+            text-shadow: -5px -4px var(--glitch2), -4px 4px var(--glitch1),
+              -3px 3px var(--glitch3);
+          }
+          80% {
+            text-shadow: -4px 4px var(--glitch2), 3px 3px var(--glitch1),
+              -2px 4px var(--glitch3);
+          }
+          99% {
+            text-shadow: -4px 4px var(--glitch2), 3px 3px var(--glitch1),
+              -2px 4px var(--glitch3);
+          }
+        }
+
+        @keyframes line {
+          0% {
+            transform: translateY(10px);
+          }
+          50% {
+            transform: translateY(-110px);
+          }
+        }
+
+        @keyframes lineTwo {
+          0% {
+            transform: translateY(10px);
+          }
+          48% {
+            transform: translateY(-110px);
+          }
+          50% {
+            transform: translateY(50px);
+          }
+          100% {
+            transform: translateY(-110px);
+          }
+        }
+
+        @keyframes move {
+          0% {
+            transform: translate(5px, 3px);
+          }
+          25% {
+            transform: translate(-4px, 1px);
+          }
+          50% {
+            transform: translate(3px, -4px);
+          }
+          75% {
+            transform: translate(-3px, 4px);
+          }
+          99% {
+            transform: translate(5px, 3px);
+          }
+        }
+
+        @media screen and (max-width: 720px) {
+          /* Noch größer, noch mehr Regeln */
+          h1 {
+            font-size: 5rem;
+          }
+        }
+    </style>
+    </head>
+    <body>
+        <div id="main">
+          <div id="txt">
+            <h1>404</h1>
+            <h1>not found!</h1>
+          </div>
+        </div>
+    </body>
+</html>
