From dcb9f24c707b6776cd96adcc2e9c2dc7aa1caa7a Mon Sep 17 00:00:00 2001
From: izzy2lost <izzynochill@gmail.com>
Date: Mon, 17 Nov 2025 20:58:01 -0500
Subject: [PATCH] better mobile and desktop spacing styling

---
 style.css | 455 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 443 insertions(+), 12 deletions(-)

diff --git a/style.css b/style.css
index fcbbd42..7eddcca 100644
--- a/style.css
+++ b/style.css
@@ -1,12 +1,443 @@
-body{margin:0;font-family:sans-serif;color:white;background:#050810;}
-#starfield{position:fixed;inset:0;z-index:-1;}
-.crt-toggle{position:fixed;top:10px;right:10px;z-index:20;color:white;}
-.crt-on{position:relative;}
-.crt-on:after{content:"";pointer-events:none;position:fixed;inset:0;background:repeating-linear-gradient(transparent,transparent 2px,rgba(255,255,255,0.04) 3px);}
-.navbar{padding:20px;}
-.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin:20px;}
-.project-card{text-decoration:none;color:white;}
-.project-icon-large{width:120px;display:block;margin:20px auto;}
-.btn{padding:10px 20px;border-radius:20px;text-decoration:none;margin:5px;display:inline-block;}
-.btn.primary{background:#00e3ff;color:#000;}
-.btn.ghost{border:1px solid #fff;}
+/* Animations */
+@keyframes neonPulse {
+  0%, 100% {
+    filter: drop-shadow(0 0 10px rgba(0, 227, 255, 0.4));
+  }
+  50% {
+    filter: drop-shadow(0 0 25px rgba(0, 227, 255, 0.8));
+  }
+}
+
+/* Base Styles - Mobile First */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  color: white;
+  background: #050810;
+  overflow-x: hidden;
+}
+
+#starfield {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+}
+
+/* CRT Toggle */
+.crt-toggle {
+  position: fixed;
+  top: 12px;
+  right: 12px;
+  z-index: 20;
+  color: white;
+  font-size: 14px;
+  background: rgba(0, 0, 0, 0.5);
+  padding: 8px 12px;
+  border-radius: 8px;
+  backdrop-filter: blur(10px);
+}
+
+.crt-toggle label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.crt-toggle input {
+  cursor: pointer;
+}
+
+.crt-on {
+  position: relative;
+}
+
+.crt-on:after {
+  content: "";
+  pointer-events: none;
+  position: fixed;
+  inset: 0;
+  background: repeating-linear-gradient(
+    transparent,
+    transparent 2px,
+    rgba(255, 255, 255, 0.04) 3px
+  );
+  z-index: 10;
+}
+
+/* Navbar */
+.navbar {
+  padding: 16px;
+  background: rgba(5, 8, 16, 0.8);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(0, 227, 255, 0.2);
+}
+
+.nav-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.logo-img {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+
+.logo-text {
+  display: flex;
+  flex-direction: column;
+}
+
+.logo-main {
+  font-size: 18px;
+  font-weight: bold;
+  color: #00e3ff;
+  line-height: 1.2;
+}
+
+.logo-sub {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.6);
+  line-height: 1.2;
+}
+
+/* Hero Section */
+.hero {
+  padding: 40px 16px;
+  text-align: center;
+}
+
+.hero-inner h1 {
+  font-size: 28px;
+  margin: 0 0 12px 0;
+  color: #00e3ff;
+  text-shadow: 0 0 20px rgba(0, 227, 255, 0.5);
+}
+
+.hero-inner p {
+  font-size: 16px;
+  margin: 0;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* Projects Section */
+.projects-section {
+  padding: 20px 16px 40px;
+}
+
+.project-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 16px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.project-card {
+  text-decoration: none;
+  color: white;
+  background: rgba(0, 227, 255, 0.05);
+  border: 1px solid rgba(0, 227, 255, 0.2);
+  border-radius: 12px;
+  padding: 20px;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 140px;
+}
+
+.project-card:hover {
+  background: rgba(0, 227, 255, 0.1);
+  border-color: rgba(0, 227, 255, 0.5);
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 227, 255, 0.2);
+}
+
+.card-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
+
+.project-icon {
+  width: 64px;
+  height: 64px;
+  object-fit: contain;
+  filter: drop-shadow(0 0 10px rgba(0, 227, 255, 0.4));
+  animation: neonPulse 3s ease-in-out infinite;
+}
+
+.project-card h3 {
+  margin: 0;
+  font-size: 16px;
+  text-align: center;
+  color: #00e3ff;
+}
+
+/* Buttons */
+.btn {
+  padding: 12px 24px;
+  border-radius: 20px;
+  text-decoration: none;
+  margin: 5px;
+  display: inline-block;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  border: none;
+  cursor: pointer;
+}
+
+.btn.primary {
+  background: #00e3ff;
+  color: #000;
+}
+
+.btn.primary:hover {
+  background: #00c8e6;
+  box-shadow: 0 4px 12px rgba(0, 227, 255, 0.4);
+}
+
+.btn.ghost {
+  border: 1px solid #fff;
+  color: #fff;
+  background: transparent;
+}
+
+.btn.ghost:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* Project Detail Pages */
+.project-page {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 40px 16px;
+  text-align: center;
+}
+
+.project-page .project-icon-large {
+  width: 100px;
+  height: 100px;
+  display: block;
+  margin: 0 auto 24px;
+  object-fit: contain;
+  filter: drop-shadow(0 0 20px rgba(0, 227, 255, 0.4));
+  animation: neonPulse 3s ease-in-out infinite;
+}
+
+.project-page h1 {
+  font-size: 32px;
+  margin: 0 0 16px 0;
+  color: #00e3ff;
+  text-shadow: 0 0 20px rgba(0, 227, 255, 0.5);
+}
+
+.project-page p {
+  font-size: 16px;
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.8);
+  margin: 0 0 32px 0;
+}
+
+.project-links {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: center;
+}
+
+.back {
+  color: #00e3ff;
+  text-decoration: none;
+  font-size: 16px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.back:hover {
+  color: #00c8e6;
+  transform: translateX(-4px);
+}
+
+/* Tablet Styles */
+@media (min-width: 600px) {
+  .navbar {
+    padding: 20px 24px;
+  }
+
+  .logo-img {
+    width: 48px;
+    height: 48px;
+  }
+
+  .logo-main {
+    font-size: 22px;
+  }
+
+  .logo-sub {
+    font-size: 12px;
+  }
+
+  .hero {
+    padding: 60px 24px;
+  }
+
+  .hero-inner h1 {
+    font-size: 36px;
+  }
+
+  .hero-inner p {
+    font-size: 18px;
+  }
+
+  .projects-section {
+    padding: 30px 24px 60px;
+  }
+
+  .project-grid {
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 20px;
+  }
+
+  .project-card {
+    padding: 24px;
+    min-height: 160px;
+  }
+
+  .project-icon {
+    width: 72px;
+    height: 72px;
+  }
+
+  .project-card h3 {
+    font-size: 18px;
+  }
+
+  .project-page {
+    padding: 60px 24px;
+  }
+
+  .project-page .project-icon-large {
+    width: 120px;
+    height: 120px;
+    margin-bottom: 28px;
+  }
+
+  .project-page h1 {
+    font-size: 40px;
+  }
+
+  .project-page p {
+    font-size: 18px;
+    margin-bottom: 40px;
+  }
+
+  .project-links {
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .back {
+    font-size: 17px;
+  }
+}
+
+/* Desktop Styles */
+@media (min-width: 1024px) {
+  .navbar {
+    padding: 24px 40px;
+  }
+
+  .logo-img {
+    width: 56px;
+    height: 56px;
+  }
+
+  .logo-main {
+    font-size: 24px;
+  }
+
+  .logo-sub {
+    font-size: 13px;
+  }
+
+  .hero {
+    padding: 80px 40px;
+  }
+
+  .hero-inner h1 {
+    font-size: 48px;
+  }
+
+  .hero-inner p {
+    font-size: 20px;
+  }
+
+  .projects-section {
+    padding: 40px 40px 80px;
+  }
+
+  .project-grid {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 24px;
+  }
+
+  .project-card {
+    padding: 28px;
+    min-height: 180px;
+  }
+
+  .project-icon {
+    width: 80px;
+    height: 80px;
+  }
+
+  .project-card h3 {
+    font-size: 20px;
+  }
+
+  .crt-toggle {
+    top: 16px;
+    right: 16px;
+    font-size: 15px;
+    padding: 10px 16px;
+  }
+
+  .project-page {
+    padding: 80px 40px;
+  }
+
+  .project-page .project-icon-large {
+    width: 140px;
+    height: 140px;
+    margin-bottom: 32px;
+  }
+
+  .project-page h1 {
+    font-size: 48px;
+  }
+
+  .project-page p {
+    font-size: 20px;
+    margin-bottom: 48px;
+  }
+
+  .back {
+    font-size: 18px;
+  }
+}