/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
   <html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Just Another Void</title>
    <script type="text/javascript">
// <![CDATA[
var colour="random"; // in addition to "random" can be set to any valid colour eg "#f0f" or "red"
var sparkles=50;

/****************************
*  Tinkerbell Magic Sparkle *
*(c)2005-13 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();

window.onload=function() { if (document.getElementById) {
  var i, rats, rlef, rdow;
  for (var i=0; i<sparkles; i++) {
    var rats=createDiv(3, 3);
    rats.style.visibility="hidden";
    rats.style.zIndex="999";
    document.body.appendChild(tiny[i]=rats);
    starv[i]=0;
    tinyv[i]=0;
    var rats=createDiv(5, 5);
    rats.style.backgroundColor="transparent";
    rats.style.visibility="hidden";
    rats.style.zIndex="999";
    var rlef=createDiv(1, 5);
    var rdow=createDiv(5, 1);
    rats.appendChild(rlef);
    rats.appendChild(rdow);
    rlef.style.top="2px";
    rlef.style.left="0px";
    rdow.style.top="0px";
    rdow.style.left="2px";
    document.body.appendChild(star[i]=rats);
  }
  set_width();
  sparkle();
}}

function sparkle() {
  var c;
  if (Math.abs(x-ox)>1 || Math.abs(y-oy)>1) {
    ox=x;
    oy=y;
    for (c=0; c<sparkles; c++) if (!starv[c]) {
      star[c].style.left=(starx[c]=x)+"px";
      star[c].style.top=(stary[c]=y+1)+"px";
      star[c].style.clip="rect(0px, 5px, 5px, 0px)";
      star[c].childNodes[0].style.backgroundColor=star[c].childNodes[1].style.backgroundColor=(colour=="random")?newColour():colour;
      star[c].style.visibility="visible";
      starv[c]=50;
      break;
    }
  }
  for (c=0; c<sparkles; c++) {
    if (starv[c]) update_star(c);
    if (tinyv[c]) update_tiny(c);
  }
  setTimeout("sparkle()", 40);
}

function update_star(i) {
  if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
  if (starv[i]) {
    stary[i]+=1+Math.random()*3;
    starx[i]+=(i%5-2)/5;
    if (stary[i]<shigh+sdown) {
      star[i].style.top=stary[i]+"px";
      star[i].style.left=starx[i]+"px";
    }
    else {
      star[i].style.visibility="hidden";
      starv[i]=0;
      return;
    }
  }
  else {
    tinyv[i]=50;
    tiny[i].style.top=(tinyy[i]=stary[i])+"px";
    tiny[i].style.left=(tinyx[i]=starx[i])+"px";
    tiny[i].style.width="2px";
    tiny[i].style.height="2px";
    tiny[i].style.backgroundColor=star[i].childNodes[0].style.backgroundColor;
    star[i].style.visibility="hidden";
    tiny[i].style.visibility="visible"
  }
}

function update_tiny(i) {
  if (--tinyv[i]==25) {
    tiny[i].style.width="1px";
    tiny[i].style.height="1px";
  }
  if (tinyv[i]) {
    tinyy[i]+=1+Math.random()*3;
    tinyx[i]+=(i%5-2)/5;
    if (tinyy[i]<shigh+sdown) {
      tiny[i].style.top=tinyy[i]+"px";
      tiny[i].style.left=tinyx[i]+"px";
    }
    else {
      tiny[i].style.visibility="hidden";
      tinyv[i]=0;
      return;
    }
  }
  else tiny[i].style.visibility="hidden";
}

document.onmousemove=mouse;
function mouse(e) {
  if (e) {
    y=e.pageY;
    x=e.pageX;
  }
  else {
    set_scroll();
    y=event.y+sdown;
    x=event.x+sleft;
  }
}

window.onscroll=set_scroll;
function set_scroll() {
  if (typeof(self.pageYOffset)=='number') {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
  }
  else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
  }
  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
    sdown=document.documentElement.scrollTop;
  }
  else {
    sdown=0;
    sleft=0;
  }
}

window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)=='number' && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min;
  shigh=sh_min;
}

function createDiv(height, width) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.height=height+"px";
  div.style.width=width+"px";
  div.style.overflow="hidden";
  return (div);
}

function newColour() {
  var c=new Array();
  c[0]=255;
  c[1]=Math.floor(Math.random()*256);
  c[2]=Math.floor(Math.random()*(256-c[1]/2));
  c.sort(function(){return (0.5 - Math.random());});
  return ("rgb("+c[0]+", "+c[1]+", "+c[2]+")");
}
// ]]>
</script>
    
    <style>
        /* --- CYBERPUNK AESTHETICS --- */
        body {
            background-color: #050505;
            /* Creates a futuristic glowing wireframe grid */
            background-image: 
                linear-gradient(transparent 95%, rgba(0, 255, 255, 0.2) 95%), 
                linear-gradient(90deg, transparent 95%, rgba(0, 255, 255, 0.2) 95%);
            background-size: 30px 30px;
            color: #00ffff; /* Neon Cyan */
            font-family: 'Courier New', Courier, monospace;
            margin: 0;
            padding: 20px;
        }

        /* Main Container with a glowing border */
        .system-container {
            max-width: 900px;
            margin: 0 auto;
            background: rgba(0, 0, 0, 0.85); /* Slightly transparent black */
            border: 2px solid #ff00ff; /* Neon Magenta */
            box-shadow: 0 0 15px rgba(255, 0, 255, 0.5), inset 0 0 15px rgba(255, 0, 255, 0.2);
            padding: 20px;
            /* Angled corners for that sci-fi UI look */
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
        }

        /* Header Area */
        header {
            border-bottom: 2px dashed #00ffff;
            padding-bottom: 20px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }

        h1 {
            color: #fcee0a; /* Cyberpunk Yellow */
            font-size: 2.5em;
            margin: 0;
            text-transform: uppercase;
            text-shadow: 2px 2px 0px #ff0000;
            letter-spacing: -2px;
        }

        .system-status {
            color: #00ff00; /* Hacker Green */
            font-size: 0.9em;
            text-shadow: 0 0 5px #00ff00;
        }

        /* Navigation Buttons */
        nav {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
        }

        .nav-btn {
            background-color: #000;
            color: #00ffff;
            border: 1px solid #00ffff;
            padding: 8px 15px;
            font-family: inherit;
            font-weight: bold;
            text-decoration: none;
            text-transform: uppercase;
            transition: 0.2s;
        }

        .nav-btn:hover {
            background-color: #00ffff;
            color: #000;
            box-shadow: 0 0 10px #00ffff;
        }

        /* Split Layout */
        .layout-grid {
            display: flex;
            gap: 20px;
        }

        /* Sidebar */
        .sidebar {
            width: 250px;
            flex-shrink: 0;
        }

        .widget {
            border: 1px solid #ff00ff;
            padding: 15px;
            margin-bottom: 20px;
            background: #111;
        }

        .widget h3 {
            color: #ff00ff;
            margin-top: 0;
            border-bottom: 1px solid #333;
            padding-bottom: 5px;
            text-transform: uppercase;
            font-size: 1em;
        }

        .widget ul {
            list-style-type: square;
            padding-left: 15px;
            color: #fcee0a;
        }

        .widget a {
            color: #c0c0c0;
            text-decoration: none;
        }

        .widget a:hover {
            color: #fff;
            background: #ff00ff;
        }

        /* Main Content / Terminal Screen */
        .feed {
            flex-grow: 1;
        }

        .post {
            border-left: 4px solid #fcee0a;
            padding-left: 15px;
            margin-bottom: 40px;
            background: linear-gradient(90deg, rgba(252, 238, 10, 0.1) 0%, transparent 100%);
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .post-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #333;
            margin-bottom: 15px;
            padding-bottom: 5px;
        }

        .post-title {
            color: #fff;
            font-size: 1.5em;
            margin: 0;
            text-transform: uppercase;
        }

        .post-date {
            color: #ff00ff;
            font-size: 0.8em;
        }

        .post-body {
            color: #e0e0e0;
            line-height: 1.6;
        }

        .read-more {
            display: inline-block;
            margin-top: 10px;
            color: #fcee0a;
            text-decoration: none;
            border-bottom: 1px dotted #fcee0a;
        }
        
        .read-more:hover {
            background: #fcee0a;
            color: #000;
        }

        /* Footer */
        footer {
            margin-top: 40px;
            border-top: 2px dashed #00ffff;
            padding-top: 15px;
            text-align: center;
            font-size: 0.8em;
            color: #555;
        }

        /* Mobile Adjustments */
        @media (max-width: 700px) {
            .layout-grid { flex-direction: column; }
            .sidebar { width: auto; }
            header { flex-direction: column; align-items: flex-start; gap: 10px; }
        }
    </style>
<style class="injected-cursor-style">body { cursor: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='cyan' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4l16 6-7 2-2 7-7-15z'/%3E%3C/svg%3E") 4 4, auto; } body:active { cursor: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='magenta' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4l16 6-7 2-2 7-7-15z'/%3E%3C/svg%3E") 4 4, auto; }</style><!-- PURE CSS TV STATIC -->

<!-- PARALLAX SCROLLING STARS -->

<!-- VAPORWAVE GRID BACKGROUND -->

<!-- Y2K CHECKERBOARD BACKGROUND -->
<!-- CRT SCANLINE OVERLAY -->

<!-- VAPORWAVE GRID BACKGROUND -->

<!-- CSS FLOATING BUBBLES -->

<!-- PURE CSS WARP SPEED -->

<!-- PURE CSS PLASMA ORBS -->

<!-- PURE CSS CYBERPUNK SCANNER -->

<!-- PURE CSS BOUNCING SCREENSAVER -->

<!-- VAPORWAVE GRID BACKGROUND -->

<!-- PARALLAX SCROLLING STARS -->

<!-- PURE CSS WARP SPEED -->

<!-- PARALLAX SCROLLING STARS -->
<style class="injected-bg-style">
.star-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: -1; overflow: hidden; }
.stars-small, .stars-large { position: absolute; top: 0; left: 0; background: transparent; }
/* Note: Add more coordinates to the box-shadow to add more stars! */
.stars-small { width: 2px; height: 2px; box-shadow: 100px 200px #fff, 300px 50px #fff, 500px 400px #fff, 700px 150px #fff, 900px 600px #fff, 1100px 300px #fff, 50px 800px #fff, 400px 750px #fff, 800px 900px #fff, 1200px 100px #fff; animation: starScroll 50s linear infinite; }
.stars-large { width: 4px; height: 4px; box-shadow: 200px 100px #fff, 600px 300px #fff, 1000px 500px #fff, 150px 700px #fff, 850px 800px #fff; animation: starScroll 25s linear infinite; }
@keyframes starScroll { from { transform: translateY(100vh); } to { transform: translateY(-100vh); } }
</style>
   

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}