diff --git a/error/400.html b/error/400.html
new file mode 100644
index 0000000..7805e0c
--- /dev/null
+++ b/error/400.html
@@ -0,0 +1,432 @@
+<head>
+<style>
+body,
+html {
+    padding: 0;
+    margin: 0;
+    font-family: 'Quicksand', sans-serif;
+    font-weight: 400;
+    overflow: hidden;
+}
+
+.writing {
+    width: 320px;
+    height: 200px;
+    background-color: #3f3f3f;
+    border: 1px solid #bbbbbb;
+    border-radius: 6px 6px 4px 4px;
+    position: relative;
+}
+
+.writing .topbar{
+    position: absolute;
+    width: 100%;
+    height: 12px;
+    background-color: #f1f1f1;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+}
+
+.writing .topbar div{
+    height: 6px;
+    width: 6px;
+    border-radius: 50%;
+    margin: 3px;
+    float: left;
+}
+
+.writing .topbar div.green{
+    background-color: #60d060;
+}
+.writing .topbar div.red{
+    background-color: red;
+}
+.writing .topbar div.yellow{
+    background-color: #e6c015;
+}
+
+.writing .code {
+    padding: 15px;
+}
+
+.writing .code ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.writing .code ul li {
+    background-color: #9e9e9e;
+    width: 0;
+    height: 7px;
+    border-radius: 6px;
+    margin: 10px 0;
+}
+
+.container {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    height: 100vh;
+    width: 100%;
+    -webkit-transition: -webkit-transform .5s;
+    transition: -webkit-transform .5s;
+    transition: transform .5s;
+    transition: transform .5s, -webkit-transform .5s;
+}
+
+.stack-container {
+    position: relative;
+    width: 420px;
+    height: 210px;
+    -webkit-transition: width 1s, height 1s;
+    transition: width 1s, height 1s;
+}
+
+.pokeup {
+    -webkit-transition: all .3s ease;
+    transition: all .3s ease;
+}
+
+.pokeup:hover {
+    -webkit-transform: translateY(-10px);
+            transform: translateY(-10px);
+    -webkit-transition: .3s ease;
+    transition: .3s ease;
+}
+
+
+.error {
+    width: 400px;
+    padding: 40px;
+    text-align: center;
+}
+
+.error h1 {
+    font-size: 125px;
+    padding: 0;
+    margin: 0;
+    font-weight: 700;
+}
+
+.error h2 {
+    margin: -30px 0 0 0;
+    padding: 0px;
+    font-size: 47px;
+    letter-spacing: 12px;
+}
+
+.perspec {
+    -webkit-perspective: 1000px;
+            perspective: 1000px;
+}
+
+.writeLine{
+    -webkit-animation: writeLine .4s linear forwards;
+            animation: writeLine .4s linear forwards;
+}
+
+.explode{
+    -webkit-animation: explode .5s ease-in-out forwards;
+            animation: explode .5s ease-in-out forwards;
+}
+
+.card {
+    -webkit-animation: tiltcard .5s ease-in-out 1s forwards;
+            animation: tiltcard .5s ease-in-out 1s forwards;
+    position: absolute;
+}
+
+@-webkit-keyframes tiltcard {
+    0% {
+        -webkit-transform: rotateY(0deg);
+                transform: rotateY(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotateY(-30deg);
+                transform: rotateY(-30deg);
+    }
+}
+
+@keyframes tiltcard {
+    0% {
+        -webkit-transform: rotateY(0deg);
+                transform: rotateY(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotateY(-30deg);
+                transform: rotateY(-30deg);
+    }
+}
+
+@-webkit-keyframes explode {
+    0% {
+        -webkit-transform: translate(0, 0) scale(1);
+                transform: translate(0, 0) scale(1);
+    }
+
+    100% {
+        -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+                transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+    }
+}
+
+@keyframes explode {
+    0% {
+        -webkit-transform: translate(0, 0) scale(1);
+                transform: translate(0, 0) scale(1);
+    }
+
+    100% {
+        -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+                transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+    }
+}
+
+@-webkit-keyframes writeLine {
+    0% {
+        width:0;
+    }
+
+    100% {
+        width: var(--linelength);
+    }
+}
+
+@keyframes writeLine {
+    0% {
+        width:0;
+    }
+
+    100% {
+        width: var(--linelength);
+    }
+}
+
+@media screen and (max-width: 1000px) {
+    .container {
+      -webkit-transform: scale(.85);
+              transform: scale(.85);
+    }
+  }
+
+  @media screen and (max-width: 850px) {
+    .container {
+      -webkit-transform: scale(.75);
+              transform: scale(.75);
+    }
+  }
+
+  @media screen and (max-width: 775px) {
+    .container {
+      -ms-flex-wrap: wrap-reverse;
+          flex-wrap: wrap-reverse;
+      -webkit-box-align: inherit;
+          -ms-flex-align: inherit;
+              align-items: inherit;
+    }
+  }
+
+  @media screen and (max-width: 370px) {
+    .container {
+        -webkit-transform: scale(.6);
+                transform: scale(.6);
+      }
+  }
+</style>
+
+</head>
+<body>
+<div class="container">
+        <div class="error">
+            <h1>400</h1>
+            <h2>error</h2>
+            <p>Ein Fehler ist aufgetreten</p>
+            <p>&nbsp;</p>
+            <a onclick="history.go(0)" style="border: 0px; background-color: rgb(59, 0, 253); border-radius: 5px; padding: 9px; padding-left: 85px; padding-right: 85px; color: white; cursor: pointer;">Neuladen</a><br/><br/>
+            <a onclick="window.location='/'" style="border: 0px; background-color: #bfc0c2; border-radius: 5px; padding: 9px; padding-left: 72px; padding-right: 71px; color: black; cursor: pointer;">Zur Startseite</a>
+        </div>
+        <div class="stack-container">
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 125px; --scaledist: .75; --vertdist: -25px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 100px; --scaledist: .8; --vertdist: -20px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist:75px; --scaledist: .85; --vertdist: -15px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 50px; --scaledist: .9; --vertdist: -10px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 25px; --scaledist: .95; --vertdist: -5px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 0px; --scaledist: 1; --vertdist: 0px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+	<script>
+
+	const stackContainer = document.querySelector('.stack-container');
+const cardNodes = document.querySelectorAll('.card-container');
+const perspecNodes = document.querySelectorAll('.perspec');
+const perspec = document.querySelector('.perspec');
+const card = document.querySelector('.card');
+
+let counter = stackContainer.children.length;
+
+//function to generate random number
+function randomIntFromInterval(min, max) {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+//after tilt animation, fire the explode animation
+card.addEventListener('animationend', function () {
+    perspecNodes.forEach(function (elem, index) {
+        elem.classList.add('explode');
+    });
+});
+
+//after explode animation do a bunch of stuff
+perspec.addEventListener('animationend', function (e) {
+    if (e.animationName === 'explode') {
+        cardNodes.forEach(function (elem, index) {
+
+            //add hover animation class
+            elem.classList.add('pokeup');
+
+            //add event listner to throw card on click
+            elem.addEventListener('click', function () {
+                let updown = [800, -800]
+                let randomY = updown[Math.floor(Math.random() * updown.length)];
+                let randomX = Math.floor(Math.random() * 1000) - 1000;
+                elem.style.transform = `translate(${randomX}px, ${randomY}px) rotate(-540deg)`
+                elem.style.transition = "transform 1s ease, opacity 2s";
+                elem.style.opacity = "0";
+                counter--;
+                if (counter === 0) {
+                    stackContainer.style.width = "0";
+                    stackContainer.style.height = "0";
+                }
+            });
+
+            //generate random number of lines of code between 4 and 10 and add to each card
+            let numLines = randomIntFromInterval(5, 10);
+
+            //loop through the lines and add them to the DOM
+            for (let index = 0; index < numLines; index++) {
+                let lineLength = randomIntFromInterval(25, 97);
+                var node = document.createElement("li");
+                node.classList.add('node-' + index);
+                elem.querySelector('.code ul').appendChild(node).setAttribute('style', '--linelength: ' + lineLength + '%;');
+
+                //draw lines of code 1 by 1
+                if (index == 0) {
+                    elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
+                } else {
+                    elem.querySelector('.code ul .node-' + (index - 1)).addEventListener('animationend', function (e) {
+                        elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
+                    });
+                }
+            }
+        });
+    }
+});
+
+	</script>
+</body>
diff --git a/error/401.html b/error/401.html
new file mode 100644
index 0000000..a05fcd0
--- /dev/null
+++ b/error/401.html
@@ -0,0 +1,432 @@
+<head>
+<style>
+body,
+html {
+    padding: 0;
+    margin: 0;
+    font-family: 'Quicksand', sans-serif;
+    font-weight: 400;
+    overflow: hidden;
+}
+
+.writing {
+    width: 320px;
+    height: 200px;
+    background-color: #3f3f3f;
+    border: 1px solid #bbbbbb;
+    border-radius: 6px 6px 4px 4px;
+    position: relative;
+}
+
+.writing .topbar{
+    position: absolute;
+    width: 100%;
+    height: 12px;
+    background-color: #f1f1f1;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+}
+
+.writing .topbar div{
+    height: 6px;
+    width: 6px;
+    border-radius: 50%;
+    margin: 3px;
+    float: left;
+}
+
+.writing .topbar div.green{
+    background-color: #60d060;
+}
+.writing .topbar div.red{
+    background-color: red;
+}
+.writing .topbar div.yellow{
+    background-color: #e6c015;
+}
+
+.writing .code {
+    padding: 15px;
+}
+
+.writing .code ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.writing .code ul li {
+    background-color: #9e9e9e;
+    width: 0;
+    height: 7px;
+    border-radius: 6px;
+    margin: 10px 0;
+}
+
+.container {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    height: 100vh;
+    width: 100%;
+    -webkit-transition: -webkit-transform .5s;
+    transition: -webkit-transform .5s;
+    transition: transform .5s;
+    transition: transform .5s, -webkit-transform .5s;
+}
+
+.stack-container {
+    position: relative;
+    width: 420px;
+    height: 210px;
+    -webkit-transition: width 1s, height 1s;
+    transition: width 1s, height 1s;
+}
+
+.pokeup {
+    -webkit-transition: all .3s ease;
+    transition: all .3s ease;
+}
+
+.pokeup:hover {
+    -webkit-transform: translateY(-10px);
+            transform: translateY(-10px);
+    -webkit-transition: .3s ease;
+    transition: .3s ease;
+}
+
+
+.error {
+    width: 400px;
+    padding: 40px;
+    text-align: center;
+}
+
+.error h1 {
+    font-size: 125px;
+    padding: 0;
+    margin: 0;
+    font-weight: 700;
+}
+
+.error h2 {
+    margin: -30px 0 0 0;
+    padding: 0px;
+    font-size: 47px;
+    letter-spacing: 12px;
+}
+
+.perspec {
+    -webkit-perspective: 1000px;
+            perspective: 1000px;
+}
+
+.writeLine{
+    -webkit-animation: writeLine .4s linear forwards;
+            animation: writeLine .4s linear forwards;
+}
+
+.explode{
+    -webkit-animation: explode .5s ease-in-out forwards;
+            animation: explode .5s ease-in-out forwards;
+}
+
+.card {
+    -webkit-animation: tiltcard .5s ease-in-out 1s forwards;
+            animation: tiltcard .5s ease-in-out 1s forwards;
+    position: absolute;
+}
+
+@-webkit-keyframes tiltcard {
+    0% {
+        -webkit-transform: rotateY(0deg);
+                transform: rotateY(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotateY(-30deg);
+                transform: rotateY(-30deg);
+    }
+}
+
+@keyframes tiltcard {
+    0% {
+        -webkit-transform: rotateY(0deg);
+                transform: rotateY(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotateY(-30deg);
+                transform: rotateY(-30deg);
+    }
+}
+
+@-webkit-keyframes explode {
+    0% {
+        -webkit-transform: translate(0, 0) scale(1);
+                transform: translate(0, 0) scale(1);
+    }
+
+    100% {
+        -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+                transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+    }
+}
+
+@keyframes explode {
+    0% {
+        -webkit-transform: translate(0, 0) scale(1);
+                transform: translate(0, 0) scale(1);
+    }
+
+    100% {
+        -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+                transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+    }
+}
+
+@-webkit-keyframes writeLine {
+    0% {
+        width:0;
+    }
+
+    100% {
+        width: var(--linelength);
+    }
+}
+
+@keyframes writeLine {
+    0% {
+        width:0;
+    }
+
+    100% {
+        width: var(--linelength);
+    }
+}
+
+@media screen and (max-width: 1000px) {
+    .container {
+      -webkit-transform: scale(.85);
+              transform: scale(.85);
+    }
+  }
+
+  @media screen and (max-width: 850px) {
+    .container {
+      -webkit-transform: scale(.75);
+              transform: scale(.75);
+    }
+  }
+
+  @media screen and (max-width: 775px) {
+    .container {
+      -ms-flex-wrap: wrap-reverse;
+          flex-wrap: wrap-reverse;
+      -webkit-box-align: inherit;
+          -ms-flex-align: inherit;
+              align-items: inherit;
+    }
+  }
+
+  @media screen and (max-width: 370px) {
+    .container {
+        -webkit-transform: scale(.6);
+                transform: scale(.6);
+      }
+  }
+</style>
+
+</head>
+<body>
+<div class="container">
+        <div class="error">
+            <h1>401</h1>
+            <h2>error</h2>
+            <p>Authentifizierungfehler</p>
+            <p>&nbsp;</p>
+            <a onclick="history.go(0)" style="border: 0px; background-color: rgb(59, 0, 253); border-radius: 5px; padding: 9px; padding-left: 85px; padding-right: 85px; color: white; cursor: pointer;">Neuladen</a><br/><br/>
+            <a onclick="window.location='/'" style="border: 0px; background-color: #bfc0c2; border-radius: 5px; padding: 9px; padding-left: 72px; padding-right: 71px; color: black; cursor: pointer;">Zur Startseite</a>
+        </div>
+        <div class="stack-container">
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 125px; --scaledist: .75; --vertdist: -25px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 100px; --scaledist: .8; --vertdist: -20px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist:75px; --scaledist: .85; --vertdist: -15px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 50px; --scaledist: .9; --vertdist: -10px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 25px; --scaledist: .95; --vertdist: -5px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 0px; --scaledist: 1; --vertdist: 0px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+	<script>
+	
+	const stackContainer = document.querySelector('.stack-container');
+const cardNodes = document.querySelectorAll('.card-container');
+const perspecNodes = document.querySelectorAll('.perspec');
+const perspec = document.querySelector('.perspec');
+const card = document.querySelector('.card');
+
+let counter = stackContainer.children.length;
+
+//function to generate random number
+function randomIntFromInterval(min, max) {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+//after tilt animation, fire the explode animation
+card.addEventListener('animationend', function () {
+    perspecNodes.forEach(function (elem, index) {
+        elem.classList.add('explode');
+    });
+});
+
+//after explode animation do a bunch of stuff
+perspec.addEventListener('animationend', function (e) {
+    if (e.animationName === 'explode') {
+        cardNodes.forEach(function (elem, index) {
+
+            //add hover animation class
+            elem.classList.add('pokeup');
+
+            //add event listner to throw card on click
+            elem.addEventListener('click', function () {
+                let updown = [800, -800]
+                let randomY = updown[Math.floor(Math.random() * updown.length)];
+                let randomX = Math.floor(Math.random() * 1000) - 1000;
+                elem.style.transform = `translate(${randomX}px, ${randomY}px) rotate(-540deg)`
+                elem.style.transition = "transform 1s ease, opacity 2s";
+                elem.style.opacity = "0";
+                counter--;
+                if (counter === 0) {
+                    stackContainer.style.width = "0";
+                    stackContainer.style.height = "0";
+                }
+            });
+
+            //generate random number of lines of code between 4 and 10 and add to each card
+            let numLines = randomIntFromInterval(5, 10);
+
+            //loop through the lines and add them to the DOM
+            for (let index = 0; index < numLines; index++) {
+                let lineLength = randomIntFromInterval(25, 97);
+                var node = document.createElement("li");
+                node.classList.add('node-' + index);
+                elem.querySelector('.code ul').appendChild(node).setAttribute('style', '--linelength: ' + lineLength + '%;');
+
+                //draw lines of code 1 by 1
+                if (index == 0) {
+                    elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
+                } else {
+                    elem.querySelector('.code ul .node-' + (index - 1)).addEventListener('animationend', function (e) {
+                        elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
+                    });
+                }
+            }
+        });
+    }
+});
+	
+	</script>
+</body>
diff --git a/error/403.html b/error/403.html
new file mode 100644
index 0000000..3988947
--- /dev/null
+++ b/error/403.html
@@ -0,0 +1,432 @@
+<head>
+<style>
+body,
+html {
+    padding: 0;
+    margin: 0;
+    font-family: 'Quicksand', sans-serif;
+    font-weight: 400;
+    overflow: hidden;
+}
+
+.writing {
+    width: 320px;
+    height: 200px;
+    background-color: #3f3f3f;
+    border: 1px solid #bbbbbb;
+    border-radius: 6px 6px 4px 4px;
+    position: relative;
+}
+
+.writing .topbar{
+    position: absolute;
+    width: 100%;
+    height: 12px;
+    background-color: #f1f1f1;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+}
+
+.writing .topbar div{
+    height: 6px;
+    width: 6px;
+    border-radius: 50%;
+    margin: 3px;
+    float: left;
+}
+
+.writing .topbar div.green{
+    background-color: #60d060;
+}
+.writing .topbar div.red{
+    background-color: red;
+}
+.writing .topbar div.yellow{
+    background-color: #e6c015;
+}
+
+.writing .code {
+    padding: 15px;
+}
+
+.writing .code ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.writing .code ul li {
+    background-color: #9e9e9e;
+    width: 0;
+    height: 7px;
+    border-radius: 6px;
+    margin: 10px 0;
+}
+
+.container {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    height: 100vh;
+    width: 100%;
+    -webkit-transition: -webkit-transform .5s;
+    transition: -webkit-transform .5s;
+    transition: transform .5s;
+    transition: transform .5s, -webkit-transform .5s;
+}
+
+.stack-container {
+    position: relative;
+    width: 420px;
+    height: 210px;
+    -webkit-transition: width 1s, height 1s;
+    transition: width 1s, height 1s;
+}
+
+.pokeup {
+    -webkit-transition: all .3s ease;
+    transition: all .3s ease;
+}
+
+.pokeup:hover {
+    -webkit-transform: translateY(-10px);
+            transform: translateY(-10px);
+    -webkit-transition: .3s ease;
+    transition: .3s ease;
+}
+
+
+.error {
+    width: 400px;
+    padding: 40px;
+    text-align: center;
+}
+
+.error h1 {
+    font-size: 125px;
+    padding: 0;
+    margin: 0;
+    font-weight: 700;
+}
+
+.error h2 {
+    margin: -30px 0 0 0;
+    padding: 0px;
+    font-size: 47px;
+    letter-spacing: 12px;
+}
+
+.perspec {
+    -webkit-perspective: 1000px;
+            perspective: 1000px;
+}
+
+.writeLine{
+    -webkit-animation: writeLine .4s linear forwards;
+            animation: writeLine .4s linear forwards;
+}
+
+.explode{
+    -webkit-animation: explode .5s ease-in-out forwards;
+            animation: explode .5s ease-in-out forwards;
+}
+
+.card {
+    -webkit-animation: tiltcard .5s ease-in-out 1s forwards;
+            animation: tiltcard .5s ease-in-out 1s forwards;
+    position: absolute;
+}
+
+@-webkit-keyframes tiltcard {
+    0% {
+        -webkit-transform: rotateY(0deg);
+                transform: rotateY(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotateY(-30deg);
+                transform: rotateY(-30deg);
+    }
+}
+
+@keyframes tiltcard {
+    0% {
+        -webkit-transform: rotateY(0deg);
+                transform: rotateY(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotateY(-30deg);
+                transform: rotateY(-30deg);
+    }
+}
+
+@-webkit-keyframes explode {
+    0% {
+        -webkit-transform: translate(0, 0) scale(1);
+                transform: translate(0, 0) scale(1);
+    }
+
+    100% {
+        -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+                transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+    }
+}
+
+@keyframes explode {
+    0% {
+        -webkit-transform: translate(0, 0) scale(1);
+                transform: translate(0, 0) scale(1);
+    }
+
+    100% {
+        -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+                transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+    }
+}
+
+@-webkit-keyframes writeLine {
+    0% {
+        width:0;
+    }
+
+    100% {
+        width: var(--linelength);
+    }
+}
+
+@keyframes writeLine {
+    0% {
+        width:0;
+    }
+
+    100% {
+        width: var(--linelength);
+    }
+}
+
+@media screen and (max-width: 1000px) {
+    .container {
+      -webkit-transform: scale(.85);
+              transform: scale(.85);
+    }
+  }
+
+  @media screen and (max-width: 850px) {
+    .container {
+      -webkit-transform: scale(.75);
+              transform: scale(.75);
+    }
+  }
+
+  @media screen and (max-width: 775px) {
+    .container {
+      -ms-flex-wrap: wrap-reverse;
+          flex-wrap: wrap-reverse;
+      -webkit-box-align: inherit;
+          -ms-flex-align: inherit;
+              align-items: inherit;
+    }
+  }
+
+  @media screen and (max-width: 370px) {
+    .container {
+        -webkit-transform: scale(.6);
+                transform: scale(.6);
+      }
+  }
+</style>
+
+</head>
+<body>
+<div class="container">
+        <div class="error">
+            <h1>403</h1>
+            <h2>error</h2>
+            <p>Keine Berechtigung</p>
+            <p>&nbsp;</p>
+            <a onclick="history.go(0)" style="border: 0px; background-color: rgb(59, 0, 253); border-radius: 5px; padding: 9px; padding-left: 85px; padding-right: 85px; color: white; cursor: pointer;">Neuladen</a><br/><br/>
+            <a onclick="window.location='/'" style="border: 0px; background-color: #bfc0c2; border-radius: 5px; padding: 9px; padding-left: 72px; padding-right: 71px; color: black; cursor: pointer;">Zur Startseite</a>
+        </div>
+        <div class="stack-container">
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 125px; --scaledist: .75; --vertdist: -25px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 100px; --scaledist: .8; --vertdist: -20px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist:75px; --scaledist: .85; --vertdist: -15px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 50px; --scaledist: .9; --vertdist: -10px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 25px; --scaledist: .95; --vertdist: -5px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 0px; --scaledist: 1; --vertdist: 0px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+	<script>
+	
+	const stackContainer = document.querySelector('.stack-container');
+const cardNodes = document.querySelectorAll('.card-container');
+const perspecNodes = document.querySelectorAll('.perspec');
+const perspec = document.querySelector('.perspec');
+const card = document.querySelector('.card');
+
+let counter = stackContainer.children.length;
+
+//function to generate random number
+function randomIntFromInterval(min, max) {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+//after tilt animation, fire the explode animation
+card.addEventListener('animationend', function () {
+    perspecNodes.forEach(function (elem, index) {
+        elem.classList.add('explode');
+    });
+});
+
+//after explode animation do a bunch of stuff
+perspec.addEventListener('animationend', function (e) {
+    if (e.animationName === 'explode') {
+        cardNodes.forEach(function (elem, index) {
+
+            //add hover animation class
+            elem.classList.add('pokeup');
+
+            //add event listner to throw card on click
+            elem.addEventListener('click', function () {
+                let updown = [800, -800]
+                let randomY = updown[Math.floor(Math.random() * updown.length)];
+                let randomX = Math.floor(Math.random() * 1000) - 1000;
+                elem.style.transform = `translate(${randomX}px, ${randomY}px) rotate(-540deg)`
+                elem.style.transition = "transform 1s ease, opacity 2s";
+                elem.style.opacity = "0";
+                counter--;
+                if (counter === 0) {
+                    stackContainer.style.width = "0";
+                    stackContainer.style.height = "0";
+                }
+            });
+
+            //generate random number of lines of code between 4 and 10 and add to each card
+            let numLines = randomIntFromInterval(5, 10);
+
+            //loop through the lines and add them to the DOM
+            for (let index = 0; index < numLines; index++) {
+                let lineLength = randomIntFromInterval(25, 97);
+                var node = document.createElement("li");
+                node.classList.add('node-' + index);
+                elem.querySelector('.code ul').appendChild(node).setAttribute('style', '--linelength: ' + lineLength + '%;');
+
+                //draw lines of code 1 by 1
+                if (index == 0) {
+                    elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
+                } else {
+                    elem.querySelector('.code ul .node-' + (index - 1)).addEventListener('animationend', function (e) {
+                        elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
+                    });
+                }
+            }
+        });
+    }
+});
+	
+	</script>
+</body>
diff --git a/error/404.html b/error/404.html
new file mode 100644
index 0000000..da81be6
--- /dev/null
+++ b/error/404.html
@@ -0,0 +1,434 @@
+<head>
+  <title>Seite Nicht Gefunden | MFGames.de</title>
+  <style>
+    body {
+      color: white;
+      /*background-color: #252525;*/
+    }
+
+    html {
+      background-color: #181a1b !important;
+    }
+
+
+    body,
+    html {
+        padding: 0;
+        margin: 0;
+        font-family: 'Quicksand', sans-serif;
+        font-weight: 400;
+        overflow: hidden;
+    }
+
+
+
+    .writing {
+        width: 320px;
+        height: 200px;
+        background-color: rgb(47, 51, 53);
+        border: 1px solid rgb(129, 120, 106);
+        border-radius: 6px 6px 4px 4px;
+        position: relative;
+    }
+
+    .writing .topbar{
+        position: absolute;
+        width: 100%;
+        height: 12px;
+        background-color: #050505;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+    }
+
+    .writing .topbar div{
+        height: 6px;
+        width: 6px;
+        border-radius: 50%;
+        margin: 3px;
+        float: left;
+    }
+
+    .writing .topbar div.green{
+        background-color: #60d060;
+    }
+    .writing .topbar div.red{
+        background-color: red;
+    }
+    .writing .topbar div.yellow{
+        background-color: #e6c015;
+    }
+
+    .writing .code {
+        padding: 15px;
+    }
+
+    .writing .code ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .writing .code ul li {
+        background-color: rgb(79, 85, 89);
+        width: 0;
+        height: 7px;
+        border-radius: 6px;
+        margin: 10px 0;
+    }
+
+    .container {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        -webkit-box-pack: center;
+            -ms-flex-pack: center;
+                justify-content: center;
+        height: 100vh;
+        width: 100%;
+        -webkit-transition: -webkit-transform .5s;
+        transition: -webkit-transform .5s;
+        transition: transform .5s;
+        transition: transform .5s, -webkit-transform .5s;
+    }
+
+    .stack-container {
+        position: relative;
+        width: 420px;
+        height: 210px;
+        -webkit-transition: width 1s, height 1s;
+        transition: width 1s, height 1s;
+    }
+
+    .pokeup {
+        -webkit-transition: all .3s ease;
+        transition: all .3s ease;
+    }
+
+    .pokeup:hover {
+        -webkit-transform: translateY(-10px);
+                transform: translateY(-10px);
+        -webkit-transition: .3s ease;
+        transition: .3s ease;
+    }
+
+
+    .error {
+        width: 400px;
+        padding: 40px;
+        text-align: center;
+    }
+
+    .error h1 {
+        font-size: 125px;
+        padding: 0;
+        margin: 0;
+        font-weight: 700;
+    }
+
+    .error h2 {
+        margin: -30px 0 0 0;
+        padding: 0px;
+        font-size: 47px;
+        letter-spacing: 12px;
+    }
+
+    .perspec {
+        -webkit-perspective: 1000px;
+                perspective: 1000px;
+    }
+
+    .writeLine{
+        -webkit-animation: writeLine .4s linear forwards;
+                animation: writeLine .4s linear forwards;
+    }
+
+    .explode{
+        -webkit-animation: explode .5s ease-in-out forwards;
+                animation: explode .5s ease-in-out forwards;
+    }
+
+    .card {
+        -webkit-animation: tiltcard .5s ease-in-out 1s forwards;
+                animation: tiltcard .5s ease-in-out 1s forwards;
+        position: absolute;
+    }
+
+    @-webkit-keyframes tiltcard {
+        0% {
+            -webkit-transform: rotateY(0deg);
+                    transform: rotateY(0deg);
+        }
+
+        100% {
+            -webkit-transform: rotateY(-30deg);
+                    transform: rotateY(-30deg);
+        }
+    }
+
+    @keyframes tiltcard {
+        0% {
+            -webkit-transform: rotateY(0deg);
+                    transform: rotateY(0deg);
+        }
+
+        100% {
+            -webkit-transform: rotateY(-30deg);
+                    transform: rotateY(-30deg);
+        }
+    }
+
+    @-webkit-keyframes explode {
+        0% {
+            -webkit-transform: translate(0, 0) scale(1);
+                    transform: translate(0, 0) scale(1);
+        }
+
+        100% {
+            -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+                    transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+        }
+    }
+
+    @keyframes explode {
+        0% {
+            -webkit-transform: translate(0, 0) scale(1);
+                    transform: translate(0, 0) scale(1);
+        }
+
+        100% {
+            -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+                    transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+        }
+    }
+
+    @-webkit-keyframes writeLine {
+        0% {
+            width:0;
+        }
+
+        100% {
+            width: var(--linelength);
+        }
+    }
+
+    @keyframes writeLine {
+        0% {
+            width:0;
+        }
+
+        100% {
+            width: var(--linelength);
+        }
+    }
+
+    @media screen and (max-width: 1000px) {
+        .container {
+          -webkit-transform: scale(.85);
+                  transform: scale(.85);
+        }
+      }
+
+      @media screen and (max-width: 850px) {
+        .container {
+          -webkit-transform: scale(.75);
+                  transform: scale(.75);
+        }
+      }
+
+      @media screen and (max-width: 775px) {
+        .container {
+          -ms-flex-wrap: wrap-reverse;
+              flex-wrap: wrap-reverse;
+          -webkit-box-align: inherit;
+              -ms-flex-align: inherit;
+                  align-items: inherit;
+        }
+      }
+
+      @media screen and (max-width: 370px) {
+        .container {
+            -webkit-transform: scale(.6);
+                    transform: scale(.6);
+          }
+      }
+  </style>
+</head>
+<body>
+    <div class="container">
+        <div class="error">
+            <h1>404</h1>
+            <h2>error</h2>
+            <p>Seite wurde nicht gefunden.</p>
+            <p>&nbsp;</p>
+            <a onclick="history.go(0)" style="border: 0px; background-color: #454a4d; border-radius: 5px; padding: 9px; padding-left: 85px; padding-right: 85px; color: white; cursor: pointer; margin-bottom: 10px;">Neuladen</a><br/><br/>
+            <a onclick="window.location='/'" style="border: 0px;background-color: #313537;border-radius: 5px;padding: 9px;padding-left: 72px;padding-right: 71px;color: white;cursor: pointer;">Zur Startseite</a>
+        </div>
+        <div class="stack-container">
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 125px; --scaledist: .75; --vertdist: -25px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 100px; --scaledist: .8; --vertdist: -20px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist:75px; --scaledist: .85; --vertdist: -15px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 50px; --scaledist: .9; --vertdist: -10px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 25px; --scaledist: .95; --vertdist: -5px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 0px; --scaledist: 1; --vertdist: 0px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+	<script>
+	  const stackContainer = document.querySelector('.stack-container');
+    const cardNodes = document.querySelectorAll('.card-container');
+    const perspecNodes = document.querySelectorAll('.perspec');
+    const perspec = document.querySelector('.perspec');
+    const card = document.querySelector('.card');
+
+    let counter = stackContainer.children.length;
+
+    function randomIntFromInterval(min, max) {
+        return Math.floor(Math.random() * (max - min + 1) + min);
+    }
+
+    card.addEventListener('animationend', function () {
+        perspecNodes.forEach(function (elem, index) {
+            elem.classList.add('explode');
+        });
+    });
+
+    perspec.addEventListener('animationend', function (e) {
+        if (e.animationName === 'explode') {
+            cardNodes.forEach(function (elem, index) {
+
+                elem.classList.add('pokeup');
+
+                elem.addEventListener('click', function () {
+                    let updown = [800, -800]
+                    let randomY = updown[Math.floor(Math.random() * updown.length)];
+                    let randomX = Math.floor(Math.random() * 1000) - 1000;
+                    elem.style.transform = `translate(${randomX}px, ${randomY}px) rotate(-540deg)`
+                    elem.style.transition = "transform 1s ease, opacity 2s";
+                    elem.style.opacity = "0";
+                    counter--;
+                    if (counter === 0) {
+                        stackContainer.style.width = "0";
+                        stackContainer.style.height = "0";
+                    }
+                });
+
+                let numLines = randomIntFromInterval(5, 10);
+
+                for (let index = 0; index < numLines; index++) {
+                    let lineLength = randomIntFromInterval(25, 97);
+                    var node = document.createElement("li");
+                    node.classList.add('node-' + index);
+                    elem.querySelector('.code ul').appendChild(node).setAttribute('style', '--linelength: ' + lineLength + '%;');
+
+                    //draw lines of code 1 by 1
+                    if (index == 0) {
+                        elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
+                    } else {
+                        elem.querySelector('.code ul .node-' + (index - 1)).addEventListener('animationend', function (e) {
+                            elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
+                        });
+                    }
+                }
+            });
+        }
+    });
+	</script>
+</body>
diff --git a/error/405.html b/error/405.html
new file mode 100644
index 0000000..ca5df21
--- /dev/null
+++ b/error/405.html
@@ -0,0 +1,432 @@
+<head>
+<style>
+body,
+html {
+    padding: 0;
+    margin: 0;
+    font-family: 'Quicksand', sans-serif;
+    font-weight: 400;
+    overflow: hidden;
+}
+
+.writing {
+    width: 320px;
+    height: 200px;
+    background-color: #3f3f3f;
+    border: 1px solid #bbbbbb;
+    border-radius: 6px 6px 4px 4px;
+    position: relative;
+}
+
+.writing .topbar{
+    position: absolute;
+    width: 100%;
+    height: 12px;
+    background-color: #f1f1f1;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+}
+
+.writing .topbar div{
+    height: 6px;
+    width: 6px;
+    border-radius: 50%;
+    margin: 3px;
+    float: left;
+}
+
+.writing .topbar div.green{
+    background-color: #60d060;
+}
+.writing .topbar div.red{
+    background-color: red;
+}
+.writing .topbar div.yellow{
+    background-color: #e6c015;
+}
+
+.writing .code {
+    padding: 15px;
+}
+
+.writing .code ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.writing .code ul li {
+    background-color: #9e9e9e;
+    width: 0;
+    height: 7px;
+    border-radius: 6px;
+    margin: 10px 0;
+}
+
+.container {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    height: 100vh;
+    width: 100%;
+    -webkit-transition: -webkit-transform .5s;
+    transition: -webkit-transform .5s;
+    transition: transform .5s;
+    transition: transform .5s, -webkit-transform .5s;
+}
+
+.stack-container {
+    position: relative;
+    width: 420px;
+    height: 210px;
+    -webkit-transition: width 1s, height 1s;
+    transition: width 1s, height 1s;
+}
+
+.pokeup {
+    -webkit-transition: all .3s ease;
+    transition: all .3s ease;
+}
+
+.pokeup:hover {
+    -webkit-transform: translateY(-10px);
+            transform: translateY(-10px);
+    -webkit-transition: .3s ease;
+    transition: .3s ease;
+}
+
+
+.error {
+    width: 400px;
+    padding: 40px;
+    text-align: center;
+}
+
+.error h1 {
+    font-size: 125px;
+    padding: 0;
+    margin: 0;
+    font-weight: 700;
+}
+
+.error h2 {
+    margin: -30px 0 0 0;
+    padding: 0px;
+    font-size: 47px;
+    letter-spacing: 12px;
+}
+
+.perspec {
+    -webkit-perspective: 1000px;
+            perspective: 1000px;
+}
+
+.writeLine{
+    -webkit-animation: writeLine .4s linear forwards;
+            animation: writeLine .4s linear forwards;
+}
+
+.explode{
+    -webkit-animation: explode .5s ease-in-out forwards;
+            animation: explode .5s ease-in-out forwards;
+}
+
+.card {
+    -webkit-animation: tiltcard .5s ease-in-out 1s forwards;
+            animation: tiltcard .5s ease-in-out 1s forwards;
+    position: absolute;
+}
+
+@-webkit-keyframes tiltcard {
+    0% {
+        -webkit-transform: rotateY(0deg);
+                transform: rotateY(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotateY(-30deg);
+                transform: rotateY(-30deg);
+    }
+}
+
+@keyframes tiltcard {
+    0% {
+        -webkit-transform: rotateY(0deg);
+                transform: rotateY(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotateY(-30deg);
+                transform: rotateY(-30deg);
+    }
+}
+
+@-webkit-keyframes explode {
+    0% {
+        -webkit-transform: translate(0, 0) scale(1);
+                transform: translate(0, 0) scale(1);
+    }
+
+    100% {
+        -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+                transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+    }
+}
+
+@keyframes explode {
+    0% {
+        -webkit-transform: translate(0, 0) scale(1);
+                transform: translate(0, 0) scale(1);
+    }
+
+    100% {
+        -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+                transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+    }
+}
+
+@-webkit-keyframes writeLine {
+    0% {
+        width:0;
+    }
+
+    100% {
+        width: var(--linelength);
+    }
+}
+
+@keyframes writeLine {
+    0% {
+        width:0;
+    }
+
+    100% {
+        width: var(--linelength);
+    }
+}
+
+@media screen and (max-width: 1000px) {
+    .container {
+      -webkit-transform: scale(.85);
+              transform: scale(.85);
+    }
+  }
+
+  @media screen and (max-width: 850px) {
+    .container {
+      -webkit-transform: scale(.75);
+              transform: scale(.75);
+    }
+  }
+
+  @media screen and (max-width: 775px) {
+    .container {
+      -ms-flex-wrap: wrap-reverse;
+          flex-wrap: wrap-reverse;
+      -webkit-box-align: inherit;
+          -ms-flex-align: inherit;
+              align-items: inherit;
+    }
+  }
+
+  @media screen and (max-width: 370px) {
+    .container {
+        -webkit-transform: scale(.6);
+                transform: scale(.6);
+      }
+  }
+</style>
+
+</head>
+<body>
+<div class="container">
+        <div class="error">
+            <h1>405</h1>
+            <h2>error</h2>
+            <p>Methode nicht erlaubt</p>
+            <p>&nbsp;</p>
+            <a onclick="history.go(0)" style="border: 0px; background-color: rgb(59, 0, 253); border-radius: 5px; padding: 9px; padding-left: 85px; padding-right: 85px; color: white; cursor: pointer;">Neuladen</a><br/><br/>
+            <a onclick="window.location='/'" style="border: 0px; background-color: #bfc0c2; border-radius: 5px; padding: 9px; padding-left: 72px; padding-right: 71px; color: black; cursor: pointer;">Zur Startseite</a>
+        </div>
+        <div class="stack-container">
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 125px; --scaledist: .75; --vertdist: -25px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 100px; --scaledist: .8; --vertdist: -20px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist:75px; --scaledist: .85; --vertdist: -15px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 50px; --scaledist: .9; --vertdist: -10px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 25px; --scaledist: .95; --vertdist: -5px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 0px; --scaledist: 1; --vertdist: 0px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+	<script>
+	
+	const stackContainer = document.querySelector('.stack-container');
+const cardNodes = document.querySelectorAll('.card-container');
+const perspecNodes = document.querySelectorAll('.perspec');
+const perspec = document.querySelector('.perspec');
+const card = document.querySelector('.card');
+
+let counter = stackContainer.children.length;
+
+//function to generate random number
+function randomIntFromInterval(min, max) {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+//after tilt animation, fire the explode animation
+card.addEventListener('animationend', function () {
+    perspecNodes.forEach(function (elem, index) {
+        elem.classList.add('explode');
+    });
+});
+
+//after explode animation do a bunch of stuff
+perspec.addEventListener('animationend', function (e) {
+    if (e.animationName === 'explode') {
+        cardNodes.forEach(function (elem, index) {
+
+            //add hover animation class
+            elem.classList.add('pokeup');
+
+            //add event listner to throw card on click
+            elem.addEventListener('click', function () {
+                let updown = [800, -800]
+                let randomY = updown[Math.floor(Math.random() * updown.length)];
+                let randomX = Math.floor(Math.random() * 1000) - 1000;
+                elem.style.transform = `translate(${randomX}px, ${randomY}px) rotate(-540deg)`
+                elem.style.transition = "transform 1s ease, opacity 2s";
+                elem.style.opacity = "0";
+                counter--;
+                if (counter === 0) {
+                    stackContainer.style.width = "0";
+                    stackContainer.style.height = "0";
+                }
+            });
+
+            //generate random number of lines of code between 4 and 10 and add to each card
+            let numLines = randomIntFromInterval(5, 10);
+
+            //loop through the lines and add them to the DOM
+            for (let index = 0; index < numLines; index++) {
+                let lineLength = randomIntFromInterval(25, 97);
+                var node = document.createElement("li");
+                node.classList.add('node-' + index);
+                elem.querySelector('.code ul').appendChild(node).setAttribute('style', '--linelength: ' + lineLength + '%;');
+
+                //draw lines of code 1 by 1
+                if (index == 0) {
+                    elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
+                } else {
+                    elem.querySelector('.code ul .node-' + (index - 1)).addEventListener('animationend', function (e) {
+                        elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
+                    });
+                }
+            }
+        });
+    }
+});
+	
+	</script>
+</body>
diff --git a/error/500.html b/error/500.html
new file mode 100644
index 0000000..d8ced14
--- /dev/null
+++ b/error/500.html
@@ -0,0 +1,432 @@
+<head>
+<style>
+body,
+html {
+    padding: 0;
+    margin: 0;
+    font-family: 'Quicksand', sans-serif;
+    font-weight: 400;
+    overflow: hidden;
+}
+
+.writing {
+    width: 320px;
+    height: 200px;
+    background-color: #3f3f3f;
+    border: 1px solid #bbbbbb;
+    border-radius: 6px 6px 4px 4px;
+    position: relative;
+}
+
+.writing .topbar{
+    position: absolute;
+    width: 100%;
+    height: 12px;
+    background-color: #f1f1f1;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+}
+
+.writing .topbar div{
+    height: 6px;
+    width: 6px;
+    border-radius: 50%;
+    margin: 3px;
+    float: left;
+}
+
+.writing .topbar div.green{
+    background-color: #60d060;
+}
+.writing .topbar div.red{
+    background-color: red;
+}
+.writing .topbar div.yellow{
+    background-color: #e6c015;
+}
+
+.writing .code {
+    padding: 15px;
+}
+
+.writing .code ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.writing .code ul li {
+    background-color: #9e9e9e;
+    width: 0;
+    height: 7px;
+    border-radius: 6px;
+    margin: 10px 0;
+}
+
+.container {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    height: 100vh;
+    width: 100%;
+    -webkit-transition: -webkit-transform .5s;
+    transition: -webkit-transform .5s;
+    transition: transform .5s;
+    transition: transform .5s, -webkit-transform .5s;
+}
+
+.stack-container {
+    position: relative;
+    width: 420px;
+    height: 210px;
+    -webkit-transition: width 1s, height 1s;
+    transition: width 1s, height 1s;
+}
+
+.pokeup {
+    -webkit-transition: all .3s ease;
+    transition: all .3s ease;
+}
+
+.pokeup:hover {
+    -webkit-transform: translateY(-10px);
+            transform: translateY(-10px);
+    -webkit-transition: .3s ease;
+    transition: .3s ease;
+}
+
+
+.error {
+    width: 400px;
+    padding: 40px;
+    text-align: center;
+}
+
+.error h1 {
+    font-size: 125px;
+    padding: 0;
+    margin: 0;
+    font-weight: 700;
+}
+
+.error h2 {
+    margin: -30px 0 0 0;
+    padding: 0px;
+    font-size: 47px;
+    letter-spacing: 12px;
+}
+
+.perspec {
+    -webkit-perspective: 1000px;
+            perspective: 1000px;
+}
+
+.writeLine{
+    -webkit-animation: writeLine .4s linear forwards;
+            animation: writeLine .4s linear forwards;
+}
+
+.explode{
+    -webkit-animation: explode .5s ease-in-out forwards;
+            animation: explode .5s ease-in-out forwards;
+}
+
+.card {
+    -webkit-animation: tiltcard .5s ease-in-out 1s forwards;
+            animation: tiltcard .5s ease-in-out 1s forwards;
+    position: absolute;
+}
+
+@-webkit-keyframes tiltcard {
+    0% {
+        -webkit-transform: rotateY(0deg);
+                transform: rotateY(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotateY(-30deg);
+                transform: rotateY(-30deg);
+    }
+}
+
+@keyframes tiltcard {
+    0% {
+        -webkit-transform: rotateY(0deg);
+                transform: rotateY(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotateY(-30deg);
+                transform: rotateY(-30deg);
+    }
+}
+
+@-webkit-keyframes explode {
+    0% {
+        -webkit-transform: translate(0, 0) scale(1);
+                transform: translate(0, 0) scale(1);
+    }
+
+    100% {
+        -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+                transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+    }
+}
+
+@keyframes explode {
+    0% {
+        -webkit-transform: translate(0, 0) scale(1);
+                transform: translate(0, 0) scale(1);
+    }
+
+    100% {
+        -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+                transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
+    }
+}
+
+@-webkit-keyframes writeLine {
+    0% {
+        width:0;
+    }
+
+    100% {
+        width: var(--linelength);
+    }
+}
+
+@keyframes writeLine {
+    0% {
+        width:0;
+    }
+
+    100% {
+        width: var(--linelength);
+    }
+}
+
+@media screen and (max-width: 1000px) {
+    .container {
+      -webkit-transform: scale(.85);
+              transform: scale(.85);
+    }
+  }
+
+  @media screen and (max-width: 850px) {
+    .container {
+      -webkit-transform: scale(.75);
+              transform: scale(.75);
+    }
+  }
+
+  @media screen and (max-width: 775px) {
+    .container {
+      -ms-flex-wrap: wrap-reverse;
+          flex-wrap: wrap-reverse;
+      -webkit-box-align: inherit;
+          -ms-flex-align: inherit;
+              align-items: inherit;
+    }
+  }
+
+  @media screen and (max-width: 370px) {
+    .container {
+        -webkit-transform: scale(.6);
+                transform: scale(.6);
+      }
+  }
+</style>
+
+</head>
+<body>
+<div class="container">
+        <div class="error">
+            <h1>500</h1>
+            <h2>error</h2>
+            <p>Server Arbeiten:</p>
+            <p>Wir arbeiten momentan an den Servern und beheben ein paar Probleme.</p>
+            <a onclick="history.go(0)" style="border: 0px; background-color: rgb(59, 0, 253); border-radius: 5px; padding: 9px; padding-left: 85px; padding-right: 85px; color: white; cursor: pointer;">Neuladen</a><br/><br/>
+            <a onclick="window.location='/'" style="border: 0px; background-color: #bfc0c2; border-radius: 5px; padding: 9px; padding-left: 72px; padding-right: 71px; color: black; cursor: pointer;">Zur Startseite</a>
+        </div>
+        <div class="stack-container">
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 125px; --scaledist: .75; --vertdist: -25px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 100px; --scaledist: .8; --vertdist: -20px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist:75px; --scaledist: .85; --vertdist: -15px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 50px; --scaledist: .9; --vertdist: -10px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 25px; --scaledist: .95; --vertdist: -5px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card-container">
+                <div class="perspec" style="--spreaddist: 0px; --scaledist: 1; --vertdist: 0px;">
+                    <div class="card">
+                        <div class="writing">
+                            <div class="topbar">
+                                <div class="red"></div>
+                                <div class="yellow"></div>
+                                <div class="green"></div>
+                            </div>
+                            <div class="code">
+                                <ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+	<script>
+	
+	const stackContainer = document.querySelector('.stack-container');
+const cardNodes = document.querySelectorAll('.card-container');
+const perspecNodes = document.querySelectorAll('.perspec');
+const perspec = document.querySelector('.perspec');
+const card = document.querySelector('.card');
+
+let counter = stackContainer.children.length;
+
+//function to generate random number
+function randomIntFromInterval(min, max) {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+//after tilt animation, fire the explode animation
+card.addEventListener('animationend', function () {
+    perspecNodes.forEach(function (elem, index) {
+        elem.classList.add('explode');
+    });
+});
+
+//after explode animation do a bunch of stuff
+perspec.addEventListener('animationend', function (e) {
+    if (e.animationName === 'explode') {
+        cardNodes.forEach(function (elem, index) {
+
+            //add hover animation class
+            elem.classList.add('pokeup');
+
+            //add event listner to throw card on click
+            elem.addEventListener('click', function () {
+                let updown = [800, -800]
+                let randomY = updown[Math.floor(Math.random() * updown.length)];
+                let randomX = Math.floor(Math.random() * 1000) - 1000;
+                elem.style.transform = `translate(${randomX}px, ${randomY}px) rotate(-540deg)`
+                elem.style.transition = "transform 1s ease, opacity 2s";
+                elem.style.opacity = "0";
+                counter--;
+                if (counter === 0) {
+                    stackContainer.style.width = "0";
+                    stackContainer.style.height = "0";
+                }
+            });
+
+            //generate random number of lines of code between 4 and 10 and add to each card
+            let numLines = randomIntFromInterval(5, 10);
+
+            //loop through the lines and add them to the DOM
+            for (let index = 0; index < numLines; index++) {
+                let lineLength = randomIntFromInterval(25, 97);
+                var node = document.createElement("li");
+                node.classList.add('node-' + index);
+                elem.querySelector('.code ul').appendChild(node).setAttribute('style', '--linelength: ' + lineLength + '%;');
+
+                //draw lines of code 1 by 1
+                if (index == 0) {
+                    elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
+                } else {
+                    elem.querySelector('.code ul .node-' + (index - 1)).addEventListener('animationend', function (e) {
+                        elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
+                    });
+                }
+            }
+        });
+    }
+});
+	
+	</script>
+</body>
