

 <!-- 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">

<h1> 全体的な状況 </h1>
<p> Talking about stuff heree. Lorem ipsum dolor sit amet, consectetur adipiscing elitonsectetur adipiscing elitonsectetur adipiscing elitonsectetur adipiscing elitonsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

<br>
<br><center>

<img src = "https://64.media.tumblr.com/539c6aa15aa5faf554abfaf931035158/9dd086a9857dd86f-90/s250x400/3a309ba7483e3463ad0486eadf71174ed572e238.gifv">
<p> 


</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>