Basic account favorites card styled

ProjectSourceCode/src/resources/css/login-and-registration/account.css

@@ -1,3 +1,35 @@
 #account-pane {
     display: none;
 }
+
+#account-pane-content-container {
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+}
+
+#account-header-container {
+    padding: 10px;
+    font-size: 32px;
+    border-bottom: 3px solid red;
+}
+
+#login-form-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.favorite-teams-card {
+    display: flex;
+
+    border: 1px solid black;
+    border-radius: 12px;
+
+    padding: 10px 90px;
+
+    margin: 10px 0;
+
+    img {
+        width: 40px;
+    }
+}

ProjectSourceCode/src/views/partials/navigation-bar/user-menu/account-screen.hbs

@@ -1,17 +1,25 @@
 <!-- Linking forms.css -->
 <div class="account-portal-container" id="account-pane">
 
-    <div class="form-container" id="login-form">
+    <div id="account-pane-content-container">
-        <a id="username">Username: {{user.username}}</a>
 
+        <div id="account-header-container">
+            <a id="username">Hello, {{user.username}}</a>
+        </div>
+
+        <div id="login-form-container" class="form-container">
             <a style="text-decoration: underline;">Favorite Teams:</a> <br>
 
             {{#each fav_teams}}
+                <div class="favorite-teams-card">
                     <img id="teamlogo" src="{{this.teamlogo}}" alt="teamlogo">
                     <span>{{this.teamname}}</span> <br>
+                </div>
             {{/each}}            
 
             <a class="account-portal-button" id="logout-button" href="/logout">Logout</a>
         </div>
 
+    </div>
+
 </div>