Shader blog post

assets/sass/pages/blog.scss

@@ -161,7 +161,7 @@
       border-radius: 8px;
     }
 
-    // Scanlines
+    // Scanlines (now applied in .blogs-content instead for better control)
     &::after {
       content: "";
       position: absolute;
@@ -169,16 +169,9 @@
       left: 0;
       right: 0;
       bottom: 0;
-      background: repeating-linear-gradient(
-        0deg,
-        rgba(0, 0, 0, 0.15) 0px,
-        rgba(0, 0, 0, 0.15) 1px,
-        transparent 1px,
-        transparent 2px
-      );
+      background: none;
       pointer-events: none;
       z-index: 2;
-      animation: scanline 8s linear infinite;
     }
   }
 
@@ -196,6 +189,44 @@
       padding: 15px;
     }
 
+    // Apply scanlines to content but not videos
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: repeating-linear-gradient(
+        0deg,
+        rgba(0, 0, 0, 0.15) 0px,
+        rgba(0, 0, 0, 0.15) 1px,
+        transparent 1px,
+        transparent 2px
+      );
+      pointer-events: none;
+      z-index: 1;
+      animation: scanline 8s linear infinite;
+    }
+
+    // All content should be above the scanlines
+    > * {
+      position: relative;
+      z-index: 2;
+    }
+
+    // Videos should appear above CRT effects
+    video {
+      position: relative;
+      z-index: 10;
+    }
+
+    // Video containers also need higher z-index
+    div:has(> video) {
+      position: relative;
+      z-index: 10;
+    }
+
     // Section intro content
     > section {
       margin-bottom: 30px;
@@ -233,6 +264,75 @@
         background: rgba(173, 255, 47, 0.05);
       }
     }
+
+    .code-copy-btn {
+      position: absolute;
+      top: 0.75rem;
+      right: 0.75rem;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem 0.75rem;
+      background: linear-gradient(
+        135deg,
+        rgba(0, 255, 0, 0.2) 0%,
+        rgba(0, 200, 0, 0.15) 100%
+      );
+      color: #0f0;
+      border: 1px solid rgba(0, 255, 0, 0.4);
+      border-radius: 4px;
+      font-size: 0.85rem;
+      font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
+      z-index: 10;
+
+      svg {
+        width: 14px;
+        height: 14px;
+        transition: transform 0.2s ease;
+      }
+
+      &:hover {
+        background: linear-gradient(
+          135deg,
+          rgba(0, 255, 0, 0.3) 0%,
+          rgba(173, 255, 47, 0.25) 100%
+        );
+        border-color: rgba(0, 255, 0, 0.7);
+        box-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
+        color: greenyellow;
+        text-shadow: 0 0 10px rgba(173, 255, 47, 0.8);
+        transform: translateY(-1px);
+
+        svg {
+          transform: scale(1.1);
+        }
+      }
+
+      &:active {
+        transform: translateY(0);
+      }
+
+      &.copied {
+        background: linear-gradient(
+          135deg,
+          rgba(0, 255, 0, 0.4) 0%,
+          rgba(0, 200, 0, 0.3) 100%
+        );
+        border-color: rgba(0, 255, 0, 0.8);
+        color: greenyellow;
+        text-shadow: 0 0 10px rgba(173, 255, 47, 1);
+
+        svg {
+          transform: scale(0.9);
+        }
+      }
+    }
   }
 
   // Blog posts listing