#FONTS here
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@400;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">

<script type="text/javascript"> //MOUSE EFFECT SPARKLE
// <![CDATA[
var colour="random"; // in addition to "random" can be set to any valid colour eg "#f0f" or "red"
var sparkles=95;

/****************************
*  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>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fijy's HUB</title>
    <link rel="stylesheet" href="styles.css">
	<link rel="icon" type="image/png" href="images/logo.png">
</head>
<body>
    <header></header>
    <nav>
        <a href="arcade.html" style="font-family: 'Comic Sans MS'; color: #c7a034; font-size: 20px;"><u><i>Arcade</i></u></a>
        <a href="victorian_aboutme.html" style="font-family: 'Comic Sans MS'; color: #c7a034; font-size: 20px;"><u><i>About</i></u></a>
        <a href="gallery.html" style="font-family: 'Comic Sans MS'; color: #c7a034; font-size: 20px;"><u><i>Gallery (NEW)</i></u></a>
        <a href="blog.html" style="font-family: 'Comic Sans MS'; color: #c7a034; font-size: 20px;"><u><i>Blog</i></u></a>
    </nav>
    <div class="container">
        <div class="left-container">
            <div class="column left">
                <b style="font-family: 'Comic Sans MS'; color: #c7a034; font-size: 20px;">
                    <u><img src="https://www.mazeguy.net/fantasy/alien.gif" style="width: 20px; height: auto;">Welcome Alien #:</u>
                </b>
                <div align="center">
                    <img src="https://www.mazeguy.net/fantasy/ufo.gif" style="width: 20px; height: auto;">
                    <img src="https://www.mazeguy.net/fantasy/flyingspaghetti.gif" style="width: 30px; height: auto;">
                    <a href="https://www.free-website-hit-counter.com">
                        <img src="https://www.free-website-hit-counter.com/c.php?d=5&id=171473&s=2" alt="Hit Counter">
                        <img src="https://www.mazeguy.net/fantasy/flyingspaghetti.gif" style="width: 30px; height: auto;">
                        <img src="https://www.mazeguy.net/fantasy/ufo.gif" style="width: 20px; height: auto;">
                    </a><br>
					<p style="font-family: 'Comic Sans MS'; color: #62d7d9; font-size: 13px;"> Have a chat with other visitors!</p>
                </div>
                <iframe src="https://www3.cbox.ws/box/?boxid=3538225&boxtag=BLnfnQ" width="105%" height="390" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe>
                <div class="infobox">
                        <span class="infobox-title">Left Infobox 2</span>
                    <div align="center">
                        Left infobox 2 content goes here.
                    </div>
                </div>
            </div>
        </div>
        <div class="center-wrapper">
            <div class="center-container">
                <div class="window-header">
                    <span class="window-title">Fijy_HUB.exe</span>
                    <div class="window-controls">
                        <button class="window-btn" id="minimize">_</button>
                        <button class="window-btn" id="maximize">&#9744;</button>
                        <button class="window-btn" id="close">&times;</button>
                    </div>
                </div>
                <div class="menu-bar">
                    <span class="menu-item">File</span>
                    <span class="menu-item">Edit</span>
                    <span class="menu-item">View</span>
                    <span class="menu-item">Help</span>
                </div>
                <div class="column center">
                    <div class="section">
                        <p style="font-family: 'Comic Sans MS'; color: #dd42f5; font-size: 23px;"><i><b><u>Newest Announcement:</i></b></u></p>
						<img src="images/star.gif" alt="Custom Placement GIF" style="position: absolute; top: -30px; left: 875px; scale: 50%;">
						<img src="images/fijy3D.gif" alt="Custom Placement GIF" style="position: absolute; top: 25px; left: 500px; transform: rotate(8deg);">
						<img src="images/musicbar.gif" alt="Custom Placement GIF" style="position: absolute; top: 290px; left: 160px;">
						<img src="images/megaphone.gif" alt="Custom Placement GIF" style="position: absolute; top: -50px; left: 130px; transform: rotate(15deg); scale: 25%;">
						<p style="font-family: 'Comic Sans MS'; color: #fae34b; font-size: 15px;"> Hello everyone, and Welcome! :) The arcade is the current project on the list,<br />  with all the best flash game classics! Then back to the About me page</p>
						<img src="images/underconstruction.gif">
						<p style="font-family: 'Comic Sans MS'; color: #fae34b; font-size: 15px;"> SITE STILL UNDER DEVELOPMENT, MORE UPDATES SOON </p><br>
						<div class="song-of-the-week" style="border: 3px solid #00FF00; padding: 10px; background-color: #000000; text-align: center; width: 80%; margin: 20px auto;">
						<h2 style="font-family: 'Comic Sans MS'; color: #00FF00; font-size: 20px;">
							<marquee behavior="scroll" direction="left" scrollamount="5">🎶 Song of the Week 🎶</marquee>
						</h2>
						<div style="font-family: 'Comic Sans MS'; color: #FFFFFF; opacity: 1; font-size: 16px;">
							<p style="font-family: 'Comic Sans MS'; color: #fae34b; font-size: 12px; position: absolute; top: 400px; left: 450px; rotate: 25deg;">
								For more music recommendations,<br> head to "about"!
							</p>
							<p><b>Track:</b> <span style="color: #FF00FF;">"Paralyzer"</span></p>
							<p><b>Artist:</b> <span style="color: #fae34b;">Finger Eleven</span></p>
							<p><b>Release Year:</b> <span style="color: #FF00FF;">2007</span></p>
							<img src="images/dragon.gif" alt="Custom Placement GIF" style="position: absolute; top: 350px; left: 130px; transform: rotate(10deg);">
							<a href="https://www.youtube.com/watch?v=BJk6gZuPKRE" target="_blank" style="font-size: 16px; color: #FFFF00; text-decoration: underline;">Watch On Youtube!</a>
							<img src="images/alienmusic.gif" alt="Custom Placement GIF" style="position: absolute; top: 550px; left: 130px;">
							<img src="images/jukebox.gif" alt="Custom Placement GIF" style="position: absolute; top: 525px; left: 475px; transform: rotate(-5deg); scale: 100%;">
						</div>
						
						<div style="margin-top: 15px;">
							<img src="images/Finger_eleven_paralyzer.png" width="150" height="150" style="border: 2px solid #FF00FF;">
						</div>
						</div>
							<div class="patch-notes-container">
								<!-- Individual patch note entries -->
								<div class="patch-note">
									<div class="patch-note-date">
										[01/05/2024]<br>Version: 1.0!!!</br><br>
										Mood: <img src="images/celebrate.gif" alt="Mood GIF">
									</div>
									<div class="patch-note-description">
										🎉🥳 Fijy.net domain has officially been migrated and is now privately hosted! 🥳🎉 No more cloud!!! We also secured SSL encryption, you can trust your connection is secure!
									</div>
								</div>
								<div class="patch-note">
									<div class="patch-note-date">
										[01/05/2024]<br>Version: 0.9</br><br>
										Mood: <img src="images/littlecomputerpeople.gif" alt="Mood GIF">
									</div>
									<div class="patch-note-description">
										Major upgrade so site completed in basically a day. The Gallery, featuring my AI art gallery, on a Vista PC! Also along with real-life photos! Other personal work will be added very soon.
									</div>
								</div>
							</div>
					</div>
                </div>
            </div>
            <div class="image-container">
                <img src="images/anybrowser.gif" width="110" height="41">
                <img src="images/csplayer.gif" width="110" height="41">
                <img src="images/blizzlogo.gif" width="110" height="41">
                <img src="images/free.gif" width="110" height="41">
                <img src="images/freespeechforever.gif" width="110" height="41">
                <img src="images/fresh.gif" width="110" height="41">
            </div>
            <div class="center-container1">
                <div class="window-header1">
                    <span class="window-title1">My Boy Woofus!.exe</span>
                    <div class="window-controls">
                        <button class="window-btn1" id="minimize1">_</button>
                        <button class="window-btn1" id="maximize1">&#9744;</button>
                        <button class="window-btn1" id="close1">&times;</button>
                    </div>
                </div>
                <div class="menu-bar">
                    <span class="menu-item">File</span>
                    <span class="menu-item">Edit</span>
                    <span class="menu-item">View</span>
                    <span class="menu-item">Help</span>
                </div>
                <div class="column center">
                    <div class="section">
                        <iframe width="314" height="321" scrolling="no" src="https://gifypet.neocities.org/pet/pet.html?name=Woofus&dob=1718089380&gender=m&element=Earth&pet=dog.gif&map=night.gif&background=1995.png&tablecolor=%23fea50b&textcolor=white" frameborder="0"></iframe>
                    </div>
                    <div class="section">
                        <p>Additional content goes here.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="right-container">
            <div class="column right">
                <div class="infobox">
                    <div align="center">
						<img src="images/OG1.jpg" width="175" height="175">
						<b style="font-family: 'Comic Sans MS'; color: #fae34b; font-size: 12px;">
						 <u>   Fijy "The Law"<br></u>
						 <br>
						
						<a href="https://www.youtube.com/watch?v=zftx-fsoX30" target="_blank" style="color: #fae34b;">- WR COD Gun Game 1:30</a><br>
						<br>
						<a href="https://www.youtube.com/watch?v=GVnuLznGHJc" target="_blank" style="color: #fae34b;">- Former #1 Brawlhalla US</a><br>
						<br>
						<a href="https://www.youtube.com/watch?v=nDbeu5q0IEc" target="_blank" style="color: #fae34b;">- #1 K/D Ch. 1 S. 5 Fortnite</a><br>
						<br>
						<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" style="color: #fae34b;">- Overwatch Top 500 CTF, GM</a><br>
						<br>
						<a href="https://www.youtube.com/watch?v=zq1PVBotIrQ" target="_blank" style="color: #fae34b;">- VAC Banned CS:GO (Overwatch)</a><br>
						<br>
						<a href="https://www.youtube.com/watch?v=BNfG-WC-QAg&" target="_blank" style="color: #fae34b;">- Dank Squeaker</a><br>
						<br>
						<a href="https://www.youtube.com/watch?v=vogLP-69lQo" target="_blank" style="color: #fae34b;">- 1v5 JoshOG</a><br>
						</b>
                    </div>
                </div>
            </div>
				<div class="column right">
					<div class="infobox">
						<div align="center">
							More Right Column Content
						</div>
					</div>
				</div>
			</div>
        </div>
    </div>
</body>
</html>