CSS styling for login page and register page

app/(auth)/login/page.js

@@ -61,6 +61,9 @@ export default function Login() {
 
   return (
     <div className="auth-page">
+      {/* Decorative square */}
+      <div className="decorative-square"></div>
+
       <div className="auth-container">
         <div className="auth-card">
           <h2>Login to Treasure Hunt</h2>
@@ -143,6 +146,29 @@ export default function Login() {
           margin-bottom: 10px;
           font-size: 0.875rem;
         }
+        .decorative-square {
+          position: absolute;
+          top: calc(50% - 265px);
+          left: calc(50% - 250px);
+          width: 150px;
+          height: 150px;
+          background-image: url("/images/parrot.svg");
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+          border-radius: 4px;
+          z-index: 2;
+        }
+        .auth-page {
+          display: flex;
+          flex-direction: column;
+          min-height: 100vh;
+          background-color: #f4e9dc;
+          background-image: url("/images/decor.svg");
+          background-size: auto 100%;
+          background-repeat: repeat-x;
+          background-position: center;
+        }
       `}</style>
     </div>
   );