oof

public/s/css/classic.css

@@ -0,0 +1,23 @@
+/* This is the classic style f0ck */
+
+.mudderfigg {
+    display: flex;
+    flex-flow: column;
+}
+
+span.id {
+    background: unset;
+    text-align: left;
+    color: #ffffff;
+    border: unset;
+}
+
+.id > a {
+    color: #9f0;
+}
+
+.options {
+    padding-left: 15px;
+    margin-top: -5px;
+    padding-bottom: 15px;
+}

public/s/css/coldblue.css

@@ -0,0 +1,178 @@
+@font-face {
+	font-family: "Cyberfall";
+	src: url(https://dr0p.it/Clgl.otf) format("opentype");
+}
+  
+body {
+    margin: 0em auto 3em auto;
+    background-color: #0B111D;
+    color: #fff;
+    font-family: "Cyberfall";
+    font-size: 12px;
+}
+ 
+a {
+	color: #00ffed;
+}
+  
+a:hover {
+	color: #00b4ef;
+}
+	
+.return {
+    text-align: center;
+    border-bottom: 2px solid #154d71;
+    width: 100%;
+    margin: 0 auto;
+    background: #121323;
+    top: 0;
+}
+
+.controls {
+    text-align: center;
+    color: #00ffed;
+    width: 888px;
+    margin: 0 auto;
+    background: #121323;
+    padding-top: 0;
+    margin-top: 35px;
+    border: 2px solid #154d71;
+}
+
+.navbar {
+    margin: 0 auto;
+    width: 100%;
+    border: 0;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    font-weight: bold;
+    position: fixed;
+    overflow: visible;
+    z-index: 999;
+    background-color: #0b111d;
+    border-bottom: 2px solid #207ea4;
+    text-align: center;
+    top: 0;
+}
+
+.medium, .thumbnail {
+    display: flex;
+    justify-content: center;
+    margin-top: 5px;
+    background: #121323;
+    border: 2px solid #154d71;
+    padding: 5px;
+}
+
+.panel {
+    margin-bottom: 0;
+    background-color: rgb(18, 19, 35);
+    border: 2px solid #154D71;
+    border-radius: 0px;
+    padding-left: 10px;
+    padding-right: 10px;
+    width: 25%;
+    position: relative;
+    min-height: 1px;
+}
+  
+input, select, textarea {
+	border: 1px double #00edff;
+	background: #282A2E;
+	color: #f1e3ce;
+	font-family: 'Hack', monospace, sans-serif;
+	font-size: 80%;
+}
+  
+.thumb {
+	border: 2px solid #207ea4;
+}
+
+.plyr--video .plyr__controls {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    padding: 0px 0px 0px;
+    background: rgb(11, 17, 29);
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+    color: #00edff;
+    transition: opacity .3s cubic-bezier(0.12, 0.63, 0.25, 1);
+}
+
+.plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__controls button:hover, .plyr__play-large {
+    background: #0b111d;
+    color: #00edff;
+    border-radius: 0;
+}
+
+.plyr__progress--played, .plyr__volume--display {
+    z-index: 1;
+    color: #00edff;
+    background: 0 0;
+    transition: none;
+}
+
+.plyr input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    margin-top: -4px;
+    position: relative;
+    height: 16px;
+    width: 16px;
+    background: #0b111d;
+    border: 1px solid #00edff;
+    border-radius: 100%;
+    transition: background .2s ease,border .2s ease,transform .2s ease;
+    box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.15);
+    box-sizing: border-box;
+}
+
+.plyr input[type=range]:active::-webkit-slider-thumb {
+    background: #0b111d;
+    border-color: #00edff;
+    transform: scale(1.25)
+}
+
+/* Feuerfick */
+.plyr input[type="range"]::-moz-range-thumb {
+    position: relative;
+    height: 16px;
+    width: 16px;
+    background: #0b111d;
+    border: 2px solid #00edff;
+    border-radius: 100%;
+    transition: background .2s ease, border .2s ease, transform .2s ease;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 0 0 1px rgba(0, 0, 0, .15);
+    box-sizing: border-box;
+}
+
+.plyr input[type=range]:active::-moz-range-thumb {
+    background: #0b111d;
+    border-color: #00edff;
+    transform: scale(1.25)
+}
+
+.plyr--video .plyr__controls button.tab-focus:focus, .plyr--video .plyr__controls button:hover {
+    background: #154d71;
+    color: #00edff;
+    border-radius: 0;
+}
+
+.plyr--audio .plyr__controls {
+    padding: 0;
+    border-radius: inherit;
+    background: rgb(11, 17, 29);
+    border: 0;
+    color: #00edff;
+    width: 300px;
+    padding-right: 5;
+    height: 32px;
+}
+
+.plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__controls button:hover, .plyr__play-large {
+    background: #154d71;
+    color: #00edff;
+    border-radius: 0;
+}

public/s/css/cyber.css

@@ -0,0 +1,687 @@
+@import url('https://fonts.googleapis.com/css?family=Oswald:700|Press+Start+2P');
+
+body {
+    margin: 1em auto 3em auto;
+    background-color: rgb(10, 10, 10);
+    color: #01ffbd;
+    font-family: 'Oswald', sans-serif;
+    font-size: 17px;
+}
+
+a {
+    color: #f300ff;
+    text-decoration: none;
+}
+
+input, select, textarea {
+    border: 1px double #00ffc4;
+    border-radius: 0;
+    background: #9a0039;
+    color: #04e8bd;
+    font-size: 80%;
+    font-family: 'Oswald', sans-serif;
+    margin-top: 3px;
+    margin-bottom: 3px;
+}
+
+a:hover {
+    color: #ffffff;
+    text-decoration: none;
+}
+
+.return {
+    text-align: center;
+    font-family: 'Press Start 2P', cursive;
+    font-size: 29px;
+    text-decoration: none;
+    animation: glitch2 2s steps(100) infinite;
+    color: white;
+    border-bottom: 2px solid #9a0039;
+    background-color: #061412;
+    margin-top: -60px;
+}
+
+ul#posts {
+    width: calc(100% - 210px);
+    margin: 0;
+    margin-left: 100px;
+    padding: 0;
+    list-style: none;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-flow: row wrap;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    -webkit-justify-content: flex-start;
+    padding-top: 1.5em;
+}
+
+.controls {
+    text-align: center;
+    color: #01f4b5;
+    font-weight: bold;
+    width: 888px;
+    margin: 0 auto;
+    background: #061412;
+    padding-top: 0;
+    border: 2px solid #9a0039;
+    margin-top: 60px;
+}
+
+.medium, .thumbnail {
+    display: flex;
+    justify-content: center;
+    margin-top: 5px;
+    background: #061412;
+    border: 2px solid #9a0039;
+    padding: 5px;
+}
+
+
+
+.thumb {
+    border: 2px solid rgb(4, 232, 189);
+}
+
+/* Color the Controls */
+a#next {
+    color: #01f4b5;
+}
+
+a#next:hover {
+	animation: glitch2 2s steps(100) infinite;
+}
+
+a#random {
+    color: #01f4b5;
+}
+
+a#random:hover {
+    animation: glitch2 2s steps(100) infinite;
+}
+
+a#prev {
+    color: #01f4b5;
+}
+
+a#prev:hover {
+    animation: glitch2 2s steps(100) infinite;
+}
+
+a#holland {
+    color: #01f4b5;
+}
+
+a#holland:hover {
+	color: #cc0ccb;
+    animation: glitch2 2s steps(100) infinite;
+}
+
+/* PANEL */
+.panel {
+    background-color: rgba(4, 27, 23, 0.61);
+    border: 2px solid #9a0039;
+}
+
+.navbar {
+    text-align: center;
+    margin-top: 7px;
+    width: 100%;
+    margin: 0 auto;
+    border-bottom: 2px solid #9a0039;
+    background: #061412;
+    padding-bottom: 5px;
+    top: 0;
+}
+
+.plyr--audio .plyr__controls {
+    padding: 0;
+    border-radius: inherit;
+    background: #0a0a0a;
+    border: 0;
+    color: #f300ff;
+    width: 300px;
+    padding-right: 5;
+    height: 32px;
+}
+
+.plyr input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    margin-top: -4px;
+    position: relative;
+    height: 16px;
+    width: 16px;
+    background: #061412;
+    border: 1px solid #f300ff;
+    border-radius: 100%;
+    transition: background .2s ease,border .2s ease,transform .2s ease;
+    box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.15);
+    box-sizing: border-box;
+}
+
+.plyr__progress--played, .plyr__volume--display {
+    z-index: 1;
+    color: #00efb1;
+    background: 0 0;
+    transition: none;
+}
+
+.plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__controls button:hover, .plyr__play-large {
+    background: #061412;
+    color: #01f4b5;
+    border-radius: 0;
+}
+
+.plyr--video .plyr__controls button.tab-focus:focus, .plyr--video .plyr__controls button:hover {
+    background: #061412;
+    color: #01f4b5;
+    border-radius: 0;
+}
+
+.plyr input[type=range]:active::-webkit-slider-thumb {
+    background: #061412;
+    border-color: #01f4b5;
+    transform: scale(1.25)
+}
+
+.plyr--video .plyr__controls {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    padding: 0px 0px 0px;
+    background: rgba(10, 10, 10, 0.73);
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+    color: #01f4b5;
+    transition: opacity .3s cubic-bezier(0.12, 0.63, 0.25, 1);
+}
+
+/* Feuerfick */
+.plyr input[type="range"]::-moz-range-thumb {
+    position: relative;
+    height: 16px;
+    width: 16px;
+    background: #061412;
+    border: 2px solid #01f4b5;
+    border-radius: 100%;
+    transition: background .2s ease, border .2s ease, transform .2s ease;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 0 0 1px rgba(0, 0, 0, .15);
+    box-sizing: border-box;
+}
+
+.plyr input[type=range]:active::-moz-range-thumb {
+    background: #061412;
+    border-color: #01f4b5;
+    transform: scale(1.25)
+}
+
+@keyframes noise-anim {
+  0% {
+    clip: rect(2px, 9999px, 94px, 0);
+  }
+  5% {
+    clip: rect(89px, 9999px, 60px, 0);
+  }
+  10% {
+    clip: rect(66px, 9999px, 50px, 0);
+  }
+  15% {
+    clip: rect(3px, 9999px, 54px, 0);
+  }
+  20% {
+    clip: rect(26px, 9999px, 19px, 0);
+  }
+  25% {
+    clip: rect(20px, 9999px, 66px, 0);
+  }
+  30% {
+    clip: rect(18px, 9999px, 43px, 0);
+  }
+  35% {
+    clip: rect(54px, 9999px, 48px, 0);
+  }
+  40% {
+    clip: rect(33px, 9999px, 66px, 0);
+  }
+  45% {
+    clip: rect(24px, 9999px, 61px, 0);
+  }
+  50% {
+    clip: rect(30px, 9999px, 18px, 0);
+  }
+  55% {
+    clip: rect(16px, 9999px, 96px, 0);
+  }
+  60% {
+    clip: rect(2px, 9999px, 20px, 0);
+  }
+  65% {
+    clip: rect(84px, 9999px, 19px, 0);
+  }
+  70% {
+    clip: rect(50px, 9999px, 5px, 0);
+  }
+  75% {
+    clip: rect(60px, 9999px, 80px, 0);
+  }
+  80% {
+    clip: rect(26px, 9999px, 96px, 0);
+  }
+  85% {
+    clip: rect(100px, 9999px, 74px, 0);
+  }
+  90% {
+    clip: rect(82px, 9999px, 29px, 0);
+  }
+  95% {
+    clip: rect(34px, 9999px, 97px, 0);
+  }
+  100% {
+    clip: rect(91px, 9999px, 44px, 0);
+  }
+}
+
+.return:after {
+  content: attr(class="return");
+  position: absolute;
+  left: 2px;
+  text-shadow: -1px 0 red;
+  top: 0;
+  color: white;
+  background: black;
+  overflow: hidden;
+  clip: rect(0, 900px, 0, 0);
+  animation: noise-anim 2s infinite linear alternate-reverse;
+}
+
+@keyframes noise-anim-2 {
+  0% {
+    clip: rect(76px, 9999px, 52px, 0);
+  }
+  5% {
+    clip: rect(5px, 9999px, 11px, 0);
+  }
+  10% {
+    clip: rect(25px, 9999px, 9px, 0);
+  }
+  15% {
+    clip: rect(56px, 9999px, 30px, 0);
+  }
+  20% {
+    clip: rect(63px, 9999px, 93px, 0);
+  }
+  25% {
+    clip: rect(84px, 9999px, 63px, 0);
+  }
+  30% {
+    clip: rect(55px, 9999px, 54px, 0);
+  }
+  35% {
+    clip: rect(53px, 9999px, 52px, 0);
+  }
+  40% {
+    clip: rect(40px, 9999px, 66px, 0);
+  }
+  45% {
+    clip: rect(50px, 9999px, 15px, 0);
+  }
+  50% {
+    clip: rect(90px, 9999px, 31px, 0);
+  }
+  55% {
+    clip: rect(33px, 9999px, 4px, 0);
+  }
+  60% {
+    clip: rect(18px, 9999px, 57px, 0);
+  }
+  65% {
+    clip: rect(2px, 9999px, 21px, 0);
+  }
+  70% {
+    clip: rect(38px, 9999px, 93px, 0);
+  }
+  75% {
+    clip: rect(61px, 9999px, 44px, 0);
+  }
+  80% {
+    clip: rect(83px, 9999px, 27px, 0);
+  }
+  85% {
+    clip: rect(80px, 9999px, 51px, 0);
+  }
+  90% {
+    clip: rect(91px, 9999px, 39px, 0);
+  }
+  95% {
+    clip: rect(59px, 9999px, 36px, 0);
+  }
+  100% {
+    clip: rect(74px, 9999px, 80px, 0);
+  }
+}
+.return:before {
+  content: attr(data-text);
+  position: absolute;
+  left: -2px;
+  text-shadow: 1px 0 blue;
+  top: 0;
+  color: white;
+  background: transparent;
+  overflow: hidden;
+  clip: rect(0, 900px, 0, 0);
+  animation: noise-anim-2 3s infinite linear alternate-reverse;
+}
+
+@keyframes glitch2 {
+  0% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  1% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  2% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  3% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  4% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  5% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  6% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  7% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  8% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  9% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  10% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  11% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  12% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  13% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  14% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  15% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  16% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  17% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  18% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  19% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  20% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  21% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  22% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  23% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  24% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  25% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  26% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  27% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  28% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  29% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  30% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  31% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  32% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  33% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  34% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  35% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  36% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  37% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  38% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  39% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  40% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  41% {
+    text-shadow: 50px 0 0 blue, -50px 0 0 lime;
+  }
+  42% {
+    text-shadow: 0 0 0 blue, 0 0 0 lime;
+  }
+  43% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  44% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  45% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  46% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  47% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  48% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  49% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  50% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  51% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  52% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  53% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  54% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  55% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  56% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  57% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  58% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  59% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  60% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  61% {
+    text-shadow: 30px 0 0 red, -30px 0 0 lime;
+  }
+  62% {
+    text-shadow: 0 0 0 red, 0 0 0 lime;
+  }
+  63% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
+  }
+  64% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
+  }
+  65% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
+  }
+  66% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
+  }
+  67% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  68% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  69% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  70% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  71% {
+    text-shadow: 70px 0 0 red, -70px 0 0 blue;
+  }
+  72% {
+    text-shadow: 0 0 0 red, 0 0 0 blue;
+  }
+  73% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  74% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  75% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  76% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  77% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  78% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  79% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  80% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  81% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  82% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  83% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  84% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  85% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  86% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  87% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  88% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  89% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  90% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  91% {
+    text-shadow: 60px 0 0 lime, -60px 0 0 blue;
+  }
+  92% {
+    text-shadow: 0 0 0 lime, 0 0 0 blue;
+  }
+  92% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  93% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  94% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  95% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  96% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  97% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  98% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  99% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  100% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+}

public/s/css/f0ck-custom.css

@@ -0,0 +1,207 @@
+/* written by sirx for f0ck.me */
+/* use whatever you like */
+ul#posts {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    grid-gap: 1em;
+    list-style: none;
+    padding: 0;
+    margin-top: 10px;
+}
+
+.navbar {
+    background-color: #1b1b1b;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+
+body {
+	background-color: black;
+    color: white;
+}
+
+html {
+	background-color: black;
+}
+
+.container.is-fluid {
+	padding-top: 10px;
+}
+
+li.post {
+    position: relative;
+}
+
+span.item-mime {
+    position: absolute;
+    right: 0;
+    top: 0;
+    color: #68da20;
+    text-shadow: 1px 1px black;
+    font-size: 11px;
+    text-transform: uppercase;
+    background: #000000b8;
+    visibility: hidden;
+}
+
+li.post:hover > span.item-mime {
+	visibility: visible;
+}
+
+a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-item.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, .navbar-link.is-active {
+    background-color: #000000;
+    color: #ffffff;
+}
+
+a#next, a#prev {
+    position: relative;
+    font-weight: normal;
+    top: 0px;
+    bottom: 932px;
+    margin: unset;
+    font-size: 30px;
+    color: #99ff00;
+    padding: 140px 40px 140px 40px;
+    cursor: pointer;
+    -webkit-transform: translateZ(0);
+    align-content: inherit;
+    align-self: center;
+    bottom: 0;
+}
+
+a#next, a#prev {
+    position: sticky;
+    top: 0;
+}
+
+.content {
+    display: grid;
+    justify-content: space-around;
+    grid-template-columns: 0fr 1fr 0fr;
+}
+
+.previous-post, .next-post {
+    display: flex;
+}
+
+img#f0ck-image {
+    max-width: 100%;
+    max-height: 500px;
+}
+
+.metadata {
+    text-align: center;
+    position: sticky;
+    bottom: 0;
+}
+
+a:hover {
+    color: #99ff00;
+    opacity: 0.8;
+}
+
+a {
+    color: #99ff00;
+    cursor: pointer;
+    text-decoration: none;
+}
+
+.navbar-item, .navbar-link {
+	color: white;
+	text-shadow: 1px 1px black;
+}
+
+.media-object {
+    text-align: center;
+    align-self: center;
+}
+
+a.id-link {
+    padding-right: 5;
+}
+
+div#my-video {
+max-height: unset;
+}
+
+.box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table:not(:last-child), .table-container:not(:last-child), .title:not(:last-child), .subtitle:not(:last-child), .block:not(:last-child), .highlight:not(:last-child), .breadcrumb:not(:last-child), .level:not(:last-child), .list:not(:last-child), .message:not(:last-child), .pagination:not(:last-child), .tabs:not(:last-child) {
+    margin-bottom: 0;
+    margin-top: 0;
+}
+
+.video-container {
+  position: relative;
+  padding-bottom: 56.25%; /*16:9*/
+  padding-top: 30px; 
+  height: 0; 
+  overflow: hidden;
+}
+ 
+.video-container video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.irc {
+    padding: 10px;
+    color: white;
+}
+
+a#next:hover {
+	box-shadow: -1px 0px #99ff001c;
+	transition: all .2s;
+}
+
+a#prev:hover {
+	box-shadow: 1px 0px #99ff001c;
+	transition: all .2s;
+}
+
+.navbar-brand a.navbar-item:focus, .navbar-brand a.navbar-item:hover {
+    background-color: black;
+}
+
+.controls {
+    text-align: center;
+}
+
+.content {
+    min-height: 517px;
+}
+
+#themeselector {
+    color: #fff;
+    background-color: #343a40;
+    display: inline-block;
+    font-weight: 600;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: 0.25rem;
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    border: 0;
+    outline: 0;
+}
+
+select {
+    font-size: small;
+}
+
+@media (max-width: 600px) {
+    a#next, a#prev {
+        padding: 0;
+    }
+
+    .content {
+        min-height: 0;
+    }
+}
+
+img#biohaz {
+    width: 28px;
+}

public/s/css/indexstyle.css

@@ -0,0 +1,5 @@
+* {
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}

public/s/css/krautchan.css

@@ -0,0 +1,237 @@
+body {
+    margin: 0em auto 3em auto;
+    background-color: #eeeeee;
+    color: #fff;
+    font-family: sans-serif;
+}
+
+a {
+    color: #3333cc;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+a:hover {
+    color: #3d3dff;
+}
+
+.thumb {
+    border: 2px solid #313370;
+}
+
+.wrapper {
+    margin: 0 auto;
+    width: 888px;
+}
+
+
+.navbar {
+    margin-top: 7px;
+    color: #313370;
+    margin: 0 auto;
+    width: 100%;
+    border-bottom: 2px solid;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    font-weight: bold;
+    background: #aaaacc;
+    top: 0;
+}
+
+
+input, select, textarea {
+    border: 1px double #3333cc;
+    background: #eeeeee;
+    color: #3333cc;
+    font-family: sans-serif;
+    font-size: 80%;
+    font-weight: bold;
+}
+
+.panel {
+    margin-bottom: 0;
+    background-color: #aaaacc;
+    border: 2px solid #313370;
+    border-radius: 0px;
+    padding-left: 10px;
+    padding-right: 10px;
+    width: 25%;
+    float: left;
+    position: relative;
+    min-height: 1px;
+    color: #000000;
+}
+
+.contact {
+    margin: 20px;
+    color: #000000;
+}
+
+.irc {
+    margin: 20px;
+    color: #000000;
+}
+
+code {
+    color: #3d3dff;
+}
+
+.return {
+    text-align: center;
+    border-bottom: 2px solid #313370;
+    width: 100%;
+    margin: 0 auto;
+    background: #aaaacc;
+    margin-bottom: 5px;
+    top: 0;
+}
+
+.controls {
+    text-align: center;
+    color: #3333cc;
+    font-weight: bold;
+    width: 888px;
+    margin: 0 auto;
+    background: #aaaacc;
+    padding-top: 0;
+    border: 2px solid #313370;
+    margin-top: 35px;
+}
+
+.medium, .thumbnail {
+    display: flex;
+    justify-content: center;
+    margin-top: 5px;
+    background: #aaaacc;
+    border: 2px solid #313370;
+}
+
+.panel.info {
+    margin: 0 auto;
+    margin-top: 5px;
+    float: none;
+    width: 888px;
+    margin-bottom: 5px;
+}
+
+.plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__controls button:hover, .plyr__play-large {
+    background: #eeeeee;
+    color: #3535cb;
+    border-radius: 0;
+}
+
+.plyr--video .plyr__controls {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    padding: 0px 0px 0px;
+    background: rgb(238, 238, 238);
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+    color: #3535cb;
+    transition: opacity .3s cubic-bezier(0.12, 0.63, 0.25, 1);
+}
+
+span.plyr__time--current {
+    color: #000;
+}
+
+.plyr__progress--played, .plyr__volume--display {
+    z-index: 1;
+    color: #3535cb;
+    background: 0 0;
+    transition: none;
+}
+
+.plyr--video .plyr__progress--buffer {
+    color: rgb(49, 51, 112);
+}
+
+.plyr--video .plyr__progress--buffer, .plyr--video .plyr__volume--display {
+    background: rgb(170, 170, 204);
+}
+
+.plyr--video .plyr__controls button.tab-focus:focus, .plyr--video .plyr__controls button:hover {
+    background: #3535cb;
+    color: #eeeeee;
+    border-radius: 0;
+}
+
+.plyr input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    margin-top: -4px;
+    position: relative;
+    height: 16px;
+    width: 16px;
+    background: #eeeeee;
+    border: 2px solid #3535cb;
+    border-radius: 100%;
+    transition: background .2s ease,border .2s ease,transform .2s ease;
+    box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.15);
+    box-sizing: border-box;
+}
+
+.plyr input[type=range]:active::-webkit-slider-thumb {
+    background: #eeeeee;
+    border-color: #3535cb;
+    transform: scale(1.25)
+}
+
+.plyr__controls button {
+    position: relative;
+    display: inline-block;
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+    overflow: visible;
+    vertical-align: middle;
+    padding: 7px;
+    border: 0;
+    background: 0 0;
+    border-radius: 0px;
+    cursor: pointer;
+    transition: background .3s ease,color .3s ease,opacity .3s ease;
+    color: inherit;
+}
+
+/* Feuerfick */
+.plyr input[type="range"]::-moz-range-thumb {
+    position: relative;
+    height: 16px;
+    width: 16px;
+    background: #eeeeee;
+    border: 2px solid #3535cb;
+    border-radius: 100%;
+    transition: background .2s ease, border .2s ease, transform .2s ease;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 0 0 1px rgba(0, 0, 0, .15);
+    box-sizing: border-box;
+}
+
+.plyr input[type=range]:active::-moz-range-thumb {
+    background: #eeeeee;
+    border-color: #3535cb;
+    transform: scale(1.25)
+}
+
+/* Audio */
+.plyr--audio .plyr__controls {
+    padding: 0;
+    border-radius: inherit;
+    background: #eeeeee;
+    border: 0;
+    color: #3333cc;
+    width: 300px;
+    padding-right: 5;
+    height: 32px;
+}
+
+.plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__controls button:hover, .plyr__play-large {
+    background: #3535cb;
+    color: #eeeeee;
+    border-radius: 0;
+}
+
+.plyr--audio .plyr__progress--buffer, .plyr--audio .plyr__volume--display {
+    background: rgb(170, 170, 204);
+}

public/s/css/master.css

@@ -0,0 +1,187 @@
+@import url('https://fonts.googleapis.com/css?family=Space+Mono');
+
+body {
+    font-family: 'Space Mono', monospace;
+    font-size: 13px;
+}
+
+.mudderfigg {
+    padding: 10px;
+    border-radius: 5px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.id {
+    text-align: center;
+    background: #262626;
+    padding: 5px;
+    border-radius: 0;
+    color: white;
+    vertical-align: baseline;
+    border: 1px solid #99ff00;
+}
+
+.id > a {
+    color: #99ff00;
+}
+
+
+.panel {
+    padding-left: 5px;
+    padding-right: 5px;
+    border-top: 2px dotted #99ff00;
+}
+
+.panel.info {
+    margin-top: 0px;
+    width: 1200px;
+    border: 1px solid black;
+}
+
+.wrapper {
+    margin: 0 auto;
+    width: 1200px;
+    border-left: 1px solid black;
+    border-right: 1px solid black;
+}
+
+.medium, .thumbnail {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0px;
+    background: #484747;
+    border: 0px solid #99ff00;
+    padding: 5px;
+}
+
+.controls {
+    border-bottom: 1px solid;
+    width: 1200px;
+    margin-top: 35px;
+    border: 1px solid black;
+}
+
+a#next, a#prev {
+    position: relative;
+    font-weight: normal;
+    top: 0px;
+    bottom: 932px;
+    margin: unset;
+    font-size: 18px;
+    color: #99ff00;
+    padding: 140px 40px 140px 40px;
+    cursor: pointer;
+    -webkit-transform: translateZ(0);
+    align-content: inherit;
+    align-self: center;
+}
+
+a#next, a#prev {
+    position: sticky;
+    top: 0;
+}
+
+img.van {
+    width: 171px;
+    height: 28px;
+    background-image: url(/s/img/f0ck_small.png);
+    background-position: 0px -1px;
+    border: 1px solid transparent;
+    background-repeat: no-repeat;
+}
+
+
+.van {
+    border: 0;
+    box-shadow: none;
+}
+.navbar {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.return {
+    padding: 0;
+    margin-top: -35px;
+    top: inherit;
+}
+
+.audiojs {
+    height: 360px;
+    width: 640px;
+    background-color: transparent;
+}
+
+input, select, textarea {
+    border: unset;
+    background: #262626;
+    color: #f1e3ce;
+    font-family: 'Space Mono', monospace;
+    font-size: 99%;
+}
+
+/* Blöde Box */
+/*body:after {
+    content: "gemaked vong 1 spast, 1 nudelsuppe unt 1 hunt. hypfer isd doof.";
+    position: fixed;
+    background: #484747;
+    bottom: 0;
+    right: 0;
+    color: #9f0;
+    border-left: 1px solid black;
+    border-top: 1px solid black;
+    padding: 5px;
+}*/
+
+.my-video-dimensions {
+    width: 900px;
+    height: auto;
+    min-height: 500px;
+}
+
+img#f0ck-image {
+    max-width: 100%;
+    max-height: 500px;
+}
+
+.vjs-audio.vjs-has-started .vjs-poster {
+    display: block;
+    background-size: cover;
+}
+
+.vjs-poster {
+    background-size: cover;
+}
+
+a#elfe {
+    display: flex;
+    justify-content: center;
+    align-self: center;
+    max-height: fit-content;
+    max-height: -moz-fit-content;
+}
+
+.return-how {
+    position: unset;
+    margin: 0;
+}
+
+.f0ckme {
+    color: inherit;
+    text-align: center;
+    padding: 10px;
+}
+
+/* RIP TERRY */
+.thumb[src="./t/34449.png"] {
+    transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    background-color: gold;
+    border-width: medium;
+    border-color: gold;
+    font-size: 18px;
+    font-style: italic;
+    vertical-align: middle;
+    height: 128px;
+}

public/s/css/n0xy.css

@@ -0,0 +1,197 @@
+body {
+    background-color: #0b0b0e;
+    font-family: monospace;
+    font-size: 15px;
+}
+
+ul#posts {
+    padding-top: 3.2em;
+}
+
+.wrapper {
+    border-left: 0;
+    border-right: 0;
+}
+
+.thumb {
+    border: 1px solid #1dadb04d;
+}
+
+.id > a {
+    color: #fff;
+}
+
+a {
+    color: #1dadb0;
+    text-decoration: none;
+}
+
+a:hover {
+    text-shadow: 2px 1px 15px #1dadb0;
+    color: #1dadb0;
+    text-decoration: none;
+}
+
+a#next, a#prev {
+    color: #1dadb0;
+}
+
+.navbar {
+
+    border-bottom-color: currentcolor;
+    border-bottom-style: none;
+    border-bottom-width: 0px;
+    background-color: #121212;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAYAAAA4GpVBAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB90GBgMqHcZ0EYUAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAF0lEQVQI12NgYGAwZsAECDEWBgYGBgYACpwAazfG694AAAAASUVORK5CYII=");
+    color: #1dadb0;
+    text-shadow: 0 1px 1px #000;
+    overflow: auto;
+    border-bottom: 1px solid;
+    box-shadow: 0 0 5px rgb(0, 0, 0);
+
+}
+
+.return {
+    border-bottom-color: currentcolor;
+    border-bottom-style: none;
+    border-bottom-width: 0px;
+    background-color: #121212;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAYAAAA4GpVBAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB90GBgMqHcZ0EYUAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAF0lEQVQI12NgYGAwZsAECDEWBgYGBgYACpwAazfG694AAAAASUVORK5CYII=");
+    color: #1dadb0;
+    text-shadow: 0 1px 1px #000;
+    overflow: auto;
+    border-bottom: 1px solid;
+    box-shadow: 0 0 5px rgb(0, 0, 0);
+    margin-top: -55px;
+}
+
+.controls {
+    border: 0;
+    border-bottom-color: currentcolor;
+    border-bottom-style: none;
+    border-bottom-width: 0px;
+    background-color: #121212;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAYAAAA4GpVBAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB90GBgMqHcZ0EYUAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAF0lEQVQI12NgYGAwZsAECDEWBgYGBgYACpwAazfG694AAAAASUVORK5CYII=");
+    color: #1dadb0;
+    text-shadow: 0 1px 1px #000;
+    overflow: auto;
+    border-bottom: 1px solid;
+    box-shadow: 0 0 5px rgb(0, 0, 0);
+    margin-top: 55px;
+    margin-bottom: 10px;
+}
+
+.medium {
+    background-color: #121212;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAYAAAA4GpVBAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB90GBgMqHcZ0EYUAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAF0lEQVQI12NgYGAwZsAECDEWBgYGBgYACpwAazfG694AAAAASUVORK5CYII=");
+    color: #1dadb0;
+    text-shadow: 0 1px 1px #000;
+    overflow: auto;
+    box-shadow: 0 0 5px rgb(0, 0, 0);
+    padding-top: 15px;
+    padding-bottom: 15px;
+    border-bottom: 1px solid;
+}
+
+.panel.info {
+    border-bottom-color: currentcolor;
+    border-bottom-style: none;
+    border-bottom-width: 0px;
+    background-color: #121212;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAYAAAA4GpVBAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB90GBgMqHcZ0EYUAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAF0lEQVQI12NgYGAwZsAECDEWBgYGBgYACpwAazfG694AAAAASUVORK5CYII=");
+    color: #1dadb0;
+    text-shadow: 0 1px 1px #000;
+    overflow: auto;
+    box-shadow: 0 0 5px rgb(0, 0, 0);
+    border: 0;
+    margin-top: 10px;
+    border-bottom: 1px solid;
+}
+
+.id {
+    background: #090909;
+        background-image: none;
+    color: #1dadb0;
+    border: 0;
+    align-self: center;
+    font-size: 90%;
+    border-radius: 5px;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAYAAAA4GpVBAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB90GBgMqHcZ0EYUAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAF0lEQVQI12NgYGAwZsAECDEWBgYGBgYACpwAazfG694AAAAASUVORK5CYII=");
+    box-shadow: 0 0 5px rgb(0, 0, 0);
+}
+
+img {
+    box-shadow: none;
+}
+
+input, select, textarea {
+    border: 1px solid transparent;
+    background: #090909;
+    color: #1dadb0;
+    font-family: 'Hack', monospace, sans-serif;
+    font-size: 100%;
+}
+
+code {
+    color: #1dadb0;
+    padding: 5px;
+    background: black;
+    border: 1px solid;
+}
+
+img.van {
+    width: 276px;
+    height: 45px;
+    background-image: url(/s/img/f0xy.png);
+    background-position: 0px -1px;
+    border: 1px solid transparent;
+    background-repeat: no-repeat;
+}
+
+.return > a {
+    display: inline-block;
+    vertical-align: bottom;
+}
+
+.video-js .vjs-control-bar {
+    background-color: #161618 !important;
+    color: #fff;
+    font-size: 12px;
+}
+
+.video-js .vjs-big-play-button {
+    background-color: #1dadb04d;
+}
+
+.video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus, .video-js .vjs-big-play-button:active {
+    background-color: #1dadb0;
+}
+
+.video-js .vjs-play-progress, .video-js .vjs-volume-level {
+    background-color: #1dadb0;
+}
+
+.video-js {
+    background-color: #000;
+}
+
+.video-js .vjs-control:focus::before, .video-js .vjs-control:hover::before {
+    text-shadow: 0px 0px 0.2em #fff,0 0 0.2em #262626,0 0 0.2em #262626;
+}
+
+.video-js .vjs-loading-spinner {
+    border-color: #1dadb0;
+}
+
+div#my-video {
+    border-radius: 0px;
+    box-shadow: none;
+    margin-bottom: 15px;
+    margin-top: 15px;
+    border: 2px solid #161618;
+}
+
+.navbar > a {
+    display: inline-block;
+    vertical-align: bottom;
+    }

public/s/css/pink.css

@@ -0,0 +1,181 @@
+.thumb {
+    border: 2px solid #ff008d;
+}
+
+body {
+    margin: 0em auto 3em auto;
+    background-color: #1b1a1a;
+    color: #848484;
+    font-family: Monospace;
+    font-size: 12px;
+}
+
+
+a {
+    color: #fff;
+}
+
+a:hover {
+    color: #ff008d;
+}
+
+input, select, textarea {
+    border: 1px double #ff008d;
+    background: #2f2f2f;
+    color: #ffffff;
+    font-family: 'Hack', monospace, sans-serif;
+    font-size: 80%;
+}
+
+.return {
+    text-align: center;
+    font-size: 25px;
+    border-bottom: 2px solid #ff008d;
+    margin-top: -55px;
+}
+
+.controls {
+    text-align: center;
+    color: #ff008d;
+    font-weight: bold;
+    width: 888px;
+    margin: 0 auto;
+    background: #484747;
+    padding-top: 0;
+    margin-top: 55px;
+    border: 2px solid #ff008d;
+}
+
+.navbar {
+    margin: 0 auto;
+    width: 100%;
+    border: 0;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    font-weight: bold;
+    position: fixed;
+    overflow: visible;
+    z-index: 999;
+    background-color: #484747;
+    border-bottom: 2px solid #ff008d;
+    text-align: center;
+    top: 0;
+    color: #ff008d;
+}
+
+.medium, .thumbnail {
+    display: flex;
+    justify-content: center;
+    margin-top: 5px;
+    background: #484747;
+    border: 2px solid #ff008d;
+    padding: 5px;
+}
+
+span.id {
+    color: #ffffff;
+}
+
+a#holland {
+    color: #ff008d;
+}
+
+code {
+    color: #ff008d;
+}
+
+.panel {
+    margin-bottom: 0;
+    background-color: rgb(72, 71, 71);
+    border: 2px solid #ff008d;
+    border-radius: 0px;
+    padding-left: 10px;
+    padding-right: 10px;
+    width: 25%;
+    float: left;
+    position: relative;
+    min-height: 1px;
+}
+
+.plyr--audio .plyr__controls {
+    padding: 0;
+    border-radius: inherit;
+    background: #1b1a1a;
+    border: 0;
+    color: #ff008d;
+    width: 300px;
+    padding-right: 5;
+    height: 32px;
+}
+
+.plyr input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    margin-top: -4px;
+    position: relative;
+    height: 16px;
+    width: 16px;
+    background: #262626;
+    border: 1px solid #ff008d;
+    border-radius: 100%;
+    transition: background .2s ease,border .2s ease,transform .2s ease;
+    box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.15);
+    box-sizing: border-box;
+}
+
+.plyr__progress--played, .plyr__volume--display {
+    z-index: 1;
+    color: #ff008d;
+    background: 0 0;
+    transition: none;
+}
+
+.plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__controls button:hover, .plyr__play-large {
+    background: #484747;
+    color: #ff008d;
+    border-radius: 0;
+}
+
+.plyr input[type=range]:active::-webkit-slider-thumb {
+    background: #262626;
+    border-color: #ff008d;
+    transform: scale(1.25)
+}
+
+.plyr--video .plyr__controls {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    padding: 0px 0px 0px;
+    background: rgba(38, 38, 38, 0.97);
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+    color: #ff008d;
+    transition: opacity .3s cubic-bezier(0.12, 0.63, 0.25, 1);
+}
+
+/* Feuerfick */
+.plyr input[type="range"]::-moz-range-thumb {
+    position: relative;
+    height: 16px;
+    width: 16px;
+    background: #ff008d;
+    border: 2px solid #262626;
+    border-radius: 100%;
+    transition: background .2s ease, border .2s ease, transform .2s ease;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 0 0 1px rgba(0, 0, 0, .15);
+    box-sizing: border-box;
+}
+
+.plyr input[type=range]:active::-moz-range-thumb {
+    background: #ff008d;
+    border-color: #262626;
+    transform: scale(1.25)
+}
+
+.plyr--video .plyr__controls button.tab-focus:focus, .plyr--video .plyr__controls button:hover {
+    background: #484747;
+    color: #ff008d;
+    border-radius: 0;
+}

public/s/css/style.css

@@ -0,0 +1,323 @@
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+html, body {
+  max-height: 100%;
+  width: 100%;
+}
+body {
+  margin: 0em auto 3em auto;
+  background-color: #262626;
+  color: #fff;
+  font-family: Monospace;
+  font-size: 12px;
+  line-height: 1.42857143;
+}
+
+.contact {
+    margin: 20px;
+}
+
+input, select, textarea {
+	border: 1px double #99ff00;
+	background: #282A2E;
+	color: #f1e3ce;
+	font-family: 'Hack', monospace, sans-serif;
+	font-size: 80%;
+}
+
+ul#posts {
+  width: calc(100% - 210px);
+  margin: 0;
+  margin-left: 100px;
+  padding: 0;
+  list-style: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-flow: row wrap;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  -webkit-justify-content: flex-start;
+  padding-top: 2.2em;
+}
+li.post {
+  padding: 5px;
+  width: 128px;
+  height: 128px;
+  margin-top: 5px;
+  line-height: 128px;
+  -webkit-flex: 1 1 auto;
+  ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+.thumb {
+  border: 2px solid #4c4a4a;
+}
+.thumb:hover {
+	opacity: 0.7;
+}
+.clear {
+  clear: both;
+  padding: 1em 0;
+}
+a {
+  color: #9f0;
+  text-decoration: none;
+}
+a:hover {
+  color: #74c100;
+  text-decoration: underline;
+}
+
+.medium, .thumbnail {
+    display: flex;
+    justify-content: center;
+    margin-top: 5px;
+    background: #484747;
+    border: 0px solid #99ff00;
+    padding: 5px;
+}
+
+.info {
+  padding-top: 5px;
+}
+.id {
+  text-align: center;
+  padding-bottom: 10px;
+}
+
+.controls {
+    text-align: center;
+    font-weight: bold;
+    width: 888px;
+    margin: 0 auto;
+    padding-top: 0;
+    margin-top: 35px;
+    border: 0px solid #99ff00;
+    color: #99ff00;
+    background: #484747;
+}
+
+.navbar {
+    margin: 0 auto;
+    width: 100%;
+    border: 0;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    font-weight: bold;
+    position: fixed;
+    overflow: visible;
+    z-index: 999;
+    background-color: #484747;
+    border-bottom: 2px solid #99ff00;
+    text-align: center;
+}
+
+.return {
+    text-align: center;
+    border: 0;
+    width: 100%;
+    margin: 0 auto;
+    margin-bottom: 5px;
+    margin-top: -35px;
+    position: fixed;
+    overflow: visible;
+    z-index: 999;
+    border-bottom: 1px solid #99ff00;
+    padding: 5px;
+    background: #484747;
+    font-weight: bold;
+}
+
+.irc {
+  margin: 20px;
+}
+code {
+  color: #9df943;
+}
+
+.panel {
+    margin-bottom: 0;
+    background-color: #484747;
+    border: 0px solid #99ff00;
+    border-radius: 0px;
+    padding-left: 10px;
+    padding-right: 10px;
+    width: 25%;
+    float: left;
+    position: relative;
+    min-height: 1px;
+    color: #ffffff;
+    padding-bottom: 5px;
+}
+
+.panel.info {
+    margin: 0 auto;
+    margin-top: 5px;
+    float: none;
+    width: 888px;
+    margin-bottom: 5px;
+}
+
+
+img {
+    vertical-align: middle;
+    max-height: 770px;
+    border: 1px solid black;
+    box-shadow: 0 0 5px #000;
+}
+
+.wrapper {
+    margin: 0 auto;
+    width: 888px;
+}
+
+video#player {
+ 	max-width: 100%;
+    height: 50%;
+}
+
+/* Plyr */
+.plyr--audio .plyr__controls {
+    padding: 0;
+    border-radius: inherit;
+    background: #262626;
+    border: 0;
+    color: #99ff00;
+    width: 300px;
+    padding-right: 5;
+    height: 32px;
+}
+
+.plyr audio, .plyr video {
+    width: 100%;
+    height: auto!important;
+    vertical-align: middle;
+    border-radius: inherit;
+}
+
+/* Video Player Style */
+.plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__controls button:hover, .plyr__play-large {
+    background: #484747;
+    color: #9f0;
+    border-radius: 0;
+}
+
+.plyr--video .plyr__controls {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    padding: 0px 0px 0px;
+    background: rgba(38, 38, 38, 0.97);
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+    color: #91ee06;
+    transition: opacity .3s cubic-bezier(0.12, 0.63, 0.25, 1);
+}
+
+.plyr {
+    position: relative;
+    max-width: 100%;
+    min-width: 200px;
+    font-family: Avenir,'Avenir Next','Helvetica Neue','Segoe UI',Helvetica,Arial,sans-serif;
+    direction: ltr;
+    border: 1px solid #0c0d0c;
+    box-shadow: 0 0 15px #000;
+}
+
+.plyr--video .plyr__controls button.tab-focus:focus, .plyr--video .plyr__controls button:hover {
+    background: #484747;
+    color: #9f0;
+    border-radius: 0;
+}
+.plyr__progress--played, .plyr__volume--display {
+    z-index: 1;
+    color: #99ff00;
+    background: 0 0;
+    transition: none;
+}
+
+.plyr input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    margin-top: -4px;
+    position: relative;
+    height: 16px;
+    width: 16px;
+    background: #262626;
+    border: 1px solid #99ff00;
+    border-radius: 100%;
+    transition: background .2s ease,border .2s ease,transform .2s ease;
+    box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.15);
+    box-sizing: border-box;
+}
+
+.plyr input[type=range]:active::-webkit-slider-thumb {
+    background: #262626;
+    border-color: #99ff00;
+    transform: scale(1.25)
+}
+
+.plyr--fullscreen-active video {
+    height: 100%!important;
+    max-width: 100%!important;
+}
+
+.plyr--fullscreen-active {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 10000000;
+    background: #000;
+    border-radius: 0!important;
+    border: 0!important;
+}
+
+/* Feuerfick */
+.plyr input[type="range"]::-moz-range-thumb {
+    position: relative;
+    height: 16px;
+    width: 16px;
+    background: #9f0;
+    border: 2px solid #262626;
+    border-radius: 100%;
+    transition: background .2s ease, border .2s ease, transform .2s ease;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 0 0 1px rgba(0, 0, 0, .15);
+    box-sizing: border-box;
+}
+
+.plyr input[type=range]:active::-moz-range-thumb {
+    background: #9f0;
+    border-color: #262626;
+    transform: scale(1.25)
+}
+
+.savetheinternet {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    text-align: center;
+    background: black;
+}
+
+.f0ckme {
+    color: inherit;
+    text-align: center;
+    padding: 10px;
+}
+
+pre {
+    letter-spacing: 7px;
+}

public/s/css/term.css

@@ -0,0 +1,277 @@
+@import url('https://fonts.googleapis.com/css?family=VT323');
+
+body {
+    margin: 0em auto 3em auto;
+    background-color: #040404;
+    color: #fff;
+    font-family: 'VT323', monospace;
+    font-size: 18px;
+}
+
+span.id {
+    color: #00DF00;
+    text-shadow: 0 0 20px #00DF00;
+    background: #040404;
+    box-shadow: 0 0 7px 0px #00df00;
+    border-radius: 5px;
+    border: unset;
+}
+
+img.van {
+    width: 171px;
+    height: 28px;
+    background-image: url(/s/img/term_f0ck_logo.png);
+    background-position: 0px -1px;
+    border: 1px solid transparent;
+    background-repeat: no-repeat;
+}
+
+
+.id > a {
+    color: rgba(255,0,247,1);
+}
+
+span.src>a {
+    color: #ff00f7;
+    text-shadow: 0 0 20px #ff00f7;
+}
+
+input, select, textarea {
+    border: 1px double #ff00f7;
+    background: #282A2E;
+    color: #f1e3ce;
+    font-family: 'VT323', 'Courier', monospace;
+    font-size: 80%;
+    -moz-box-shadow: 0px 0px 37px 5px rgba(43,255,0,1);
+    -webkit-box-shadow: 0px 0px 10px 0px rgba(255,0,247,1);
+    -moz-box-shadow: 0px 0px 10px 0px rgba(255,0,247,1);
+    box-shadow: 0px 0px 10px 0px rgba(255,0,247,1);
+}
+
+.return {
+    text-align: center;
+    font-size: 17px;
+    color: #00DF00;
+    text-shadow: 0 0 20px #00DF00;
+    background: #0b0b0b;
+    border-bottom: 2px solid #03dc03;
+    margin-top: -35px;
+}
+
+.controls {
+    text-align: center;
+    color: #00d500;
+    font-weight: bold;
+    margin: 0 auto;
+    background: #0b0b0b;
+    padding-top: 0;
+    margin-top: 35px;
+    border: 2px solid #03dc03;
+}
+
+.medium, .thumbnail {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 5px;
+    background: #0b0b0b;
+    border: 2px solid #03dc03;
+    padding: 5px;
+}
+
+div#my-video {
+    border-radius: 5px;
+    box-shadow: 0 0 20px #000000;
+    margin-bottom: 15px;
+    margin-top: 15px;
+}
+
+a#elfe {
+    margin-bottom: 15px;
+    margin-top: 15px;
+}
+
+a#next {
+    color: #00DF00;
+    text-shadow: 0 0 20px #00DF00;
+}
+
+a#random {
+    color: #00DF00;
+    text-shadow: 0 0 20px #00DF00;
+}
+
+a#prev {
+    color: #00DF00;
+    text-shadow: 0 0 20px #00DF00;
+}
+
+.panel {
+    margin-bottom: 0;
+    background-color: rgba(16, 16, 16, 0.61);
+    border: 2px solid #0b842b;
+    border-radius: 0px;
+    padding-left: 10px;
+    padding-right: 10px;
+    width: 25%;
+    float: left;
+    position: relative;
+    min-height: 1px;
+}
+
+.thumb:hover {
+	opacity: 0.7;
+	-webkit-box-shadow: 0px 0px 6px 0px rgba(0,255,30,1)
+	-moz-box-shadow: 0px 0px 6px 0px rgba(0,255,30,1);
+	box-shadow: 0px 0px 6px 0px rgba(0,255,30,1);
+}
+
+.thumb {
+	border: 2px solid #00df00;
+}
+
+.navbar {
+    margin: 0 auto;
+    width: 100%;
+    border: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    font-weight: bold;
+    position: fixed;
+    overflow: visible;
+    z-index: 999;
+    background-color: #0b0b0b;
+    border-bottom: 2px solid #00df00;
+    text-align: center;
+    top: 0;
+    color: #00df00;
+}
+
+.navbar>a {
+	color: rgba(43,255,0,1);
+	text-shadow: 0 0 20px #00DF00;
+}
+
+.navbar>a:hover {
+	color: #00b700;
+}
+
+.contact>a {
+	color: rgba(43,255,0,1);
+	text-shadow: 0 0 20px #00DF00;
+}
+
+.contact>a:hover {
+	color: #00b700;
+}
+
+code {
+	color: rgba(43,255,0,1);
+	text-shadow: 0 0 20px;
+}
+
+a {
+	color: #00df00;
+	text-shadow: 0 0 20px;
+}
+
+a:hover {
+	color: #00b700;
+}
+
+.plyr__progress--played, .plyr__volume--display {
+    z-index: 1;
+    color: #00df00;
+    background: 0 0;
+    transition: none;
+}
+
+select#themeSelector {
+    color: #00DF00;
+    text-shadow: 0 0 20px #00DF00;
+    background: #040404;
+    border-radius: 0;
+    border: unset;
+    box-shadow: unset;
+    padding-bottom: 3px;
+    padding-top: 3px;
+}
+
+input, select, textarea {
+    border: #00df00;
+}
+
+.wrapper {
+    margin: 0 auto;
+    border-left: 0px solid black;
+    border-right: 0px solid black;
+}
+
+img {
+    vertical-align: middle;
+    border: 0;
+    box-shadow: 0px 0px 20px 0px black;
+}
+
+.panel {
+   border-top: 0px;
+}
+
+.panel.info {
+    border: 0;
+    border-left: 2px solid #03dc03;
+    border-right: 2px solid #03dc03;
+    border-bottom: 2px solid #03dc03;
+}
+
+.options {
+    padding-left: 10px;
+}
+
+.video-js .vjs-loading-spinner {
+    border-color: #03dc03;
+}
+
+.video-js .vjs-control:focus:before, .video-js .vjs-control:hover:before {
+    text-shadow: 0 0 0.8em #03dc03, 0 0 0.8em #03dc03, 0 0 0.8em #03dc03;
+}
+
+.video-js .vjs-control:focus:before, .video-js .vjs-control:hover:before, .video-js .vjs-control:focus {
+    text-shadow: 0 0 1em #03dc03;
+}
+
+.video-js .vjs-control-bar {
+    background-color: rgba(4, 4, 4, 0.82) !important;
+    color: #ffffff;
+    font-size: 12px;
+}
+
+.video-js .vjs-control-bar {
+    background-color: rgba(4, 4, 4, 0.82) !important;
+    color: #ffffff;
+    font-size: 12px;
+}
+
+i.fa.fa-cog {
+    display: none;
+}
+
+.options {
+    display: flex;
+    justify-content: center;
+    padding: 10px;
+}
+
+.video-js .vjs-play-progress, .video-js .vjs-volume-level {
+    background-color: #03dc03;
+    box-shadow: 0 0 20px 0px #01de01;
+}
+
+.video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus, .video-js .vjs-big-play-button:active {
+    background-color: #00df00;
+    box-shadow: 0 0 10px 0px #00df00;
+}
+
+.video-js.vjs-fullscreen, .video-js.vjs-fullscreen .vjs-tech {
+    margin-bottom: 0 !important;
+    margin-top: 0 !important;
+}

public/s/css/vsg-skin.css

@@ -0,0 +1,276 @@
+.video-js .vjs-menu-button-inline.vjs-slider-active,.video-js .vjs-menu-button-inline:focus,.video-js .vjs-menu-button-inline:hover,.video-js.vjs-no-flex .vjs-menu-button-inline {
+    width: 10em
+}
+
+.video-js .vjs-controls-disabled .vjs-big-play-button {
+    display: none!important
+}
+
+.video-js .vjs-control {
+    width: 3em
+}
+
+.video-js .vjs-menu-button-inline:before {
+    width: 1.5em
+}
+
+.vjs-menu-button-inline .vjs-menu {
+    left: 3em
+}
+
+.vjs-paused.vjs-has-started.video-js .vjs-big-play-button,.video-js.vjs-ended .vjs-big-play-button,.video-js.vjs-paused .vjs-big-play-button {
+    display: block
+}
+
+.video-js .vjs-load-progress div,.vjs-seeking .vjs-big-play-button,.vjs-waiting .vjs-big-play-button {
+    display: none!important
+}
+
+.video-js .vjs-mouse-display:after,.video-js .vjs-play-progress:after {
+    padding: 0 .4em .3em
+}
+
+.video-js.vjs-ended .vjs-loading-spinner {
+    display: none;
+}
+
+.video-js.vjs-ended .vjs-big-play-button {
+    display: block !important;
+}
+
+.video-js *,.video-js:after,.video-js:before {
+    box-sizing: inherit;
+    font-size: inherit;
+    color: inherit;
+    line-height: inherit
+}
+
+.video-js.vjs-fullscreen,.video-js.vjs-fullscreen .vjs-tech {
+    width: 100%!important;
+    height: 100%!important
+}
+
+.video-js {
+    font-size: 14px;
+    overflow: hidden
+}
+
+.video-js .vjs-control {
+    color: inherit
+}
+
+.video-js .vjs-menu-button-inline:hover,.video-js.vjs-no-flex .vjs-menu-button-inline {
+    width: 8.35em
+}
+
+.video-js .vjs-volume-menu-button.vjs-volume-menu-button-horizontal:hover .vjs-menu .vjs-menu-content {
+    height: 3em;
+    width: 6.35em
+}
+
+.video-js .vjs-control:focus:before,.video-js .vjs-control:hover:before {
+    text-shadow: 0 0 1em #fff,0 0 1em #fff,0 0 1em #fff
+}
+
+.video-js .vjs-spacer,.video-js .vjs-time-control {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-flex: 1 1 auto;
+    -moz-box-flex: 1 1 auto;
+    -webkit-flex: 1 1 auto;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto
+}
+
+.video-js .vjs-time-control {
+    -webkit-box-flex: 0 1 auto;
+    -moz-box-flex: 0 1 auto;
+    -webkit-flex: 0 1 auto;
+    -ms-flex: 0 1 auto;
+    flex: 0 1 auto;
+    width: auto
+}
+
+.video-js .vjs-time-control.vjs-time-divider {
+    width: 14px
+}
+
+.video-js .vjs-time-control.vjs-time-divider div {
+    width: 100%;
+    text-align: center
+}
+
+.video-js .vjs-time-control.vjs-current-time {
+    margin-left: 1em
+}
+
+.video-js .vjs-time-control .vjs-current-time-display,.video-js .vjs-time-control .vjs-duration-display {
+    width: 100%
+}
+
+.video-js .vjs-time-control .vjs-current-time-display {
+    text-align: right
+}
+
+.video-js .vjs-time-control .vjs-duration-display {
+    text-align: left
+}
+
+.video-js .vjs-play-progress:before,.video-js .vjs-progress-control .vjs-play-progress:before,.video-js .vjs-remaining-time,.video-js .vjs-volume-level:after,.video-js .vjs-volume-level:before,.video-js.vjs-live .vjs-time-control.vjs-current-time,.video-js.vjs-live .vjs-time-control.vjs-duration,.video-js.vjs-live .vjs-time-control.vjs-time-divider,.video-js.vjs-no-flex .vjs-time-control.vjs-remaining-time {
+    display: none
+}
+
+.video-js.vjs-no-flex .vjs-time-control {
+    display: table-cell;
+    width: 4em
+}
+
+.video-js .vjs-progress-control {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: .5em;
+    top: -.5em
+}
+
+.video-js .vjs-progress-control .vjs-load-progress,.video-js .vjs-progress-control .vjs-play-progress,.video-js .vjs-progress-control .vjs-progress-holder {
+    height: 100%
+}
+
+.video-js .vjs-progress-control .vjs-progress-holder {
+    margin: 0
+}
+
+.video-js .vjs-progress-control:hover {
+    height: 1.5em;
+    top: -1.5em
+}
+
+.video-js .vjs-control-bar {
+    -webkit-transition: -webkit-transform .1s ease 0s;
+    -moz-transition: -moz-transform .1s ease 0s;
+    -ms-transition: -ms-transform .1s ease 0s;
+    -o-transition: -o-transform .1s ease 0s;
+    transition: transform .1s ease 0s
+}
+
+.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active .vjs-control-bar,.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive .vjs-control-bar,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active .vjs-control-bar,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar,.video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar {
+    visibility: visible;
+    opacity: 1;
+    -webkit-backface-visibility: hidden;
+    -webkit-transform: translateY(3em);
+    -moz-transform: translateY(3em);
+    -ms-transform: translateY(3em);
+    -o-transform: translateY(3em);
+    transform: translateY(3em);
+    -webkit-transition: -webkit-transform 1s ease 0s;
+    -moz-transition: -moz-transform 1s ease 0s;
+    -ms-transition: -ms-transform 1s ease 0s;
+    -o-transition: -o-transform 1s ease 0s;
+    transition: transform 1s ease 0s
+}
+
+.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-progress-control,.video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-progress-control {
+    height: .25em;
+    top: -.25em;
+    pointer-events: none;
+    -webkit-transition: height 1s,top 1s;
+    -moz-transition: height 1s,top 1s;
+    -ms-transition: height 1s,top 1s;
+    -o-transition: height 1s,top 1s;
+    transition: height 1s,top 1s
+}
+
+.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active.vjs-fullscreen .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive.vjs-fullscreen .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active.vjs-fullscreen .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive.vjs-fullscreen .vjs-progress-control,.video-js.vjs-has-started.vjs-playing.vjs-user-inactive.vjs-fullscreen .vjs-progress-control {
+    opacity: 0;
+    -webkit-transition: opacity 1s ease 1s;
+    -moz-transition: opacity 1s ease 1s;
+    -ms-transition: opacity 1s ease 1s;
+    -o-transition: opacity 1s ease 1s;
+    transition: opacity 1s ease 1s
+}
+
+.video-js.vjs-live .vjs-live-control {
+    margin-left: 1em
+}
+
+.video-js .vjs-big-play-button {
+    top: 50%;
+    left: 50%;
+    margin-left: -1em;
+    margin-top: -1em;
+    width: 2em;
+    height: 2em;
+    line-height: 2em;
+    border: none;
+    border-radius: 50%;
+    font-size: 3.5em;
+    background-color: rgba(0,0,0,.45);
+    color: #fff;
+    -webkit-transition: border-color .4s,outline .4s,background-color .4s;
+    -moz-transition: border-color .4s,outline .4s,background-color .4s;
+    -ms-transition: border-color .4s,outline .4s,background-color .4s;
+    -o-transition: border-color .4s,outline .4s,background-color .4s;
+    transition: border-color .4s,outline .4s,background-color .4s
+}
+
+.video-js .vjs-menu-button-popup .vjs-menu {
+    left: -3em
+}
+
+.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+    background-color: transparent;
+    width: 12em;
+    left: -1.5em;
+    padding-bottom: .5em
+}
+
+.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item,.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-title {
+    background-color: #151b17;
+    margin: .3em 0;
+    padding: .5em;
+    border-radius: .3em
+}
+
+.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item.vjs-selected {
+    background-color: #2483d5
+}
+
+.video-js .vjs-big-play-button {
+    background-color: rgba(0,0,0,0.5);
+    font-size: 2.5em;
+    border-radius: 20%;
+    height: 1.4em !important;
+    line-height: 1.4em !important;
+    margin-top: -0.7em !important
+}
+
+.video-js:hover .vjs-big-play-button,.video-js .vjs-big-play-button:focus,.video-js .vjs-big-play-button:active {
+    background-color: #99ff00
+}
+
+.video-js .vjs-loading-spinner {
+    border-color: #99ff00
+}
+
+.video-js .vjs-control-bar2 {
+    background-color: #262626
+}
+
+.video-js .vjs-control-bar {
+    background-color: #262626 !important;
+    color: #ffffff;
+    font-size: 12px
+}
+
+.video-js .vjs-play-progress,.video-js  .vjs-volume-level {
+    background-color: #99ff00
+}
+
+.video-js .vjs-load-progress {
+    background: rgba(255,255,255,0.3);
+}

public/s/css/x34.css

@@ -0,0 +1,88 @@
+@import url('https://fonts.googleapis.com/css?family=Orbitron');
+
+body {
+	background: black;
+  	font-family: 'Orbitron', sans-serif;
+}
+
+.navbar, .return {
+	background-color: #000000;
+    border-bottom: 2px solid #f50083;
+  	box-shadow: 0px -2px 20px #f600c1;
+}
+
+img.van {
+    width: 171px;
+    height: 28px;
+    background-image: url(/s/img/x34_f0ck_logo.png);
+    background-position: 0px -1px;
+    border: 1px solid transparent;
+    background-repeat: no-repeat;
+}
+
+a, a:hover {
+    color: #f50083;
+    text-shadow: 0px 0px 10px #f50083;
+}
+
+.thumb {
+    box-shadow: 0 0 10px #f50083;
+    border: 2px solid #f50083;
+}
+
+.return {
+    margin-top: -50px;
+}
+
+.controls {
+    margin-top: 50px;
+    background: #050505;
+    border: 1px solid #f50083;
+}
+
+.wrapper {
+    border-left: 1px solid #f50083;
+border-right: 1px solid #f50083;
+}
+
+.panel.info {
+    border: 1px solid #f50083;
+}
+
+.medium, .thumbnail {
+	background: #050505;
+}
+
+.panel {
+    background-color: #050505;
+}
+
+.id {
+    background: #000000;
+    border: 1px solid #f50083;
+}
+
+a#next, a#prev {
+	color: #f50083;
+}
+
+.id > a {
+    color: #f50083;
+}
+
+input, select, textarea {
+    background: #000000;
+    font-family: 'Orbitron', sans-serif;
+}
+
+.video-js .vjs-play-progress, .video-js .vjs-volume-level {
+    background-color: #f50083;
+}
+
+.video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus, .video-js .vjs-big-play-button:active {
+    background-color: #f50083;
+}
+
+.video-js .vjs-control-bar {
+    background-color: #000000 !important;
+}

public/s/img/plyr.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="plyr-captions-off" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd" fill-opacity=".5"/></symbol><symbol id="plyr-captions-on" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd"/></symbol><symbol id="plyr-enter-fullscreen" viewBox="0 0 18 18"><path d="M10 3h3.6l-4 4L11 8.4l4-4V8h2V1h-7zM7 9.6l-4 4V10H1v7h7v-2H4.4l4-4z"/></symbol><symbol id="plyr-exit-fullscreen" viewBox="0 0 18 18"><path d="M1 12h3.6l-4 4L2 17.4l4-4V17h2v-7H1zM16 .6l-4 4V1h-2v7h7V6h-3.6l4-4z"/></symbol><symbol id="plyr-fast-forward" viewBox="0 0 18 18"><path d="M7.875 7.171L0 1v16l7.875-6.171V17L18 9 7.875 1z"/></symbol><symbol id="plyr-muted" viewBox="0 0 18 18"><path d="M12.4 12.5l2.1-2.1 2.1 2.1 1.4-1.4L15.9 9 18 6.9l-1.4-1.4-2.1 2.1-2.1-2.1L11 6.9 13.1 9 11 11.1zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol><symbol id="plyr-pause" viewBox="0 0 18 18"><path d="M6 1H3c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM12 1c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1h-3z"/></symbol><symbol id="plyr-play" viewBox="0 0 18 18"><path d="M15.562 8.1L3.87.225C3.052-.337 2 .225 2 1.125v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"/></symbol><symbol id="plyr-restart" viewBox="0 0 18 18"><path d="M9.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C6 2.6 4.9 3.2 4 4.1 1.3 6.8 1.3 11.2 4 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L16 1.9l-6.3-.7z"/></symbol><symbol id="plyr-rewind" viewBox="0 0 18 18"><path d="M10.125 1L0 9l10.125 8v-6.171L18 17V1l-7.875 6.171z"/></symbol><symbol id="plyr-volume" viewBox="0 0 18 18"><path d="M15.6 3.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4C15.4 5.9 16 7.4 16 9c0 1.6-.6 3.1-1.8 4.3-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7z"/><path d="M11.282 5.282a.909.909 0 0 0 0 1.316c.735.735.995 1.458.995 2.402 0 .936-.425 1.917-.995 2.487a.909.909 0 0 0 0 1.316c.145.145.636.262 1.018.156a.725.725 0 0 0 .298-.156C13.773 11.733 14.13 10.16 14.13 9c0-.17-.002-.34-.011-.51-.053-.992-.319-2.005-1.522-3.208a.909.909 0 0 0-1.316 0zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol></svg>

public/s/js/scroller.js

@@ -0,0 +1,21 @@
+let load = false;
+(() => {
+  const posts = document.querySelector("#posts");
+  document.addEventListener("wheel", e => {
+    if((((document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop + window.innerHeight) + 310
+      >= ((document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight)) && !load) {
+      load = true;
+      fetch(`./api/p/${posts.dataset.last}`)
+        .then(res => res.json())
+        .then((msg, html = "") => {
+          for(let i = 0; i < msg.items.length; i++)
+            if(msg.items[i].id)
+              html += `<li class="post"><a href="./${msg.items[i].id}" title="${msg.items[i].mime}"><img class="thumb" src="./t/${msg.items[i].id}.png" /></a></li>\n`;
+          posts.insertAdjacentHTML("beforeend", html);
+          posts.dataset.last = msg.last;
+          load = false;
+        })
+        .catch(err => console.log(err));
+    }
+  });
+})();

public/s/js/shit.js

@@ -0,0 +1,25 @@
+const clickOnElementBinding = selector => () => (elem = document.querySelector(selector))?elem.click():null;
+
+const keybindings = {
+  "ArrowLeft": clickOnElementBinding("#next"),
+  "ArrowRight": clickOnElementBinding("#prev"),
+  "r": clickOnElementBinding("#random")
+};
+
+(() => {
+  document.addEventListener("keydown", e => {
+    if(e.key in keybindings) {
+      e.preventDefault();
+      keybindings[e.key]();
+    }
+  });
+
+  const f0ckimage = document.querySelector("#f0ck-image");
+  if(f0ckimage) {
+    f0ckimage.addEventListener("click", e => {
+      e.preventDefault();
+      f0ckimage.hasAttribute("style")?f0ckimage.removeAttribute("style"):f0ckimage.setAttribute("style", "max-height: unset;");
+    });
+  }
+})();
+//sorry, jQuery ist dumm :--D sorry sirx, dass ich wonnes Kot auskommentiert habe

public/s/js/theme.js

@@ -0,0 +1,98 @@
+/* Thanks to StephenLynx, I modified his Theme Changer from the Penumbra Lynx Frontend for the Lynxchan Software https://gitgud.io/LynxChan/LynxChan and reused it to make f0ck a nicer place. */
+var themes = [ {
+  file : 'f0ck95.css',
+  label : 'f0ck95',
+  id : 'f0ck95'
+}];
+
+let interval = null;
+const clocklol = () => {
+  const l = document.querySelector("body");
+  if(localStorage.selectedTheme && localStorage.selectedTheme === "f0ck95")
+    interval = setInterval((d = new Date()) => l.setAttribute("data-clock", d.toLocaleTimeString()), 1e3);
+  else {
+    clearInterval(interval);
+    l.removeAttribute("data-clock");
+  }
+};
+
+const speaker = () => {
+  const k = document.querySelector("body");
+  if(localStorage.selectedTheme && localStorage.selectedTheme === "f0ck95")
+    k.document.createElement("div");
+  else {
+    return;
+  }
+};
+
+var customCss;
+var addedTheme;
+function updateCss() {
+  if (addedTheme) {
+    addedTheme.parentNode.removeChild(addedTheme);
+    addedTheme = null;
+  }
+  for (var i = 0; i < themes.length; i++) {
+    var theme = themes[i];
+    if (theme.id === localStorage.selectedTheme) {
+      addedTheme = theme.element;
+      document.head.insertBefore(theme.element, customCss);
+    }
+  }
+}
+for (var i = 0; i < document.head.children.length; i++) {
+  var element = document.head.children[i];
+  if (element.rel === 'stylesheet' && element.href.indexOf('/css/custom.css') > -1) {
+    customCss = element;
+    break;
+  }
+}
+for (var i = 0; i < themes.length; i++) {
+  themes[i].element = document.createElement('link');
+  themes[i].element.type = 'text/css';
+  themes[i].element.rel = 'stylesheet';
+  themes[i].element.href = './s/css/' + themes[i].file;
+}
+
+clocklol();
+updateCss();
+var postingLink = document.getElementById('themes');
+if (postingLink) {
+  var divider = document.createElement('span');
+  divider.style = ('display: none;');
+  divider.innerHTML = '';
+  var referenceNode = postingLink.nextSibling;
+  postingLink.parentNode.insertBefore(divider, referenceNode);
+  var themeSelector = document.createElement('select');
+  themeSelector.id = 'themeSelector';
+  var vanillaOption = document.createElement('option');
+  vanillaOption.innerHTML = 'Default';
+  themeSelector.appendChild(vanillaOption);
+  for (i = 0; i < themes.length; i++) {
+    var theme = themes[i];
+    var themeOption = document.createElement('option');
+    themeOption.innerHTML = theme.label;
+    if (theme.id === localStorage.selectedTheme) {
+      themeOption.selected = true;
+    }
+    themeSelector.appendChild(themeOption);
+  }
+  themeSelector.onchange = function() {
+    if (!themeSelector.selectedIndex) {
+      if (localStorage.selectedTheme) {
+        delete localStorage.selectedTheme;
+        clocklol();
+        updateCss();
+      }
+      return;
+    }
+    var selectedTheme = themes[themeSelector.selectedIndex - 1];
+    if (selectedTheme.id === localStorage.selectedTheme) {
+      return;
+    }
+    localStorage.selectedTheme = selectedTheme.id;
+    clocklol();
+    updateCss();
+  };
+  postingLink.parentNode.insertBefore(themeSelector, referenceNode);
+}

public/s/js/videojs.persistvolume.js

@@ -0,0 +1,123 @@
+"use strict";
+(function(factory){
+  /*!
+   * Custom Universal Module Definition (UMD)
+   *
+   * Video.js will never be a non-browser lib so we can simplify UMD a bunch and
+   * still support requirejs and browserify. This also needs to be closure
+   * compiler compatible, so string keys are used.
+   */
+  if (typeof define === 'function' && define['amd']) {
+    define(['./video'], function(vjs){ factory(window, document, vjs) });
+  // checking that module is an object too because of umdjs/umd#35
+  } else if (typeof exports === 'object' && typeof module === 'object') {
+    factory(window, document, require('video.js'));
+  } else {
+    factory(window, document, videojs);
+  }
+
+})(function(window, document, vjs) {
+  //cookie functions from https://developer.mozilla.org/en-US/docs/DOM/document.cookie
+  var
+  getCookieItem = function(sKey) {
+    if (!sKey || !hasCookieItem(sKey)) { return null; }
+    var reg_ex = new RegExp(
+      "(?:^|.*;\\s*)" +
+      window.escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") +
+      "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"
+    );
+    return window.unescape(document.cookie.replace(reg_ex,"$1"));
+  },
+
+  setCookieItem = function(sKey, sValue, vEnd, sPath, sDomain, bSecure) {
+    if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return; }
+    var sExpires = "";
+    if (vEnd) {
+      switch (vEnd.constructor) {
+        case Number:
+          sExpires = vEnd === Infinity ? "; expires=Tue, 19 Jan 2038 03:14:07 GMT" : "; max-age=" + vEnd;
+          break;
+        case String:
+          sExpires = "; expires=" + vEnd;
+          break;
+        case Date:
+          sExpires = "; expires=" + vEnd.toGMTString();
+          break;
+      }
+    }
+    document.cookie =
+      window.escape(sKey) + "=" +
+      window.escape(sValue) +
+      sExpires +
+      (sDomain ? "; domain=" + sDomain : "") +
+      (sPath ? "; path=" + sPath : "") +
+      (bSecure ? "; secure" : "");
+  },
+
+  hasCookieItem = function(sKey) {
+    return (new RegExp(
+      "(?:^|;\\s*)" +
+      window.escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") +
+      "\\s*\\=")
+    ).test(document.cookie);
+  },
+
+  hasLocalStorage = function() {
+    try {
+      window.localStorage.setItem('persistVolume', 'persistVolume');
+      window.localStorage.removeItem('persistVolume');
+      return true;
+    } catch(e) {
+      return false;
+    }
+  },
+  getStorageItem = function(key) {
+    return hasLocalStorage() ? window.localStorage.getItem(key) : getCookieItem(key);
+  },
+  setStorageItem = function(key, value) {
+    return hasLocalStorage() ? window.localStorage.setItem(key, value) : setCookieItem(key, value, Infinity, '/');
+  },
+
+  extend = function(obj) {
+    var arg, i, k;
+    for (i = 1; i < arguments.length; i++) {
+      arg = arguments[i];
+      for (k in arg) {
+        if (arg.hasOwnProperty(k)) {
+          obj[k] = arg[k];
+        }
+      }
+    }
+    return obj;
+  },
+
+  defaults = {
+    namespace: ""
+  },
+
+  volumePersister = function(options) {
+    var player = this;
+    var settings = extend({}, defaults, options || {});
+
+    var key = settings.namespace + '-' + 'volume';
+    var muteKey = settings.namespace + '-' + 'mute';
+
+    player.on("volumechange", function() {
+      setStorageItem(key, player.volume());
+      setStorageItem(muteKey, player.muted());
+    });
+
+    var persistedVolume = getStorageItem(key);
+    if(persistedVolume !== null){
+      player.volume(persistedVolume);
+    }
+
+    var persistedMute = getStorageItem(muteKey);
+    if(persistedMute !== null){
+      player.muted('true' === persistedMute);
+    }
+  };
+
+  vjs.plugin("persistvolume", volumePersister);
+
+});