overhauling next and prev usage

public/s/css/f0ck-custom.css

@@ -273,3 +273,66 @@ a#rndbtn {
     border-bottom: 1px solid #1b1b1b;
     padding: 5px;
 }
+
+/* Testing Area */
+.content {
+    position: relative;
+}
+
+a#next {
+    top: 0;
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    background: transparent;
+    width: 40%;
+    height: 95%;
+}
+
+a#prev {
+    position: absolute;
+    z-index: 1;
+    right: 0;
+    background: transparent;
+    width: 40%;
+    height: 95%;
+}
+
+.vjs-control-bar {
+    z-index: 2;
+}
+
+.arrow-prev {
+    height: 100%;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: end;
+}
+
+.arrow-next {
+    height: 100%;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: start;
+}
+
+
+a#next:hover {
+    opacity: 1;
+    box-shadow: none;
+}
+
+a#next {
+    opacity: 0.2;
+}
+
+a#prev:hover {
+    opacity: 1;
+    box-shadow: none;
+}
+
+a#prev {
+    opacity: 0.2;
+}

views/item.html

@@ -6,7 +6,9 @@
     <div class="content">
       <div class="next-post">
         {{if next}}
-        <a id="next" href="/{{=next}}">«</a>
+        <a id="next" href="/{{=next}}">
+		<div class="arrow-next">«</div>
+	</a>
         {{else}}
         <a id="next" href="#" style="color: #ccc !important;">«</a>
         {{/if}}
@@ -31,7 +33,9 @@
       </div>
       <div class="previous-post">
         {{if prev}}
-        <a id="prev" href="/{{=prev}}">»</a>
+        <a id="prev" href="/{{=prev}}">
+		<div class="arrow-prev">»</div>
+	</a>
         {{else}}
         <a id="prev" href="#" style="color: #ccc !important;">»</a>
         {{/if}}