Re-add titlebar to memories, stylize buttons and change arrows

memories.html

@@ -22,8 +22,9 @@
     <div class="window">
         <div class="wrapper">
             <div class="memoriesBox" id="memoriesBox"></div>
-                <button id="prev">&lt;</button>
-                <button id="next">&gt;</button>
+            <div class="window_titlebar"><h3>memories.exe</h3></div>
+                <button id="prev">◄</button>
+                <button id="next">►</button>
             <script src="/js/memories.js" type="module"></script>
             </div>  
         </div>

styles/style_buttons.css

@@ -3,6 +3,17 @@
 
 /* Buttons */
 
+button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+
+    background: #c3c3c3;
+    box-shadow: inset -1px -1px black;
+
+    min-height: 30px;
+    min-width: 30px;
+}
 input {
     -webkit-appearance: none;
     appearance: none;

styles/style_main.css

@@ -57,12 +57,12 @@ div.window {
     position: relative;
     border-style: ridge;
     border-width: 5px;
-    border-color: #c3c3c3;
+    border-color: #e9e9e9;
     
     width: 60vw;
     padding: 10px;
     align-self: center;
-    background-color: white;
+    background-color: #e9e9e9;
 }