From d83fd345b96eed969c39520eea666266a671d710 Mon Sep 17 00:00:00 2001
From: Sebastian Korotkiewicz <skorotkiewicz@gmail.com>
Date: Fri, 18 Apr 2025 22:58:48 +0200
Subject: [PATCH] edit styles

---
 src/styles.scss        | 1161 +++++++++++++++++++++++-----------------
 src/views/layout.pug   |    9 +
 src/views/login.pug    |    2 +-
 src/views/register.pug |    2 +-
 4 files changed, 679 insertions(+), 495 deletions(-)

diff --git a/src/styles.scss b/src/styles.scss
index f730f9c..ba9c7af 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,629 +1,804 @@
 // Variables
-$primary: #00ff00;
-$primary-dark: #00cc00;
-$secondary: #660099;
-$light: #0a0a0a;
-$dark: #00ff00;
-$success: #00bb00;
-$gray: #777777;
-$gray-light: #1a1a1a;
-$accent: #ff00ff;
-$terminal-bg: #0f0f0f;
-$terminal-text: #00ff00;
-$terminal-font: 'Courier New', monospace;
+$primary: #4a9d4a;
+$primary-dark: #3a7a3a;
+$secondary: #6a5acd;
+$light: #1a1a1a;
+$dark: #4a9d4a;
+$success: #5cb85c;
+$gray: #999999;
+$gray-light: #2a2a2a;
+$accent: #d35db9;
+$terminal-bg: #222222;
+$terminal-text: #c0c0c0;
+$terminal-font: "Courier New", monospace;
 
 // Base styles
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: $terminal-font;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: $terminal-font;
 }
 
 body {
-    background-color: $light;
-    color: $terminal-text;
-    line-height: 1.6;
-    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23333' fill-opacity='0.2'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
+  background-color: $light;
+  color: $terminal-text;
+  line-height: 1.6;
+  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23333' fill-opacity='0.1'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
 }
 
 // Header styles
 header {
-    background: linear-gradient(135deg, $terminal-bg, $secondary);
-    color: $primary;
-    padding: 2rem 0;
-    text-align: center;
-    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.2);
-    border-bottom: 1px solid $primary;
+  background: linear-gradient(135deg, $terminal-bg, $secondary);
+  color: $primary;
+  padding: 2rem 0;
+  text-align: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  border-bottom: 1px solid $primary-dark;
 
-    .logo {
-        font-size: 2.5rem;
-        font-weight: bold;
-        margin-bottom: 1rem;
-        text-shadow: 0 0 5px $primary;
-        letter-spacing: 3px;
-    }
+  .logo {
+    font-size: 2.5rem;
+    font-weight: bold;
+    margin-bottom: 1rem;
+    text-shadow: 0 0 2px $primary;
+    letter-spacing: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
 
-    .tagline {
-        font-size: 1.2rem;
-        opacity: 0.9;
-        font-family: $terminal-font;
-        &:before {
-            content: "> ";
-            color: $primary;
-        }
+    // &:before {
+    //     content: "";
+    //     display: inline-block;
+    //     width: 65px;
+    //     height: 50px;
+    //     margin-right: 20px;
+    //     background-color: $terminal-bg;
+    //     border: 2px solid $primary;
+    //     border-radius: 8px;
+    //     position: relative;
+    //     box-shadow: 0 0 8px rgba($primary, 0.3);
+    //     overflow: hidden;
+    // }
+
+    /* Chat bubbles */
+    // &:after {
+    //   content: "";
+    //   position: absolute;
+    //   width: 45px;
+    //   height: 30px;
+    //   left: 10px;
+    //   top: 10px;
+    //   background: repeating-linear-gradient(
+    //     90deg,
+    //     transparent,
+    //     transparent 3px,
+    //     $primary 3px,
+    //     $primary 4px
+    //   );
+    //   clip-path: polygon(
+    //     0% 0%,
+    //     100% 0%,
+    //     100% 60%,
+    //     80% 60%,
+    //     70% 100%,
+    //     70% 60%,
+    //     0% 60%
+    //   );
+    //   animation: typeMessage 2s infinite;
+    // }
+  }
+
+  /* Connection dots animation */
+  .logo-dots {
+    position: absolute;
+    top: 15px;
+    left: 43px;
+    z-index: 2;
+
+    .dot {
+      position: absolute;
+      width: 6px;
+      height: 6px;
+      background-color: $accent;
+      border-radius: 50%;
+      opacity: 0;
+
+      &:nth-child(1) {
+        top: 0;
+        left: 0;
+        animation: showDot 3s infinite 0s;
+      }
+
+      &:nth-child(2) {
+        top: 10px;
+        left: 10px;
+        animation: showDot 3s infinite 0.3s;
+      }
+
+      &:nth-child(3) {
+        top: 20px;
+        left: 20px;
+        animation: showDot 3s infinite 0.6s;
+      }
     }
+  }
+
+  @keyframes typeMessage {
+    0% {
+      width: 0;
+    }
+    40% {
+      width: 45px;
+    }
+    60% {
+      width: 45px;
+    }
+    100% {
+      width: 45px;
+    }
+  }
+
+  @keyframes showDot {
+    0% {
+      opacity: 0;
+      transform: scale(0.5);
+    }
+    20% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    80% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(0.5);
+    }
+  }
+
+  .tagline {
+    font-size: 1.2rem;
+    opacity: 0.9;
+    font-family: $terminal-font;
+    &:before {
+      content: "> ";
+      color: $primary;
+    }
+  }
 }
 
 // Navigation
 nav {
-    background-color: $terminal-bg;
-    box-shadow: 0 2px 5px rgba(0, 255, 0, 0.2);
-    position: sticky;
-    top: 0;
-    z-index: 100;
-    border-bottom: 1px solid $primary-dark;
+  background-color: $terminal-bg;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  border-bottom: 1px solid $primary-dark;
 
-    .navbar {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 0 1rem;
+  .navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+  }
+
+  .nav-brand {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: $primary;
+    text-decoration: none;
+    padding: 1rem 0;
+    text-shadow: 0 0 1px $primary;
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    &:before {
+      content: "";
+      display: inline-block;
+      width: 30px;
+      height: 25px;
+      margin-right: 10px;
+      background-color: $terminal-bg;
+      border: 1px solid $primary;
+      border-radius: 4px;
+      position: relative;
+      overflow: hidden;
     }
 
-    .nav-brand {
-        font-size: 1.5rem;
-        font-weight: bold;
-        color: $primary;
-        text-decoration: none;
-        padding: 1rem 0;
-        text-shadow: 0 0 3px $primary;
+    &:after {
+      content: "";
+      position: absolute;
+      width: 20px;
+      height: 12px;
+      left: 5px;
+      top: 17px;
+      background: repeating-linear-gradient(
+        90deg,
+        transparent,
+        transparent 1px,
+        $primary 1px,
+        $primary 2px
+      );
+      clip-path: polygon(
+        0% 0%,
+        100% 0%,
+        100% 60%,
+        80% 60%,
+        70% 100%,
+        70% 60%,
+        0% 60%
+      );
     }
+  }
 
-    .nav-links {
-        display: flex;
-        list-style: none;
+  .nav-links {
+    display: flex;
+    list-style: none;
 
-        li a {
-            display: block;
-            padding: 1rem;
-            color: $primary;
-            text-decoration: none;
-            transition: all 0.3s;
-            border: 1px solid transparent;
+    li a {
+      display: block;
+      padding: 1rem;
+      color: $primary;
+      text-decoration: none;
+      transition: all 0.3s;
+      border: 1px solid transparent;
 
-            &:hover {
-                color: $light;
-                background-color: $primary;
-                border: 1px solid $primary-dark;
-                box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
-            }
-        }
+      &:hover {
+        color: $light;
+        background-color: $primary;
+        border: 1px solid $primary-dark;
+        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+      }
     }
+  }
 }
 
 // Container
 .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 2rem 1rem;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem 1rem;
 }
 
 // Hero section
 .hero {
-    text-align: center;
-    padding: 3rem 1rem;
+  text-align: center;
+  padding: 3rem 1rem;
 
-    h1 {
-        font-size: 2.5rem;
-        margin-bottom: 1rem;
-        color: $primary;
-        text-shadow: 0 0 5px $primary;
-        letter-spacing: 2px;
-        &:before {
-            content: "[ ";
-            color: $accent;
-        }
-        &:after {
-            content: " ]";
-            color: $accent;
-        }
+  h1 {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    color: $primary;
+    text-shadow: 0 0 2px $primary;
+    letter-spacing: 1px;
+    &:before {
+      content: "[ ";
+      color: $accent;
     }
+    &:after {
+      content: " ]";
+      color: $accent;
+    }
+  }
 
-    p {
-        font-size: 1.2rem;
-        color: $gray;
-        margin-bottom: 2rem;
-        max-width: 800px;
-        margin-left: auto;
-        margin-right: auto;
-        &:before {
-            content: "$ ";
-            color: $primary;
-        }
+  p {
+    font-size: 1.2rem;
+    color: $gray;
+    margin-bottom: 2rem;
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+    &:before {
+      content: "$ ";
+      color: $primary;
     }
+  }
 }
 
 // Buttons
 .btn {
-    display: inline-block;
-    padding: 0.8rem 1.5rem;
-    background-color: $terminal-bg;
-    color: $primary;
-    text-decoration: none;
-    border-radius: 0;
-    font-weight: 500;
-    transition: all 0.3s;
-    cursor: pointer;
-    border: 1px solid $primary;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    
-    &:hover {
-        background-color: $primary;
-        color: $terminal-bg;
-        box-shadow: 0 0 15px rgba(0, 255, 0, 0.7);
-        transform: translateY(-2px);
-    }
+  display: inline-block;
+  padding: 0.8rem 1.5rem;
+  background-color: $terminal-bg;
+  color: $primary;
+  text-decoration: none;
+  border-radius: 0;
+  font-weight: 500;
+  transition: all 0.3s;
+  cursor: pointer;
+  border: 1px solid $primary;
+  text-transform: uppercase;
+  letter-spacing: 1px;
 
-    &-large {
-        font-size: 1.1rem;
-        padding: 1rem 2rem;
-    }
+  &:hover {
+    background-color: $primary;
+    color: $terminal-bg;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+    transform: translateY(-2px);
+  }
+
+  &-large {
+    font-size: 1.1rem;
+    padding: 1rem 2rem;
+  }
 }
 
 // Connection methods
 .connection-methods {
-    background-color: $terminal-bg;
-    border-radius: 0;
-    box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
-    padding: 2rem;
-    margin-bottom: 2rem;
-    border: 1px solid $primary;
+  background-color: $terminal-bg;
+  border-radius: 4px;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+  padding: 2rem;
+  margin-bottom: 2rem;
+  border: 1px solid $primary-dark;
 }
 
 .method-card {
-    background-color: $gray-light;
-    border-radius: 0;
-    padding: 1.5rem;
-    margin-bottom: 1rem;
-    transition: all 0.3s;
-    border-left: 3px solid $primary;
+  background-color: $gray-light;
+  border-radius: 4px;
+  //   padding: 2.5rem;
+  padding: 1rem 1rem 1rem 2.5rem;
+  margin-bottom: 1rem;
+  transition: all 0.3s;
+  border-left: 3px solid $primary;
 
-    &:hover {
-        transform: translateY(-5px);
-        box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
-    }
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  }
 
-    .method-title {
-        font-size: 1.2rem;
-        color: $primary;
-        margin-bottom: 0.5rem;
-        display: flex;
-        align-items: center;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-        
-        &:before {
-            content: ">";
-            margin-right: 0.5rem;
-            color: $accent;
-        }
-    }
+  .method-title {
+    font-size: 1.2rem;
+    color: $primary;
+    margin-bottom: 0.5rem;
+    display: flex;
+    align-items: center;
+    text-transform: uppercase;
+    letter-spacing: 1px;
 
-    .method-icon {
-        margin-right: 0.5rem;
-        font-size: 1.4rem;
-        color: $accent;
+    &:before {
+      content: ">";
+      margin-right: 0.5rem;
+      color: $accent;
     }
+  }
 
-    .method-details {
-        color: $gray;
-        font-family: $terminal-font;
-    }
+  .method-icon {
+    margin-right: 0.5rem;
+    font-size: 1.4rem;
+    color: $accent;
+  }
+
+  .method-details {
+    color: $gray;
+    font-family: $terminal-font;
+  }
 }
 
 .connect-link {
-    display: inline-block;
-    margin-top: 0.5rem;
-    color: $primary;
-    font-weight: 500;
+  display: inline-block;
+  margin-top: 0.5rem;
+  color: $primary;
+  font-weight: 500;
+  text-decoration: none;
+  border-bottom: 1px dashed $primary;
+
+  &:hover {
     text-decoration: none;
-    border-bottom: 1px dashed $primary;
-    
-    &:hover {
-        text-decoration: none;
-        text-shadow: 0 0 5px $primary;
-        border-bottom: 1px solid $primary;
-    }
+    text-shadow: 0 0 5px $primary;
+    border-bottom: 1px solid $primary;
+  }
 }
 
 // Features section
 .features {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 2rem;
-    margin: 3rem 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+  margin: 3rem 0;
 }
 
 .feature-card {
-    background-color: $terminal-bg;
-    border-radius: 0;
-    box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
-    padding: 2rem;
-    text-align: center;
-    transition: all 0.3s;
-    border: 1px solid $primary-dark;
-    
-    &:hover {
-        transform: translateY(-10px);
-        box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
-        border-color: $primary;
-    }
+  background-color: $terminal-bg;
+  border-radius: 6px;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+  padding: 2rem;
+  text-align: center;
+  transition: all 0.3s;
+  border: 1px solid $primary-dark;
 
-    .feature-icon {
-        font-size: 2.5rem;
-        color: $primary;
-        margin-bottom: 1rem;
-        text-shadow: 0 0 5px $primary;
-    }
+  &:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+    border-color: $primary;
+  }
 
-    .feature-title {
-        font-size: 1.5rem;
-        margin-bottom: 1rem;
-        color: $primary;
-        text-transform: uppercase;
-        letter-spacing: 2px;
-        
-        &:before {
-            content: "[ ";
-            color: $accent;
-        }
-        &:after {
-            content: " ]";
-            color: $accent;
-        }
-    }
+  .feature-icon {
+    font-size: 2.5rem;
+    color: $primary;
+    margin-bottom: 1rem;
+    text-shadow: 0 0 2px $primary;
+  }
 
-    .feature-text {
-        color: $gray;
-        font-family: $terminal-font;
+  .feature-title {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    color: $primary;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+
+    &:before {
+      content: "[ ";
+      color: $accent;
     }
+    &:after {
+      content: " ]";
+      color: $accent;
+    }
+  }
+
+  .feature-text {
+    color: $gray;
+    font-family: $terminal-font;
+  }
 }
 
 // Section titles
 .section-title {
-    text-align: center;
-    margin: 3rem 0 2rem;
-    color: $primary;
-    font-size: 2rem;
-    text-transform: uppercase;
-    letter-spacing: 3px;
-    position: relative;
-    text-shadow: 0 0 5px $primary;
-    
-    &:before, &:after {
-        content: "====================";
-        color: $primary-dark;
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        font-size: 1rem;
-    }
-    
-    &:before {
-        top: -1.5rem;
-    }
-    
-    &:after {
-        bottom: -1.5rem;
-    }
+  text-align: center;
+  margin: 3rem 0 2rem;
+  color: $primary;
+  font-size: 2rem;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  position: relative;
+  text-shadow: 0 0 1px $primary;
+
+  &:before,
+  &:after {
+    content: "====================";
+    color: $primary-dark;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 1rem;
+  }
+
+  &:before {
+    top: -1.5rem;
+  }
+
+  &:after {
+    bottom: -1.5rem;
+  }
 }
 
 // FAQ section
 .faq-item {
-    background-color: $terminal-bg;
-    border-radius: 0;
-    box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
-    margin-bottom: 1rem;
-    overflow: hidden;
-    border: 1px solid $primary-dark;
+  background-color: $terminal-bg;
+  border-radius: 4px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  margin-bottom: 1rem;
+  overflow: hidden;
+  border: 1px solid $primary-dark;
 
-    .faq-question {
-        background-color: $gray-light;
-        padding: 1rem;
-        font-weight: 500;
-        cursor: pointer;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        color: $primary;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-        
-        &:before {
-            content: "?> ";
-            color: $accent;
-        }
-    }
+  .faq-question {
+    background-color: $gray-light;
+    padding: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: $primary;
+    text-transform: uppercase;
+    letter-spacing: 1px;
 
-    .faq-answer {
-        padding: 1rem;
-        color: $gray;
-        font-family: $terminal-font;
-        border-top: 1px dashed $primary-dark;
-        
-        &:before {
-            content: "$> ";
-            color: $primary;
-        }
+    &:before {
+      content: "?> ";
+      color: $accent;
     }
+  }
+
+  .faq-answer {
+    padding: 1rem;
+    color: $gray;
+    font-family: $terminal-font;
+    border-top: 1px dashed $primary-dark;
+
+    &:before {
+      content: "$> ";
+      color: $primary;
+    }
+  }
 }
 
 // Steps section
 .steps {
-    counter-reset: step-counter;
-    margin: 2rem 0;
+  counter-reset: step-counter;
+  margin: 2rem 0;
 }
 
 .step {
+  background-color: $terminal-bg;
+  border-radius: 4px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  position: relative;
+  padding-left: 3.5rem;
+  border: 1px solid $primary-dark;
+
+  &:hover {
+    border-color: $primary;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+  }
+
+  &::before {
+    counter-increment: step-counter;
+    content: counter(step-counter);
+    position: absolute;
+    left: 1rem;
+    top: 1.5rem;
     background-color: $terminal-bg;
-    border-radius: 0;
-    box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
-    padding: 1.5rem;
-    margin-bottom: 1.5rem;
-    position: relative;
-    padding-left: 3.5rem;
-    border: 1px solid $primary-dark;
-    
-    &:hover {
-        border-color: $primary;
-        box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
-    }
+    color: $primary;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    border: 1px solid $primary;
+  }
 
-    &::before {
-        counter-increment: step-counter;
-        content: counter(step-counter);
-        position: absolute;
-        left: 1rem;
-        top: 1.5rem;
-        background-color: $terminal-bg;
-        color: $primary;
-        width: 2rem;
-        height: 2rem;
-        border-radius: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-weight: bold;
-        border: 1px solid $primary;
-    }
-
-    &-title {
-        color: $primary;
-        margin-bottom: 0.5rem;
-        font-size: 1.2rem;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-    }
+  &-title {
+    color: $primary;
+    margin-bottom: 0.5rem;
+    font-size: 1.2rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
 }
 
 // Footer
 footer {
-    background-color: $terminal-bg;
-    color: $primary;
-    padding: 3rem 0;
-    margin-top: 3rem;
-    border-top: 1px solid $primary;
+  background-color: $terminal-bg;
+  color: $primary;
+  padding: 3rem 0;
+  margin-top: 3rem;
+  border-top: 1px solid $primary-dark;
 
-    .footer-content {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 0 1rem;
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        gap: 2rem;
+  .footer-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 2rem;
+  }
+
+  .footer-section {
+    h3 {
+      color: $primary;
+      margin-bottom: 1rem;
+      text-transform: uppercase;
+      letter-spacing: 2px;
+      text-shadow: 0 0 1px $primary;
+      display: flex;
+      align-items: center;
+      position: relative;
+
+      &:before {
+        content: "#";
+        display: inline-block;
+        width: 18px;
+        height: 18px;
+        margin-right: 8px;
+        background-color: $terminal-bg;
+        // border: 1px solid $primary;
+        border-radius: 3px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        color: $accent;
+      }
+    }
+  }
+
+  .footer-links {
+    list-style: none;
+
+    li {
+      margin-bottom: 0.5rem;
     }
 
-    .footer-section {
-        h3 {
-            color: $primary;
-            margin-bottom: 1rem;
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            text-shadow: 0 0 3px $primary;
-            
-            &:before {
-                content: "# ";
-                color: $accent;
-            }
-        }
+    a {
+      color: $gray;
+      text-decoration: none;
+      transition: color 0.3s;
+
+      &:before {
+        content: "- ";
+        color: $primary;
+      }
+
+      &:hover {
+        color: $primary;
+        text-shadow: 0 0 3px $primary;
+      }
+    }
+  }
+
+  .copyright {
+    text-align: center;
+    padding: 1rem 0;
+    color: $gray;
+    border-top: 1px solid $primary-dark;
+    margin-top: 2rem;
+    font-family: $terminal-font;
+
+    &:before {
+      content: "/* ";
+      color: $primary;
     }
 
-    .footer-links {
-        list-style: none;
-
-        li {
-            margin-bottom: 0.5rem;
-        }
-
-        a {
-            color: $gray;
-            text-decoration: none;
-            transition: color 0.3s;
-            
-            &:before {
-                content: "- ";
-                color: $primary;
-            }
-
-            &:hover {
-                color: $primary;
-                text-shadow: 0 0 3px $primary;
-            }
-        }
-    }
-
-    .copyright {
-        text-align: center;
-        padding: 1rem 0;
-        color: $gray;
-        border-top: 1px solid $primary-dark;
-        margin-top: 2rem;
-        font-family: $terminal-font;
-        
-        &:before {
-            content: "/* ";
-            color: $primary;
-        }
-        
-        &:after {
-            content: " */";
-            color: $primary;
-        }
+    &:after {
+      content: " */";
+      color: $primary;
     }
+  }
 }
 
 // Responsive styles
 @media (max-width: 768px) {
-    .navbar {
-        flex-direction: column;
-        padding: 0.5rem 1rem;
-    }
-    
-    .nav-links {
-        flex-direction: column;
-        width: 100%;
-    }
-    
-    .features {
-        grid-template-columns: 1fr;
-    }
+  .navbar {
+    flex-direction: column;
+    padding: 0.5rem 1rem;
+  }
+
+  .nav-links {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .features {
+    grid-template-columns: 1fr;
+  }
 }
 
 // Additional utilities
 .page-content {
-    min-height: 60vh;
+  min-height: 60vh;
 }
 
 .code-block {
-    background-color: $terminal-bg;
-    border-radius: 0;
-    padding: 0.8rem;
-    font-family: $terminal-font;
-    overflow-x: auto;
-    margin: 0.5rem 0;
-    color: $primary;
-    border: 1px solid $primary-dark;
-    position: relative;
-    
-    &:before {
-        content: "> ";
-        color: $accent;
-    }
+  background-color: $terminal-bg;
+  border-radius: 0;
+  padding: 0.8rem;
+  font-family: $terminal-font;
+  overflow-x: auto;
+  margin: 0.5rem 0;
+  color: $primary;
+  border: 1px solid $primary-dark;
+  position: relative;
+
+  &:before {
+    content: "> ";
+    color: $accent;
+  }
 }
 
 .tip {
-    background-color: rgba($primary, 0.1);
-    border-left: 4px solid $primary;
-    padding: 1rem;
-    margin: 1rem 0;
-    
-    &:before {
-        content: "! ";
-        color: $accent;
-        font-weight: bold;
-    }
+  background-color: rgba($primary, 0.1);
+  border-left: 4px solid $primary;
+  padding: 1rem;
+  margin: 1rem 0;
+
+  &:before {
+    content: "! ";
+    color: $accent;
+    font-weight: bold;
+  }
 }
 
 .screenshot {
-    max-width: 100%;
-    height: auto;
-    border-radius: 0;
-    box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
-    margin: 1rem 0;
-    border: 1px solid $primary-dark;
-    filter: brightness(0.9) contrast(1.1) saturate(1.2);
+  max-width: 100%;
+  height: auto;
+  border-radius: 0;
+  box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
+  margin: 1rem 0;
+  border: 1px solid $primary-dark;
+  filter: brightness(0.9) contrast(1.1) saturate(1.2);
 }
 
 // Glitch effect
 @keyframes glitch {
-    0% {
-        text-shadow: 0.05em 0 0 $accent, -0.05em -0.025em 0 rgba(255, 0, 255, 0.75);
-    }
-    14% {
-        text-shadow: 0.05em 0 0 $accent, -0.05em -0.025em 0 rgba(255, 0, 255, 0.75);
-    }
-    15% {
-        text-shadow: -0.05em -0.025em 0 $accent, 0.025em 0.025em 0 rgba(255, 0, 255, 0.75);
-    }
-    49% {
-        text-shadow: -0.05em -0.025em 0 $accent, 0.025em 0.025em 0 rgba(255, 0, 255, 0.75);
-    }
-    50% {
-        text-shadow: 0.025em 0.05em 0 $accent, 0.05em 0 0 rgba(255, 0, 255, 0.75);
-    }
-    99% {
-        text-shadow: 0.025em 0.05em 0 $accent, 0.05em 0 0 rgba(255, 0, 255, 0.75);
-    }
-    100% {
-        text-shadow: -0.025em 0 0 $accent, -0.025em -0.025em 0 rgba(255, 0, 255, 0.75);
-    }
+  0% {
+    text-shadow: 0.05em 0 0 $accent, -0.05em -0.025em 0 rgba(255, 0, 255, 0.75);
+  }
+  14% {
+    text-shadow: 0.05em 0 0 $accent, -0.05em -0.025em 0 rgba(255, 0, 255, 0.75);
+  }
+  15% {
+    text-shadow: -0.05em -0.025em 0 $accent,
+      0.025em 0.025em 0 rgba(255, 0, 255, 0.75);
+  }
+  49% {
+    text-shadow: -0.05em -0.025em 0 $accent,
+      0.025em 0.025em 0 rgba(255, 0, 255, 0.75);
+  }
+  50% {
+    text-shadow: 0.025em 0.05em 0 $accent, 0.05em 0 0 rgba(255, 0, 255, 0.75);
+  }
+  99% {
+    text-shadow: 0.025em 0.05em 0 $accent, 0.05em 0 0 rgba(255, 0, 255, 0.75);
+  }
+  100% {
+    text-shadow: -0.025em 0 0 $accent,
+      -0.025em -0.025em 0 rgba(255, 0, 255, 0.75);
+  }
 }
 
 .glitch-text {
-    animation: glitch 1s linear infinite;
-    color: $primary;
+  animation: glitch 1s linear infinite;
+  color: $primary;
 }
 
 // Terminal effect
 .terminal {
-    background-color: $terminal-bg;
-    border: 1px solid $primary;
-    padding: 1rem;
-    font-family: $terminal-font;
+  background-color: $terminal-bg;
+  border: 1px solid $primary;
+  padding: 1rem;
+  font-family: $terminal-font;
+  color: $primary;
+  position: relative;
+
+  &:before {
+    content: "$ ";
     color: $primary;
-    position: relative;
-    
-    &:before {
-        content: "$ ";
-        color: $primary;
-    }
-    
-    .cursor {
-        display: inline-block;
-        width: 10px;
-        height: 20px;
-        background-color: $primary;
-        animation: blink 1s step-end infinite;
-    }
+  }
+
+  .cursor {
+    display: inline-block;
+    width: 10px;
+    height: 20px;
+    background-color: $primary;
+    animation: blink 1s step-end infinite;
+  }
 }
 
 @keyframes blink {
-    from, to {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0;
-    }
+  from,
+  to {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
 }
 
 // Matrix effect background element
 .matrix-bg {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    opacity: 0.05;
-    background: repeating-linear-gradient(
-        0deg,
-        rgba(0, 255, 0, 0.15) 0px,
-        rgba(0, 255, 0, 0.15) 1px,
-        transparent 1px,
-        transparent 2px
-    );
-}
\ No newline at end of file
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  opacity: 0.03;
+  background: repeating-linear-gradient(
+    0deg,
+    rgba(125, 125, 125, 0.1) 0px,
+    rgba(125, 125, 125, 0.1) 1px,
+    transparent 1px,
+    transparent 2px
+  );
+}
diff --git a/src/views/layout.pug b/src/views/layout.pug
index 54d8868..747e10c 100644
--- a/src/views/layout.pug
+++ b/src/views/layout.pug
@@ -8,6 +8,15 @@ html(lang="en")
     title #{title} | IRC*Sekor
     link(rel="stylesheet", href="styles.css")
   body
+    //- header
+    //-   .logo 
+    //-     .logo-dots
+    //-       .dot
+    //-       .dot
+    //-       .dot
+    //-     | IRC*Sekor
+    //-   .tagline #{tagline}
+
     header
       .logo IRC*Sekor
       .tagline #{tagline}
diff --git a/src/views/login.pug b/src/views/login.pug
index 87361bc..a9b8679 100644
--- a/src/views/login.pug
+++ b/src/views/login.pug
@@ -13,7 +13,7 @@ block content
         ul
           li
             | Using an IRC client: 
-            span.code-block ircs://irc.sekor.eu.org:6697
+            pre.code-block ircs://irc.sekor.eu.org:6697
           li
             | Or use the 
             a(href="/web/") web client
diff --git a/src/views/register.pug b/src/views/register.pug
index 6e4df00..888c201 100644
--- a/src/views/register.pug
+++ b/src/views/register.pug
@@ -13,7 +13,7 @@ block content
         ul
           li
             | Using an IRC client: 
-            span.code-block ircs://irc.sekor.eu.org:6697
+            pre.code-block ircs://irc.sekor.eu.org:6697
           li
             | Or use the 
             a(href="/web/") web client