Setting force window default size, min size and adding real window buttons

index.html

@@ -12,9 +12,7 @@
   <header>
     <div>LinkUp</div>
     <div class="window-controls">
-      <button id="minimize-button">-</button>
+      <pear-ctrl></pear-ctrl>
-      <button id="maximize-button">+</button>
-      <button id="close-button">x</button>
     </div>
   </header>
   <main>

package.json

@@ -7,8 +7,10 @@
     "type": "desktop",
     "gui": {
       "backgroundColor": "#1F2430",
-      "height": 540,
+      "height": 547,
-      "width": 720
+      "minWidth": 955,
+      "minHeight": 547,
+      "width": 955
     }
   },
   "license": "Apache-2.0",

style.css

@@ -12,6 +12,26 @@ body {
     transition: background-color 0.3s ease, color 0.3s ease;
 }
 
+.pear-ctrl {
+    margin-top: 9px;
+    margin-right: 15px; /* Ensure this is as desired */
+    position: fixed; /* Ensures it stays relative to the viewport */
+    right: 13px; /* Ensures it stays 13px from the right edge */
+    top: 0; /* Keeps it at the top of the viewport */
+}
+
+.pear-ctrl:after {
+    content: '';
+    display: block;
+    height: 1.8rem;
+    position: fixed;
+    z-index: -1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    background-color: #B0D94413;
+    filter: drop-shadow(2px 10px 6px #888);
+}
 main {
     display: flex;
     flex: 1;