bg set to cover and autofits height to viewport

.gitignore

@@ -0,0 +1 @@
+files/

LICENSE

@@ -0,0 +1,13 @@
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+                    Version 2, December 2004
+
+ Copyright (C) 2025 KorboDuo <korboduo@gmail.com>
+
+ Everyone is permitted to copy and distribute verbatim or modified
+ copies of this license document, and changing it is allowed as long
+ as the name is changed.
+
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. You just DO WHAT THE FUCK YOU WANT TO.

README.md

@@ -0,0 +1,2 @@
+## con.cortex site
+yeah

index.html

@@ -11,48 +11,33 @@
 
   <div class="background"></div>
 
-  <!-- Header logo -->
   <header class="logo-header">
     <p><span style="color: #FF4B4B;">con.</span>cortex</p>
   </header>
 
   <div class="grid-container">
-
-    <div class="grid-item">
-      <a href="https://www.reddit.com/user/polarmind/" class="grid-link">&#xf1a1;</a>
-    </div>
-
     <div class="grid-item">
       <a href="https://www.youtube.com/@KorboDuo" class="grid-link" style="color: #FF4B4B;">&#xf16a;</a>
     </div>
-
-    <div class="grid-item"></div> 
-
     <div class="grid-item">
       <a href="https://github.com/korboduo" class="grid-link">&#xf09b;</a>
     </div>
-
     <div class="grid-item"></div> 
-
+    <div class="grid-item">
+      <a href="https://www.twitch.tv/korboduo" class="grid-link">&#xf1e8;</a>
+    </div>
+    <div class="grid-item"></div>
     <div class="grid-item">
       <a href="https://korboduo.itch.io/" class="grid-link" style="color: #FF4B4B;">&#xef99;</a>
-    
     </div>
-        <div class="grid-item">
-      <a href="https://www.youtube.com/@concortex" class="grid-link">&#xf16a;</a>
-    
-    </div>
-    
-    <div class="grid-item"></div> 
-
-    <div class="grid-item"></div> 
-    
-    <div class="grid-item"></div>
-    
     <div class="grid-item">
-      <a href="mailto:korboduo@gmail.com" class="grid-link">&#xf02ab;</a>
+      <a href="https://www.youtube.com/@concortex" class="grid-link">&#xf16a;</a>
-    </div>   
+    </div>
   </div>
 
+  <footer class="footer">
+    KorboDuo © 2025 — Licensed under <a href="LICENSE" target="_blank">WTFPL</a>
+  </footer>
+
 </body>
-</html>
+</html>

style.css

@@ -1,21 +1,41 @@
-
+/* Import all font weights and styles */
+@font-face {
+  font-family: 'SauceCodePro NF';
+  src: url('fonts/SauceCodeProNerdFont-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
 @font-face {
   font-family: 'SauceCodePro NF';
   src: url('fonts/SauceCodeProNerdFont-Regular.ttf') format('truetype');
-  font-weight: normal;
+  font-weight: 400;
   font-style: normal;
 }
-
+@font-face {
-.nerd-icon {
+  font-family: 'SauceCodePro NF';
-  font-size: 32px;
+  src: url('fonts/SauceCodeProNerdFont-Italic.ttf') format('truetype');
-  color: #333;
+  font-weight: 400;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'SauceCodePro NF';
+  src: url('fonts/SauceCodeProNerdFont-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'SauceCodePro NF';
+  src: url('fonts/SauceCodeProNerdFont-BoldItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
 }
 
+/* Base reset and layout */
 body, html {
   margin: 0;
   padding: 0;
   height: 100%;
-  font-family: Arial, sans-serif;
+  font-family: 'SauceCodePro NF', monospace;
   display: flex;
   flex-direction: column;
   justify-content: center; 
@@ -26,49 +46,26 @@ body, html {
   user-select: none;
 }
 
-
 .background {
   position: fixed;
   top: 0;
   left: 0;
+  background: url('images/bg.png') center center / cover no-repeat;
+  height: 100vh;
   width: 100%;
-  height: 100%;
-  background: url('images/bg.png') center center / contain no-repeat;
-  background-size: auto;
   z-index: 0;
   pointer-events: none;
 }
 
 .logo-header {
-  font-family: 'SauceCodePro NF', serif;
+  font-weight: 400;
   font-size: 48px;
   color: white;
   position: relative;
   z-index: 1;
 }
 
-.logo-header img {
+/* Grid */
-  max-width: 200px;
-  width: 40%;
-  height: auto;
-  display: block;
-}
-
-.center-image {
-  position: relative;
-  z-index: 1;
-  margin-top: 20px;
-  resize: none;
-}
-
-.center-image img {
-  max-width: 250px;
-  width: 50%;
-  height: auto;
-  display: block;
-  margin: 0 auto;
-}
-
 .grid-container {
   display: grid;
   grid-template-columns: repeat(4, 120px);
@@ -78,8 +75,16 @@ body, html {
   z-index: 1;
 }
 
+@media (max-width: 768px) {
+  .grid-container {
+    grid-template-columns: repeat(3, 90px);
+    grid-template-rows: repeat(4, 90px);
+    gap: 20px;
+    margin-top: 40px;
+  }
+}
+
 .grid-item {
-  font-family: 'SauceCodePro NF', serif;
   background: white;
   display: flex;
   justify-content: center;
@@ -115,3 +120,14 @@ body, html {
   background: transparent;
   pointer-events: none;
 }
+
+/* Footer */
+.footer {
+  position: absolute;
+  bottom: 18px;
+  font-size: 14px;
+  color: #ddd;
+  font-weight: 300;
+  font-family: 'SauceCodePro NF', monospace;
+  z-index: 1;
+}