

 <!-- HI So if ur gonna use my code all i ask is u make it personal to u. Like u can take whatever u want but PLS tweak things at least a LITTLE because the joy of making ur own site is that it is URS. ok thx 
 
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠞⠓⢄⠀⠀⠀⠀⠀⢀⣀⣀⣀⣀⣀⣀⣀⣀⡀⠀⠀⠀⠀⠀⢀⡠⠊⢱⡄⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡎⠀⠀⠀⠙⠾⣿⠛⠛⠛⠋⠉⠉⠉⠉⠉⠉⠙⠛⠻⢿⣶⣶⡴⠋⠀⠀⠀⢻⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣾⠅⠀⠀⠀⠀⠀⢻⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣴⡏⡀⠀⠀⠀⠀⢸⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣾⠟⣿⠀⢠⠀⠤⠒⠀⣰⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣆⠀⠀⠀⠀⠀⢸⡄⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣾⠟⠁⠀⠹⣧⣄⣀⣤⣴⠿⠏⠀⣠⡶⠶⣤⠀⠀⠀⠀⠀⠀⠀⢠⡶⠶⣟⠳⢦⣤⣀⣠⣼⣷⡀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣿⠏⠀⠀⠀⠀⠈⠉⠉⠉⠀⠀⠀⠀⠸⢦⣤⠟⠀⠀⣤⠶⠶⢦⡄⠸⢦⣤⠟⠀⠀⠈⠉⠉⠉⢿⣧
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡟⠀⠀⠀⢀⣠⣤⣤⣤⣤⣀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣿⣦⣴⣾⣃⠀⠀⠀⠀⠀⢀⣠⣶⣶⣄⠸⣿
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡧⠀⠀⢠⣾⣿⣿⣿⠟⠛⠛⠿⣶⣦⣤⣤⣤⣴⡾⠿⠋⠁⠈⠙⠻⢿⣶⣶⣶⣾⡿⠛⠉⠻⣿⡇⢿
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸⡇⢠⡆⢸⣿⣿⣿⡇⠀⠀⠀⠀⠈⢿⣿⣿⣿⠁⠀⠀⠀⠀⠀⠀⠀⠀⢿⣿⣿⣿⠁⠀⠀⠀⣿⣿⣿
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⣿⡞⠁⢸⣿⣿⣿⣿⡀⠀⠀⠀⠀⠈⠻⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⠟⠁⠀⠀⠀⢸⣿⣿⡿
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⣷⡄⠸⣿⣿⣿⠙⠇⢠⢸⣦⣷⣴⣦⣬⡃⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣃⣤⣤⣤⣆⣼⢋⣾⣿⠇
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⣿⣄⣿⣿⣿⣧⠀⠘⣿⡏⠀⢸⣟⣿⣿⠏⢲⠀⠀⠀⠀⠀⢠⡞⢹⣿⣿⣿⠀⠈⣹⣿⣿⠏⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢻⣿⣿⣿⣿⣧⠀⠈⠙⠲⣦⣿⡿⠿⠟⠋⠀⠀⠀⠀⠀⠀⠙⠲⠿⣿⣯⡶⠚⢋⣿⠋⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⣿⣿⣧⡀⠀⠀⠀⠀⠀⠀⠀⢴⡀⠀⣀⡀⠀⢠⡄⠀⠀⠀⠀⠀⣴⡿⠃⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⢶⣤⣼⠟⢻⣿⣿⣧⠀⠀⠀⠀⠀⠀⠀⠈⠻⡾⠉⠙⠿⠏⠀⠀⠀⣀⣴⣾⣿⣧⣀⣤⡶⠋
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⣿⣿⣿⣿⣿⣿⣶⣦⣤⣀⣀⠀⠀⣀⣀⣀⣀⣀⣀⣠⣴⣶⠿⠛⠻⣿⣿⣿⡿⠋⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣼⠁⠙⠿⣿⠟⠋⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠛⣿⠀⠀⠀⠀⠈⠙⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡏⠀⠀⢶⡀⠈⠈⣿⣿⣿⣿⣿⣿⣿⣿⡿⣿⣿⣿⡉⠙⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡇⠀⠀⠘⣧⠀⢠⣿⣿⣿⣿⣿⢹⣿⣿⢳⣿⣿⣿⡇⠀⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠇⠀⠀⠀⢹⡆⢸⣿⣿⣿⣽⣿⣿⣿⣧⣿⣿⣿⣿⠃⠀⢹⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠀⠀⠀⠀⠀⢿⠸⣿⣿⣿⣿⣿⣿⣿⣹⣿⣿⣿⣿⡀⠀⢸⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠠⡿⠀⠀⠀⠀⠀⠘⣇⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡏⠀⢸⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰⡏⠀⠀⠀⠀⠀⠀⢻⡿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠿⠿⣿⠀⣸⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡇⠀⠀⠀⠄⠀⠀⢸⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⡀⢸⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣾⡇⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⢀⣴⠞⠋⠀⠀⠀⠀⢸⡇⢸⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣀⣀⣠⣤⣶⡿⠛⣿⠁⠀⠀⡀⠀⠀⠀⢸⠀⠀⠀⠀⠸⣿⠀⠀⠀⠀⠀⠀⢸⡇⠀⢿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⣴⣶⠿⠿⠟⠛⠛⠛⠛⠋⠉⢉⣀⣤⣴⣿⠀⠀⠀⠀⠈⠀⠀⢸⡇⠀⠀⠀⠀⣿⠀⠀⠀⠀⠀⠀⠀⣷⡀⠘⣧⡀⠀⠀⠀⠀⠀⠀⠀⠀
⠻⢿⣶⣤⣤⣴⡶⠶⠶⣟⣻⣿⣭⡽⠶⠿⣦⡀⠀⠀⠀⠀⠀⢘⣥⣤⣤⣤⣴⣿⡆⠀⣠⣶⠿⠛⠛⠛⠻⢶⣌⡙⠲⣤⣀⠀⠀⠀⠀⠀
⠀⠀⠀⣠⣤⣴⠖⠚⠋⠉⠉⠀⠀⠀⠀⠀⠈⠛⠆⠀⠀⠀⢠⣾⠋⠉⠉⠉⠉⠹⢿⣿⣟⣁⡀⠀⠀⠀⠀⠀⠹⣿⣄⣀⣉⣛⣲⣤⣀⠀
⠀⠀⠀⠈⠉⠉⠛⠛⠛⠛⠒⠶⠶⠶⠦⠤⣤⣤⣤⣤⣤⠶⠞⠿⠶⣶⣤⣤⣤⣴⣾⡿⠉⠙⠛⠻⠶⠶⠶⠶⠿⠟⠉⠉⠉⠉⠉⠉⠉⠁
 -->


<!DOCTYPE html>

<!-- mouse sound effect -->  
<script>
 
// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)
// Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
 
//** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)
//** Call: uniquevar.playclip() to play sound
 
var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}
 
function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/\.(\w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}
else{
return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
}
}
 
//Initialize two sound clips with 1 fallback file each:
 
var mouseoversound=createsoundbite("")
var clicksound=createsoundbite("")
 
</script>
 
<script>
document.getElementById("img").addEventListener("click", function(){
document.getElementById("audio").play();
});
</script>



<!DOCTYPE html>
<html>
 <head>
 
 <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DE7CNYKF9R"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-DE7CNYKF9R');
</script>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title> Web Journal ♪ </title>
  <script src="https://toromi.moe/textshit.js"></script>
       <link rel="shortcut icon" href="https://64.media.tumblr.com/f4916c21781abe35270894a8cf5e1c6b/68d2c65169630831-90/s75x75_c1/af11e6c36a93e81d36f482b999ab6eea04e7c9e1.gifv">
  
  
  <script src="https://unpkg.com/webamp@1.4.0/built/webamp.bundle.min.js"></script>
  
  
  
 </head>




<style>
    * {cursor: url('https://files.catbox.moe/fmircr.cur'), auto !important;}
</style>

 <style>
body {
background-color: black;
}
img {
filter: sepia(0%) hue-rotate(0deg) saturate(1.2);

</style>
 
<script>
// <![CDATA[
var colours = new Array('#FFB6C1', '#FFC0CB', '#FF91A4', '#FFA6C9', '#FFB3DE', '#FFD1DC');
var minisize=16; // smallest size of hearts in pixels
var maxisize=28; // biggest size of hearts in pixels
var hearts=120; // maximum number of hearts on screen
var over_or_under="over"; // set to "over" for hearts to always be on top, or "under" to allow them to float behind other objects

/*****************************
*JavaScript Love Heart Cursor*
*  (c)2013+ 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 herz=new Array();
var herzx=new Array();
var herzy=new Array();
var herzs=new Array();
var kiss=false;

if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}

addRVLoadEvent(mwah);

function mwah() { if (document.getElementById) {
  var i, heart;
  for (i=0; i<hearts; i++) {
    heart=createDiv("auto", "auto");
    heart.style.visibility="hidden";
	heart.style.zIndex=(over_or_under=="over")?"1001":"0";
    heart.style.color=colours[i%colours.length];
	heart.style.pointerEvents="none";
    if (navigator.appName=="Microsoft Internet Explorer") heart.style.filter="alpha(opacity=75)";
    else heart.style.opacity=0.45;
    heart.appendChild(document.createTextNode(String.fromCharCode(9829)));
    document.body.appendChild(heart);
    herz[i]=heart;
	herzy[i]=false;
  }
  set_scroll();
  set_width();
  herzle();
}}

function herzle() {
  var c;
  if (Math.abs(x-ox)>1 || Math.abs(y-oy)>1) {
    ox=x;
    oy=y;
    for (c=0; c<hearts; c++) if (herzy[c]===false) {
	  herz[c].firstChild.nodeValue=String.fromCharCode(9829);
      herz[c].style.left=(herzx[c]=x-minisize/2)+"px";
      herz[c].style.top=(herzy[c]=y-minisize)+"px";
      herz[c].style.fontSize=minisize+"px";
	  herz[c].style.fontWeight='normal';
      herz[c].style.visibility='visible';
      herzs[c]=minisize;
      break;
    }
  }
  for (c=0; c<hearts; c++) if (herzy[c]!==false) blow_me_a_kiss(c);
  setTimeout("herzle()", 30);
}

document.onmousedown=pucker;
document.onmouseup=function(){clearTimeout(kiss);};

function pucker() {
  ox=-1;
  oy=-1;
  kiss=setTimeout('pucker()', 100);
}

function blow_me_a_kiss(i) {
  herzy[i]-=herzs[i]/minisize+i%2;
  herzx[i]+=(i%5-2)/5;
  if (herzy[i]<sdown-herzs[i] || herzx[i]<sleft-herzs[i] || herzx[i]>sleft+swide-herzs[i]) {
    herz[i].style.visibility="hidden";
    herzy[i]=false;
  }
  else if (herzs[i]>minisize+1 && Math.random()<2.5/hearts) break_my_heart(i);
  else {
    if (Math.random()<maxisize/herzy[i] && herzs[i]<maxisize) herz[i].style.fontSize=(++herzs[i])+"px";
    herz[i].style.top=herzy[i]+"px";
    herz[i].style.left=herzx[i]+"px";
  }
}

function break_my_heart(i) {
  var t;
  herz[i].firstChild.nodeValue=String.fromCharCode(9676);
  herz[i].style.fontWeight='bold';
    herzy[i]=false;
  for (t=herzs[i]; t<=maxisize; t++) setTimeout('herz['+i+'].style.fontSize="'+t+'px"', 60*(t-herzs[i]));
  setTimeout('herz['+i+'].style.visibility="hidden";', 60*(t-herzs[i]));
}

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.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;
}

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;
  }
}

function createDiv(height, width) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.height=height;
  div.style.width=width;
  div.style.overflow="hidden";
  div.style.backgroundColor="transparent";
  return (div);
}
// ]]>
</script>

 <style>
  body{
background-image: url('https://files.catbox.moe/rgvjgz.png');
font-family: mamemoji;

}
        h2 {
  font-size: 14px;
  padding: 10px 5px;
  font-family: mamemoji;
  text-align: left;  
    width:280px;
    height:21px;
    margin-bottom:10px;
    padding-left:4px;
    border-radius:2px;
    border-color:#ffd9ed;
    border-radius: 0px;
background: linear-gradient(#f7d8e8, #f8c6db 40%, #fff5fa);
 box-shadow: #fff6 0px 0px 2px 3px inset;
    margin: 0px;
    color: white;

}
        h6 {
  font-size: 14px;
  padding: 10px 5px;
  font-family: mamemoji;
  text-align: left;  
    width:272px;
    margin-bottom:10px;
    padding-left:4px;
    border-radius:2px;
    border-color:#ffd9ed;
    border-radius: 0px;
background: linear-gradient(#f7d8e8, #f8c6db 40%, #fff5fa);
 box-shadow: #fff6 0px 0px 2px 3px inset;
    margin: 0px;
    color: white;

}
        h7 {
 width: 175px;
 height: 40px;
 margin-top: 20px;
 margin-left: 5px;

}
        h4 {
  font-size: 14px;
  padding: 10px 5px;
  font-family: mamemoji;
  text-align: left;  
    width:628px;
    height:21px;
    margin-bottom:10px;
    padding-left:4px;
    border-radius:2px;
    border-color:#ffd9ed;
    border-radius: 0px;
background: linear-gradient(#f7d8e8, #f8c6db 40%, #fff5fa);
 box-shadow: #fff6 0px 0px 2px 3px inset;
    margin: 0px;
    color: white;

}

        h5 {
  font-size: 14px;
  padding: 10px 5px;
  font-family: mamemoji;
  text-align: left;  
    width:628px;
    height:21px;
    margin-bottom:10px;
    padding-left:4px;
    border-radius:2px;
    border-color:#ffd9ed;
    border-radius: 0px;
background: linear-gradient(#f7d8e8, #f8c6db 40%, #fff5fa);
 box-shadow: #fff6 0px 0px 2px 3px inset;
    margin: 0px;
    color: white;

}

        h3 {
  font-size: 14px;
  padding: 10px 5px;
  font-family: mamemoji;
  text-align: left;  
    width:277px;
    height:21px;
    margin-bottom:10px;
    padding-left:4px;
    border-radius:2px;
    border-color:#ffd9ed;
    border-radius: 0px;
background: linear-gradient(#f7d8e8, #f8c6db 40%, #fff5fa);
 box-shadow: #fff6 0px 0px 2px 3px inset;
    margin: 0px;
    color: white;

}

</style>



     <div class="bigbox">
     <div class="bigboxuh">
     <div class="idbox">
     <div class="image-container">
     <div class="bigboxtwo">
     <div class="princessdays">
<h1> プリンセス・デイズ </h1>
  <img src = "https://files.catbox.moe/pjpt2g.webp">
<p> Joey's Web Journal <img src = "https://64.media.tumblr.com/f9c9eeaf7e94755164a3d03a83a5bdb7/20e87ebbd82b19f5-8f/s75x75_c1/6425f3309a6e58686ffac212cf852a701454b79c.gifv" width = 13px>
<p> Last Updated: Wednesday March 12th 
<p> Currently... <a href="https://www.imood.com/users/termitetartss"><img src="https://moods.imood.com/display/uname-termitetartss/fg-1cff0/trans-1/imood.gif" alt="the current mood of termitetartss at www.imood.com" border="0"></a></a><br> 
<p> The Happiest days of my life <br> 
<div class ="musicplayerholder"><div class ="insideshit">

    <style>
        #musicplayer{
            background:white; /* background color of player */
            border:4px solid #4cd4de; /* border around player */
            width:494px; /* width of the player - make it 100% if you want it to fill your container */
            padding:10px;
            text-align:center; 
            display:flex;
            flex-direction:column;
            gap:10px;
            background-image: url('https://i.pinimg.com/enabled_lo/564x/c3/cc/64/c3cc6436088a81602328807ebe6719dc.jpg');
    border:groove 2px #ffc4e7;
    border-radius: 3px;
    color: black;

        }

        .songtitle, .track-info, .now-playing{
            padding:5px;
        }
        
        .controls{
            display:flex; 
            flex-direction:column; 
            gap:10px;
        }

        .buttons{
            display:flex;
            justify-content:center;
            font-size:7px !important; /* size of controls */
            width:100%;
        }

        .buttons div{
            width:33.3%;
        }
        
        .playpause-track, .prev-track, .next-track{
            color:#e74492; /* color of buttons */
            font-size:10px !important; /* size of buttons */
        }
        
        .volume-icon{
            font-size:7px !important; /* size of volume icon */
        }

        .seeking, .volume{
            display:flex;
            flex-direction:row;
            align-items:center;
            gap:5px;
        }
        
        .now-playing, .track-info{
            background-color:#; /* background color of top two boxes */
        }

        .now-playing{
            font-weight:bold;
        }

        input[type=range]{
            -webkit-appearance:none; /* removes default appearance of the tracks */
            width:100%;
        }

        input[type=range]:focus{
            outline:none; /* removes outline around tracks when focusing */
        }

        input[type=range]::-webkit-slider-runnable-track{
            width:100%;
            height:4px; /* thickness of seeking track */
            background:#e74492; /* color of seeking track */
        }

        input[type=range]::-webkit-slider-thumb{
            height:10px; /* height of seeking square */
            width:10px; /* width of seeking square */
            border-radius:0px; /* change to 5px if you want a circle seeker */
            background:#e74492; /* color of seeker square */
            -webkit-appearance:none;
            margin-top:-3px; /* fixes the weird margin around the seeker square in chrome */
        }

        input[type=range]::-moz-range-track{
            width:100%;
            height:4px; /* thickness of seeking track */
            background:#e74492; /* color of seeking track */
        }

        input[type=range]::-moz-range-thumb{
            height:10px; /* height of seeking square */
            width:10px; /* width of seeking square */
            border-radius:0px; /* change to 5px if you want a circle seeker */
            background:#e74492; /* color of seeker square */
            border:none; /* removes weird border around seeker square in firefox */
        }
    </style>
    <body>
        <div id="musicplayer">

            <div class="now-playing"></div>
            
            <div class="track-info">
                <div class="track-name"></div>
                <div class="track-artist"></div>
            </div>

            <div class="controls">
                <div class="seeking">
                    <div class="current-time">00:00</div>

                    <input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">

                    <div class="total-duration">0:00</div>
                </div>

                <div class="buttons">
                    <div class="prev-track" onclick="prevTrack()">&#171;</div>

                    <div class="playpause-track" onclick="playpauseTrack()">&#9654;</div>

                    <div class="next-track" onclick="nextTrack()">&#187;</div>
                </div>

                <div class="volume">
                    <div class="volume-icon">&#128362;</div>
                    <input type="range" min="1" max="100" value="25" class="volume_slider" onchange="setVolume()"> <!-- the default volume value is 25, change this if you want it to be higher or lower (i wouldn't recommend it bc it gets really loud) -->
                </div>
            </div>

            <audio id="music" src=""></audio>
        </div>

        <script>
            // initiate variables
            let now_playing = document.querySelector(".now-playing");
            let track_name = document.querySelector(".track-name");
            let track_artist = document.querySelector(".track-artist");


            let playpause_btn = document.querySelector(".playpause-track");
            let next_btn = document.querySelector(".next-track");
            let prev_btn = document.querySelector(".prev-track");

            let seek_slider = document.querySelector(".seek_slider");
            let volume_slider = document.querySelector(".volume_slider");
            let curr_time = document.querySelector(".current-time");
            let total_duration = document.querySelector(".total-duration");

            let track_index = 0;
            let isPlaying = false;
            let updateTimer;

            // create new audio element
            let curr_track = document.getElementById("music");
            
            //
            // DEFINE YOUR SONGS HERE!!!!!
            // MORE THAN FOUR SONGS CAN BE ADDED!!
            // JUST ADD ANOTHER BRACKET WITH NAME ARTIST AND PATH
            // CATBOX.MOE IS RECOMMENDED FOR UPLOADING MP3 FILES IF YOU DON'T HAVE NEOCITIES SUPPORTER
            let track_list = [
                {
                    name:"Abacab ",
                    artist:"Break It Up 2000",
                    path:"https://files.catbox.moe/bfe3ur.mp3"
                },
                {
                    name:"Anime Trance ",
                    artist:"Piece Of Heaven",
                    path:"https://files.catbox.moe/dhm5rk.mp3"
                },
            ];
            //
            //
            //
            //
            //

            function loadTrack(track_index){
                clearInterval(updateTimer);
                resetValues();

                // load a new track
                curr_track.src = track_list[track_index].path;
                curr_track.load();

                // update details of the track
                track_name.textContent = track_list[track_index].name;
                track_artist.textContent = track_list[track_index].artist;
                now_playing.textContent = "Playing " + (track_index + 1) + " of " + track_list.length;

                // set an interval of 1000 milliseconds for updating the seek slider
                updateTimer = setInterval(seekUpdate, 1000);

                // move to the next track if the current one finishes playing 
                curr_track.addEventListener("ended", nextTrack);

            }

            // reset values
            function resetValues(){
                curr_time.textContent = "0:00";
                total_duration.textContent = "0:00";
                seek_slider.value = 0;
            }

            // load the first track in the tracklist
            loadTrack(track_index);

            // checks if song is playing
            function playpauseTrack(){
                if (!isPlaying) playTrack();
                else pauseTrack();
            }

            // plays track when play button is pressed
            function playTrack(){
                curr_track.play();
                isPlaying = true;

                // replace icon with the pause icon
                playpause_btn.innerHTML = '&#9646;';
            }

            // pauses track when pause button is pressed
            function pauseTrack(){
                curr_track.pause();
                isPlaying = false;

                playpause_btn.innerHTML = '&#9654;';
            }

            // moves to the next track
            function nextTrack(){
                if (track_index < track_list.length - 1)
                    track_index += 1;
                else track_index = 0;
                loadTrack(track_index);
                playTrack();
            }

            // moves to the previous track
            function prevTrack(){
                if (track_index > 0)
                    track_index -= 1;
                else track_index = track_list.length;
                loadTrack(track_index);
                playTrack();
            }

            // seeker slider
            function seekTo(){
                seekto = curr_track.duration * (seek_slider.value / 100);
                curr_track.currentTime = seekto;
            }

            // volume slider
            function setVolume(){
                curr_track.volume = volume_slider.value / 100;
            }

            setVolume();

            function seekUpdate(){
                let seekPosition = 0;
                
                // check if the current track duration is a legible number
                if (!isNaN(curr_track.duration)){
                    seekPosition = curr_track.currentTime * (100 / curr_track.duration);
                    seek_slider.value = seekPosition;

                    // calculate the time left and the total duration
                    let currentMinutes = Math.floor(curr_track.currentTime / 60);
                    let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60);
                    let durationMinutes = Math.floor(curr_track.duration / 60);
                    let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60);

                    // adding a zero to the single digit time values
                    if (currentSeconds < 10){ currentSeconds = "0" + currentSeconds; }
                    if (durationSeconds < 10){ durationSeconds = "0" + durationSeconds; }
                    if (currentMinutes < 10){ currentMinutes = currentMinutes; }
                    if (durationMinutes < 10){ durationMinutes = durationMinutes; }

                    curr_time.textContent = currentMinutes + ":" + currentSeconds;
                    total_duration.textContent = durationMinutes + ":" + durationSeconds;
                }
            }
        </script>
    </body>
</html>


<div class ="moreleftcontent">
<div class ="insideshit">
<style>
.dashed-underline {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
    color: #ffc4e7;

}
</style>

<h1> ナビゲーション </h1>

<p> Current dates of entry... <small> (Links aren't put in so don't click yet) </small>

<div class="button">&nbsp;
  <img src="https://64.media.tumblr.com/27e13e4eb98483c3ded69334fb1a5fef/cfb17a9fbbdc83b5-5f/s75x75_c1/620a60fc6aa954df81ac2faa8a4386bc1ceab95e.gifv" width="14"> 
  <a href="https://toromi.moe" class="dashed-underline" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">April 2025</a><br>
</div>

<div class="button">&nbsp;
  <img src="https://64.media.tumblr.com/b634a79ae2267ddb6b1dfd5c49ff1fac/23dcd904a23af9f7-c7/s75x75_c1/6d578e3aeef848d53d8237bda1ce279310a3154e.gifv" width="14"> 
  <a href="https://toromi.moe" class="dashed-underline" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">March 2025</a><br>
</div>

<div class="button">&nbsp;
  <img src="https://64.media.tumblr.com/039086073a9b03ce80fd06c808bcb1ae/406db6b3eb2b339c-ed/s75x75_c1/637d713f5dee82b180e29299abcf8a1037d0f20f.gifv" width="13"> 
  <a href="https://toromi.moe/about" class="dashed-underline" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">Feburary 2025</a><br>
</div>

<div class="button">&nbsp;
  <img src="https://64.media.tumblr.com/cb8d781811133fdcbd3aa84436cfee9c/23dcd904a23af9f7-de/s75x75_c1/010f0f8fa3c8c00fc6804c8f4b8cb3b7c205a012.gifv" width="14"> 
  <a href="https://toromi.moe" class="dashed-underline" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">January 2025</a><br>
</div>
<div class="button">&nbsp;
  <img src="https://files.catbox.moe/mt1ns7.webp" width="14"> 
  <a href="https://toromi.moe" class="dashed-underline" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">December 2024</a><br>
</div>
<div class="button">&nbsp;
  <img src="https://files.catbox.moe/6qnf42.png" width="14"> 
  <a href="https://toromi.moe" class="dashed-underline" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">October 2024</a><br>
</div>
<div class="button">&nbsp;
  <img src="https://files.catbox.moe/nnmsqg.png" width="14"> 
  <a href="https://toromi.moe" class="dashed-underline" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">September 2024</a><br>
</div>
<div class="button">&nbsp;
  <img src="https://files.catbox.moe/518feo.gif" width="17"> 
  <a href="https://toromi.moe" class="dashed-underline" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">August 2024</a><br>
</div>
<div class="button">&nbsp;
  <img src="https://64.media.tumblr.com/30e9af43d90264037829f2f1282effcd/d30d5d09f200ec81-35/s75x75_c1/54c4bcfcac303f78113de8055979127c1c5558a1.gifv" width="14"> 
  <a href="https://toromi.moe" class="dashed-underline" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">July 2024</a><br>
</div>
<div class="button">&nbsp;
  <img src="https://64.media.tumblr.com/bd41a0d76744fd32173013605e23a825/ae3b6a71b52f8360-11/s75x75_c1/094c41697cc65b940e94d10652e47ea71bc9f784.gifv" width="14"> 
  <a href="https://toromi.moe" class="dashed-underline" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">June 2024</a><br>
</div>
<div class="button">&nbsp;
  <img src="https://64.media.tumblr.com/ce1fc13267bc99e4c564af4195b59b54/a0f7e322537df465-2b/s75x75_c1/4ffb8bde826d935c99f3a5792bd0db7417748955.gifv" width="14"> 
  <a href="https://toromi.moe" class="dashed-underline" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">May 2024</a><br>
</div>
<div class="button">&nbsp;
  <img src="https://64.media.tumblr.com/5fceb4e9cb1339727d5c9fb31a7730f7/ae3b6a71b52f8360-a3/s75x75_c1/8a05d521a3b76486a952f9d0c275bfb70b839fb5.gifv" width="14"> 
  <a href="https://toromi.moe" class="dashed-underline" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">April 2024</a><br>
</div>


<br>
<br><center>

<img src = "https://64.media.tumblr.com/539c6aa15aa5faf554abfaf931035158/9dd086a9857dd86f-90/s250x400/3a309ba7483e3463ad0486eadf71174ed572e238.gifv" class="image-right">
<p> 


</style>

<style>


    <style>
        .image-left {
            float: left;
            width: 130px; 
            height: 180px; 
  filter:drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white) drop-shadow(0px 1px 1px #FF73BA) drop-shadow(0px 1px 1px #FF73BA);

        }
        .image-right{
            float: right;
            width: 145px; 
  filter:drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white) drop-shadow(0px 1px 1px #FF73BA) drop-shadow(0px 1px 1px #FF73BA);
    position:absolute;
    top:150px;
    left:350px;

</style>

<div class ="actualheader">
<div class ="actualheadertitle">
<h1> ジャーナル </h1>

<div class ="okfinally">


<center>
		<div class="main">
		<div class="index">
                <iframe name="window" src="https://toromi.moe/journal/new/selection" frameBorder="0"></iframe>
</div>

<style>

    .bigbox {
    position:absolute;
    top:15px;
    left:95px;
    width:1440px;
    height:960px;
    border-style: solid;
    border-radius: 5px;
    border-width: 8px;
    border-image: url("https://64.media.tumblr.com/23aebadbb9d671237620a54e721bbd2f/27a0eb2bc58a600c-97/s100x200/845da75236c114ed56f747c45ddebfc4e4bf003e.pnj") 5 fill round;
    float: left;
    BACKGROUND-COLOR:WHITE;
    margin: 10px;
}
    .bigboxuh {
    position:absolute;
    top:5px;
    left:2px;
    width:1420px;
    height:925px;
    border-style: solid;
    border-radius: 5px;
background: #FFF;
padding:5px;
 border: 3px ridge white;
 box-shadow: 0px 0px 5px #A6DCEF;
    background-image: url('https://i.pinimg.com/736x/77/4e/d5/774ed5c17980b5cbd0410d1a24bcabaf.jpg');

}

    .musicplayerholder {
    position:absolute;
    top:260px;
    left:-258px;
    width:520px;
    height:175px;
    border-style: solid;
    border-radius: 5px;
background: #FFF;
padding:5px;
 border: 3px ridge white;
 box-shadow: 0px 0px 5px #A6DCEF;
}

    .moreleftcontent {
    position:absolute;
    top:210px;
    left:-3px;
    width:520px;
    height:375px;
    border-style: solid;
    border-radius: 5px;
background: #FFF;
padding:5px;
 border: 3px ridge white;
 box-shadow: 0px 0px 5px #A6DCEF;
}


    .idbox {
    position:absolute;
    top:25px;
    left:25px;
    width:520px;
    height:245px;
    border-style: solid;
    border-radius: 5px;
background: #FFF;
padding:5px;
 border: 3px ridge white;
 box-shadow: 0px 0px 5px #A6DCEF;
}



    .okfinally {
    position:absolute;
    top:80px;
    left:220px;
    width:805px;
    height:585px;
    border-style: solid;
    border-radius: 5px;
background: #FFF;
padding:5px;
 border: 3px ridge white;
 box-shadow: 0px 0px 5px #A6DCEF;
}



    .actualheader {
    position:absolute;
    top:-495px;
    left:555px;
    width:800px;
    height:245px;
    border-style: solid;
    border-radius: 5px;
background: #FFF;
padding:5px;
 border: 3px ridge white;
 box-shadow: 0px 0px 5px #A6DCEF;
    background-image: url('https://files.catbox.moe/dswx60.png'); 
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    border-style: solid;
 border: 3px ridge white;
 box-shadow: 0px 0px 5px #A6DCEF;
    color: #ffc4e7;

}

    .actualheadertitle {
    position:absolute;
    top:200px;
    left:-225px;

}



    .bigboxtwo {
    position:absolute;
    top:0px;
    left:0px;
background-image: url('https://files.catbox.moe/jyfpun.jpg'); 
background-size: 300px 350px; 
background-position: center; 
width: 200px;
height: 200px;
    background-repeat: no-repeat;
    border-style: solid;
 border: 3px ridge white;    color: #ffc4e7;

}

    .princessdays {
    position:absolute;
    top:-10px;
    left:225px;

}


.image-container {
    position:absolute;
    top:15px;
    left:20px;
    width: 204px;
    height: 205px;
    border: 10px solid transparent;
    border-image: url('https://64.media.tumblr.com/b97bf6aef07102e227afcce63e0bf6cf/27a0eb2bc58a600c-ce/s100x200/005e46908d4e8de727b628a77ecd3b135eabe102.pnj') 10 stretch;
}

        h1 {
  font-size: 23px;
  font-family: uzura;
    width:577px;
    height:21px;
      filter:drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white) drop-shadow(0px 1px 1px #FF73BA) drop-shadow(0px 1px 1px #FF73BA);


}



</style>

<style>
@font-face{
font-family:mamemoji;
src:url(https://files.catbox.moe/htbq4q.ttf);
}
 
 
@font-face{
font-family:uzura;
src:url(https://files.catbox.moe/qb81zc.ttf);
}
 
</style>

<style>

}
.main {
  margin:auto;
  background:#3b3b3b;
  width:720px;
  border:2px #cccccc solid;
  padding:5px;
  overflow:auto;
    border: none;
  height:auto;
}

.main iframe{
    border: none;
    width:100%;
    height:100%;
    overflow: hidden;
    height: 580px;
    width: 800px;
}

.container {
    border: none;

}
.index {
 border: 3px ridge white;
 box-shadow: 0px 0px 5px #A6DCEF;


}
.insideshit {
 border: 3px ridge white;
 box-shadow: 0px 0px 5px #A6DCEF;


</style>

 <!-- pagedoll -->

 
    <img alt="" style="max-height; position:absolute; bottom:-50px; left:-630px; rotate: 0 deg;   filter:drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white) drop-shadow(0px 1px 1px #FF73BA) drop-shadow(0px 1px 1px #FF73BA);  animation: jerk 0.5s infinite;

"
 
<a href="" src="https://64.media.tumblr.com/b71ad6717d50b429cf5992ccc6950804/55533691ba94e07e-dc/s640x960/b333d4aad557dda1c371e6642cc08846839c0079.pnj" width = 150px>