1 files changed, 81 insertions, 1 deletions

diff --git a/public/static/style.css b/public/static/style.css
index 6f39084..fa37b36 100644
--- a/public/static/style.css
+++ b/public/static/style.css
@@ -1,9 +1,20 @@
+:root {
+    --primary-color: #6ee7b7;
+    --secondary-color: #59c59a;
+
+    --promo-button-background: linear-gradient(0deg, #ff9028 0% 50%, #ffb224 50% 100%);
+    --promo-button-background-hover: #ff9028;
+    --promo-button-foreground: #662000;
+    --promo-button-border: #ac6019;
+}
+
 * {
     padding: 0;
     margin: 0;
 }
 
 body {
+    background: #ccebdd;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -35,7 +46,7 @@ content {
 }
 
 footer {
-    background: #cacaca;
+    background: #9bbdad;
     width: 100%;
     display: flex;
     justify-content: center;
@@ -47,15 +58,64 @@ footer.big {
     padding: 32px 0;
 }
 
+a {
+    color: #000;
+}
+
+a:hover {
+    color: var(--secondary-color);
+}
+
+button {
+    background: var(--promo-button-background);
+    border: 1px solid var(--promo-button-border);
+    border-radius: 4px;
+    color: var(--promo-button-foreground);
+    text-shadow: 0 1px #804e15;
+    font-weight: bold;
+
+    font-size: 16px;
+    padding: 8px;
+}
+
+button:hover {
+    cursor: pointer;
+    background: var(--promo-button-background-hover);
+}
+
+.img-gradient {
+    position: relative;
+    display: inline-block;
+}
+
+.img-gradient:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    display: inline-block;
+    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, var(--primary-color) 100%);
+}
 
 /**
 --- SHORTCUTS
 */
 
+.background-colorful {
+    background: var(--primary-color);
+}
+
 .w-50 {
     width: 50%;
 }
 
+.column {
+    display: flex;
+    flex-direction: column;
+}
+
 .row {
     display: flex;
     flex-direction: row;
@@ -69,6 +129,18 @@ footer.big {
     justify-content: center;
 }
 
+.justify-between {
+    justify-content: space-between;
+}
+
+.self-end {
+    align-self: flex-end;
+}
+
+.text-right {
+    text-align: right;
+}
+
 .gap-32 {
     gap: 32px;
 }
@@ -79,4 +151,12 @@ footer.big {
 
 .gap-8 {
     gap: 8px;
+}
+
+.p-16 {
+    padding: 16px;
+}
+
+.border {
+    border: 0.25px solid rgba(133, 133, 133, 0.25);
 }
\ No newline at end of file