Improve styles - WIP

fe/src/App.css

@@ -31,6 +31,7 @@ body {
 header {
   width: calc(100vw - 30px);
   margin: 0 auto;
+  display: flex;
 }
 
 main {
@@ -39,9 +40,10 @@ main {
 }
 
 h1 {
-  font-size: 3.2em;
+  font-size: 1.8em;
   line-height: 1.1;
-  margin: 0 0 15px;
+  margin: 0;
+  padding: 8px 0;
   background: linear-gradient(to bottom right, var(--color-primary), var(--color-secondary));
   color: linear-gradient(to bottom right, var(--color-primary), var(--color-secondary));
   -webkit-background-clip: text;
@@ -56,8 +58,8 @@ h1 {
 .logo {
   will-change: filter;
   transition: filter 300ms;
-  transform: translateY(7px);
-  margin-right: 5px;
+  transform: translateY(4px);
+  margin-right: 2px;
 }
 
 h1:hover {
@@ -90,6 +92,14 @@ h1:hover {
   color: #888;
 }
 
-.app-container {
+.search-bar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  max-width: calc(50% + 15px);
 
+  input {
+    font-size: 17px;
+  }
 }

fe/src/App.tsx

@@ -19,7 +19,7 @@ function App() {
     <div onClick={handleBackgroundClick} className="app-container">
       <header>
         <h1>
-          <img src={jellyfin} className="logo" alt="Jellyfin logo" height="50px" width="50px" />
+          <img src={jellyfin} className="logo" alt="Jellyfin logo" height="28px" width="28px" />
           Wishlist
         </h1>
         <Search