end of night

frontend/css/styles.css

@@ -1,30 +1,29 @@
 :root {
-  --primary: #150135;
-
-  --secondary: #6c2bad;
-
-  --secondary-hover: #3c7aca;
-
-  --pink: #ff00f2;
+  --primary: #1d2021;
+  --bg: #282828;
+  --bg-soft: #32302f;
+  --bg-1: #3c3836;
+  --fg: #ebdbb2;
+  --secondary: #d65d0e;
+  --secondary-hover: #fe8019;
+  --accent: #fabd2f;
+  --orange: #d65d0e;
+  --yellow: #d79921;
+  --aqua: #689d6a;
+  --blue: #458588;
+  --purple: #b16286;
+  --red: #cc241d;
+  --gray: #a89984;
+  --pink: #b16286;
 }
 
 .bg-img {
-  /* background-image: url(/frontend/Images/Black\ Background\ Abstract.jpg); */
-
   background:
-    linear-gradient(var(--primary), #6c2bad4d, var(--primary)),
-    radial-gradient(
-      circle 700px at 20% 30%,
-
-      rgba(255, 0, 179, 0.445),
-      transparent
-    ),
-    radial-gradient(
-      circle 500px at 80% 70%,
-
-      rgba(255, 0, 179, 0.445),
-      transparent
-    );
+    radial-gradient(ellipse 900px 700px at 10% 35%, rgba(214, 93, 14, 0.28), transparent),
+    radial-gradient(ellipse 700px 600px at 88% 70%, rgba(215, 153, 33, 0.2), transparent),
+    radial-gradient(ellipse 600px 500px at 55% 5%, rgba(177, 98, 134, 0.18), transparent),
+    radial-gradient(ellipse 500px 400px at 75% 20%, rgba(104, 157, 106, 0.12), transparent),
+    linear-gradient(160deg, #1d2021 0%, #282828 45%, #32302f 100%);
 
   min-height: 90vh;
 
@@ -35,10 +34,6 @@
   background-position: center center;
 
   background-repeat: no-repeat;
-
-  /* background-blend-mode: overlay; */
-
-  /* background-color: rgba(0, 0, 0, 0.467); */
 }
 
 .bg-img.dashboard {
@@ -47,21 +42,22 @@
 
 body {
   background-color: var(--primary);
+  color: var(--fg);
 }
 
 nav,
 footer {
   background-color: var(--primary);
 
-  color: white;
+  color: var(--fg);
 }
 
 .nav-link {
-  color: white;
+  color: var(--fg);
 }
 
 .nav-link:hover {
-  color: var(--secondary);
+  color: var(--accent);
 }
 
 .navbar-toggler {
@@ -73,7 +69,7 @@ footer {
 .btn-primary {
   background-color: var(--secondary);
 
-  color: white;
+  color: var(--fg);
 
   border-color: transparent;
 }
@@ -81,7 +77,7 @@ footer {
 .btn-primary:hover {
   background-color: var(--secondary-hover);
 
-  color: white;
+  color: var(--primary);
 
   border-color: transparent;
 }
@@ -89,17 +85,17 @@ footer {
 form a {
   text-decoration: none;
 
-  color: white;
+  color: var(--fg);
 
   transition: 0.2s ease-in-out;
 }
 
 form a:hover {
-  color: var(--secondary);
+  color: var(--accent);
 }
 
 .bg-translucent {
-  background-color: #00000063;
+  background-color: rgba(40, 40, 40, 0.6);
 }
 
 #sortSelect:hover {
@@ -107,7 +103,7 @@ form a:hover {
 }
 
 .pinkBorder {
-  border: var(--pink) 1px solid;
+  border: var(--purple) 1px solid;
 }
 
 textarea {