colors and formatting ready for demo

demo/css/home.css

@@ -1,8 +1,18 @@
+:root {
+  --dusty-red: #D43F3F;
+  --dusty-red-hover: #C73636;
+  --dark-yellow: #FFD27F;
+  --pale-yellow: #FFECB3;
+  --peach: #F5A96E;
+  --dark: #850000;
+}
+
+/* login.css */
 body, html {
-  background-attachment: fixed; 
   height: 100%;
   margin: 0;
   font-family: 'Roboto', sans-serif;
+  background-color: var(--pale-yellow);
 }
 
 .container {
@@ -17,8 +27,8 @@ top: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #1f3d57;
+  background-color: var(--dusty-red);
-  color: white;
+  color: var(--dark-yellow);
   padding: 10px 20px;
   height: 60px;
  gap: 40px;
@@ -36,23 +46,27 @@ top: 0;
   letter-spacing: 4px;
   font-family: 'EB Garamond', serif;}
 
+
 /* Left Sidebar */
 .sidebar-left {
   overflow: hidden;
-  margin: 20px;
+  margin: 25px;
   position: fixed;
   border-radius: 20px;
   z-index: 10;
 
   width: 200px;
-  background-color: #38a7e8;
+  background-color: var(--peach);
-  color: white;
+  color: var(--dark);
-  padding: 20px;
+  padding: 6px;
-  font-size: 1.15em;
+  font-size: 1.75em;
+  font-weight: 900;
+  letter-spacing: 1.5px;
 
   display: flex;
   flex-direction: column;
-  justify-content: space-between; 
+  justify-content: flex-start; 
+  align-items: center;
 }
 
 .sidebar-left ul {
@@ -61,27 +75,44 @@ display: flex;
 }
 
 .sidebar-left li {
-  margin-bottom: 15px;
+  margin-bottom: 7px;
 }
 
 .sidebar-left a {
-  color: white;
+  color: var(--dark);
   text-decoration: none;
-  font-weight: bold;
+  transition: 0.1s ease;
 }
 
+.sidebar-left a:hover {
+  color: var(--dusty-red);
+}
+
+
 .sidebar-left .nav_icon {
   height: 40px;
   width: auto;
-  margin: 5 5px;
+  margin-top: 9px;
+  border-radius: 8px;
+  transition: transform 0.2s ease;
+  display: flex;
+}
+
+.sidebar-left .nav_icon:hover {
+  transform: scale(1.05);
 }
 
 /* Create Icon */
 .create_icon {
   position: fixed;
   bottom: 30px;
-    left: 60px;
+  left: 55px;
   z-index: 1000;
+  transition: transform 0.2s ease; 
+}
+
+.create_icon:hover {
+  transform: scale(1.02);
 }
 
 .create_icon img {
@@ -93,25 +124,26 @@ display: flex;
 
 /* Right Sidebar */
 .sidebar-right {
-overflow: hidden;
+  margin: 25px;
-  margin: 20px;
+  height: 75%;
-height: 70%;
   position: fixed;
   border-radius: 20px;
   z-index: 1;
 
 right: 0;
-overflow-x: hidden;
 
   width: 200px;
-  background-color: #38a7e8;
+  background-color: var(--peach);
-  color: white;
+  color: var(--dusty-red);
-  padding: 20px;
+  padding: 5px;
-  font-size: 1.15em;
+  font-size: 1.6em;
+  font-weight: 900;
+  letter-spacing: 1.5px;
 
   display: flex;
   flex-direction: column;
   justify-content: space-between; 
+  align-items: center;
 }
 
 .sidebar-right ul {
@@ -120,13 +152,12 @@ display: flex;
 }
 
 .sidebar-right li {
-  margin-bottom: 15px;
+  margin-bottom: 5px;
 }
 
 .sidebar-right a {
-  color: white;
+  color: var(--dusty-red);
   text-decoration: none;
-  font-weight: bold;
 }
 
 
@@ -135,15 +166,14 @@ display: flex;
   flex-grow: 0;
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: flex-start;
 margin-left: 300px;
 margin-right: 250px;
-margin-top: 0px;
+margin-top: 25px;
 }
 
 .recipe-card {
     display: flex;
-    flex-wrap: wrap;
     gap: 35px;
     justify-content: flex-start;
 }
@@ -155,7 +185,7 @@ margin-top: 0px;
     
     flex: 0.2 0.2 260px;
     max-width: 300px;
-    background: orange;
+    background: var(--peach);
     border-radius: 12px;
     padding: 20px;
 }

demo/css/login.css

@@ -1,9 +1,18 @@
+:root {
+  --dusty-red: #D43F3F;
+  --dusty-red-hover: #C73636;
+  --dark-yellow: #FFD27F;
+  --pale-yellow: #FFECB3;
+  --peach: #F5A96E;
+  --dark: #850000;
+}
+
 /* login.css */
 body, html {
-  background-attachment: fixed; 
   height: 100%;
   margin: 0;
   font-family: 'Roboto', sans-serif;
+  background-color: var(--pale-yellow);
 }
 
 .container {
@@ -13,23 +22,25 @@ body, html {
 
 /* Header Styles */
 .top-header {
+  position: sticky;
+  top: 0;
   display: flex;
   align-items: center;
-  background-color: #1f3d57;
+  justify-content: center;
-  color: white;
+  background-color: var(--dusty-red);
+  color: var(--dark-yellow);
   padding: 10px 20px;
   height: 60px;
+ gap: 40px;
 }
 
-.top-header .logo {
+.top-header .swirl {
   height: 40px;
   width: auto;
-  margin-right: 15px;
+  margin: 0 20px;
 }
 
 .site-name {
-position: absolute;
-  left: 50%;
   font-size: 2.5em;
   font-weight: bold;
   letter-spacing: 4px;
@@ -38,20 +49,20 @@ position: absolute;
 
 /* Main Content */
 .main-content {
-  flex: 1;
+  flex-grow: 0;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-}
+  margin-top: 40px;}
 
 /* Login Box */
 .login-box {
-  background-color: #1f3d57;
+  background-color: var(--peach);
   padding: 45px;
-  border-radius: 8px;
+  border-radius: 20px;
-  box-shadow: 0 0 10px rgba(0,0,0,0.2);
+  width: 400px;
-  width: 300px;
+  color: var(--dark);
-  color: #38a7e8;
 }
 
 .login-box h2 {
@@ -64,18 +75,23 @@ font-weight: bold;
 }
 
 .login-box label {
+  font-size: 20px;
   display: block;
-  margin-top: 10px;
+  width: 90%;
+  margin: 10px;
   font-weight: bold;
 }
 
 .login-box input {
-  align-items: center;
+  display: block;
-  width: 100%;
+  width: 90%;
   padding: 10px;
+  margin: auto;
   margin-top: 5px;
-  border-radius: 3px;
+  border-radius: 10px;
-  border: 1px solid #ccc;
+  border: 2.5px solid var(--dusty-red);
+  background-color: var(--pale-yellow);
+  font-size: 20px;
   box-sizing: border-box;
 }
 
@@ -85,14 +101,33 @@ font-weight: bold;
   width: 40%;
   padding: 10px;
   margin-top: 20px;
-  background-color: #38a7e8;
+  background-color: var(--dusty-red);
   color: white;
   font-weight: bold;
   border: none;
-  border-radius: 4px;
+  border-radius: 10px;
   cursor: pointer;
+  transition: background-color 0.1s ease;
+  transition: transform 0.2s ease;
   }
 
 .login-box button:hover {
-  background-color: #3498db;
+  background-color: var(--dusty-red-hover);
+  transform: scale(1.05);
+}
+
+/*Sign Up*/
+.sign_up {
+  color: var(--dusty-red);
+}
+
+.sign_up a {
+  display: inline-block;
+  color: var(--dark);
+  text-decoration: none;
+  transition: transform 0.2s ease; 
+}
+
+.sign_up a:hover {
+  transform: scale(1.03);
 }

demo/home.html

@@ -4,8 +4,6 @@
   <meta charset="UTF-8">
   <title>Thyme Crunch Home</title>
   <link rel="stylesheet" href="css/home.css">
-  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
-<link href='https://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet'>
 </head>
 <body>
 

demo/login.html

@@ -8,13 +8,16 @@
 <body>
 
 <header class="top-header">
+    <img src="images/header_left.png" alt="Violin f-hole shape to the left of header." class="swirl">
     <h1 class="site-name">Thyme Crunch</h1>
+    <img src="images/header_right.png" alt="Violin f-hole shape to the right of header." class="swirl">
+
   </header>
 
     <!-- Main Content -->
     <main class="main-content">
       <div class="login-box">
-        <h2>User Login</h2>
+        <h2>Log In</h2>
         <form action="AuthController" method="post">
           <label for="username">Username</label>
           <input type="text" id="user" name="user" required>
@@ -24,8 +27,9 @@
 
           <button type="submit">Enter</button>
         </form>
-
+      </div>
-	<h3> OR <a href="create-account.html">SIGN UP</a> FOR AN ACCOUNT </h3>
+      <div class="sign_up"> 
+        <h3> OR <a href="create-account.html"><b>SIGN UP</b></a> FOR AN ACCOUNT </h3>
       </div>
     </main>
   </div>