added swirl decor to login and create account

src/main/resources/static/css/create-account.css

@@ -61,20 +61,35 @@ body, html {
 
 
 /* Main Content */
+.align-decor {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
 .main-content {
   flex-grow: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-top: 40px;}
+  margin-top: 40px;
+}
   
-/* Login Box */
+.vert_swirl {
+  height: 65%;
+  width: auto;
+  margin: 0 50px;
+}
+
+/* Create Account Box */
 .login-box {
   background-color: var(--peach);
   padding: 45px;
   border-radius: 20px;
-  width: 600px;
+  width: 80%;
   color: var(--dark);
 }
 

src/main/resources/static/css/login.css

@@ -75,6 +75,14 @@ html {
 /* =========================
    Main Content Area
 ========================= */
+.align-decor {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+   justify-content: center;
+  align-items: center;
+}
+
 .main-content {
   display: flex;
   flex-direction: column;
@@ -85,6 +93,12 @@ html {
   margin-top: 40px;
 }
 
+.vert_swirl {
+  height: 65%;
+  width: auto;
+  margin: 0 50px;
+}
+
 /* =========================
    Login Box
 ========================= */

src/main/resources/templates/create-account.html

@@ -14,6 +14,10 @@
     <img th:src="@{images/header_right.png}" alt="Violin f-hole shape to the right of header." class="swirl">
 </header>
 
+<div class="align-decor">
+  <!-- Decor Left -->
+  <img th:src="@{images/decor_left.png}" alt="Violin f-hole shape to the left of header." class="vert_swirl">
+
 <!-- Main Content -->
 <main class="main-content">
     <div class="login-box">
@@ -42,6 +46,11 @@
         </form>
     </div>
 </main>
+
+<!-- Decor Right -->
+    <img th:src="@{images/decor_right.png}" alt="Violin f-hole shape to the left of header." class="vert_swirl">
+    </div>
+
 </body>
 </html>
 

src/main/resources/templates/login.html

@@ -15,6 +15,10 @@
 
   </header>
   
+  <div class="align-decor">
+  <!-- Decor Left -->
+  <img th:src="@{images/decor_left.png}" alt="Violin f-hole shape to the left of header." class="vert_swirl">
+
     <!-- Main Content -->
     <main class="main-content">
       <div class="login-box">
@@ -37,5 +41,10 @@
         <h3> OR <a th:href="@{/register}"><b>SIGN UP</b></a> FOR AN ACCOUNT </h3>
       </div>
     </main>
+    
+    <!-- Decor Right -->
+    <img th:src="@{images/decor_right.png}" alt="Violin f-hole shape to the left of header." class="vert_swirl">
+    </div>
+    
   </body>
 </html>