/* FONTS */

@font-face {
    font-family: '2Credits';
    src: url(fonts/2Credits.ttf)
}
@font-face {
    font-family: 'W95FA';
    src: url(fonts/W95FA.otf);
}
@font-face {
    font-family: 'ModernDOS';
    src: url(fonts/ModernDOS8x16.ttf);
    
}

/* SITE */

html {
    image-rendering: pixelated;
    -webkit-font-smoothing: never;
}

body {
    cursor: url(https://cur.cursors-4u.net/cursors/cur-10/cur918.cur), default;
    background: none;
    position: relative;
    font-family: "W95FA";
    letter-spacing: 2px;
    padding: 0%;
    margin: 0%;
    overflow: hidden;
}
div {
    display: block;
}

/* LINKS */

a {
    text-decoration: none;
}

/* SELECTION */

::selection {
    text-shadow: 1px 1px #faffb3;
    background: rgb(255, 109, 236);
}

hr {
    border-top: 3px double #3243db;
}


/* CURSORS */

a:hover {
    font-style: italic;
    color: #faffb3;
    cursor: url('cursor/cur902.gif'), url('cursor/02.cur'), default;
}

button:hover {
    cursor: url('cursor/cur902.gif'), url(cursor/02.cur), default;
}

input:hover {
    cursor: url(cursor/cur902.gif), url(cursor/02.cur), default;
}

/* UL */

ul {
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
    font-size: 20px;
  }

/* ELEMENTS BOX SIZING */

* {
    box-sizing: border-box;
}

/* ZOOM CLASS */

.zoom {
    transition: transform .2s; /* Animation */
  }
  
  .zoom:hover {
    transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }

/* CONTAINER */

.container {
    width: 1000px;
    position: relative;
    margin: auto;
    z-index: 1000;
}

/* SCROLLBAR */



::-webkit-scrollbar {
    width: 16px;
}
::-webkit-scrollbar-button {
    background-color: #ab9889;
    background-size: 100%;
    border-width: 1px;
    border-style: solid;
    border-color: #242424;
    border-top-color: #c0c0c0;
    border-left-color: #c0c0c0;
    box-shadow: inset 1px 1px #fff, inset -1px -1px #543223;
}
::-webkit-scrollbar-button:horizontal:increment {
    background-image: url(scrollbar/POINTSRIGHT.png);
}
::-webkit-scrollbar-button:horizontal:decrement {
    background-image: url(scrollbar/POINTSLEFT.png);
}
::-webkit-scrollbar-button:vertical:increment {
    background-image: url(scrollbar/POINTSDOWN.png);
}
::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(scrollbar/POINTSUP.png);
}
::-webkit-scrollbar-corner {
    background: #c0c0c0;
    background-image: url();
}
::-webkit-scrollbar-thumb {
    background-color: #ab9889;
    border-width: 1px;
    border-style: solid;
    border-color: #242424;
    border-top-color: #c0c0c0;
    border-left-color: #c0c0c0;
    box-shadow: inset 1px 1px #fff, inset -1px -1px #543223;
}
::-webkit-scrollbar-track {
    background-size: 2px 2px;
    background-image: url(scrollbar/scrollbg.png);
    background-color: transparent;
}


/* HEADER */

.header {
    display: block;
    height: auto;
    width: 100%;
    background-color: #e2e6a4;
    border-radius: 50%;
    border: 8px double #f7adff;
    box-shadow: 1px 5px #7386FF;
    background-image: url(ads/behind.gif);
    background-size: contain;
    background-position: 5em;
    background-repeat: no-repeat;
    margin-bottom: -15px;
    
}
.header #Banner{
    display: block;
    width: 1000px;
    margin: none;
    margin-top: 10px;
}

/* MAIN SITE AREA */

#area {
    width: 1000px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    margin: auto;
    justify-content: center;
}

/* MARQUEE */

#marquee {
    width: 990px;
    height: 52px;
    padding: 5px;
    margin-top: 35px;
    margin-bottom: 1%;
    background-image: url(backgrounds/98sky.gif);
    background-size: cover;
    border: 4px double #000000;
    border-radius: 10px 10px 0px 0px;
    box-shadow: 0px 5px 3px rgba(90, 71, 109, 0.6);
    box-shadow: inset 2px 2px #3243db, inset -2px -2px #abb6ff;
    
}

marquee p {
    color: #e2e6a4;
    text-shadow: 2px 1px #3243db;
    font-family: "2Credits";
    font-size: 20px;
    white-space: nowrap;
    margin-top: -2px;
}

/* LEFT */

#left {
    margin-right: 10px;
}

/* NAVIGATION */

.navigation {
    width: 200px;
    height: auto;
    border: 4px double #000000;
    border-radius: 0px 0px 20px 50px;
    box-shadow: 0px 5px 3px rgba(90, 71, 109, 0.6);
    box-shadow: inset 2px 2px #3243db, inset -2px -2px #abb6ff;
    background-image: url(backgrounds/98sky.gif);
    margin-bottom: 10px;
    padding: 20px;
    position: relative;
}

.navigation li {
    margin: 10px;
}

.navigation a{
    text-shadow: -1px 2px #3243db;
    color: #000000;
    text-decoration: none;
}

/* MUSIC AREA */

.musicarea {
    width: 200px;
    height: 600px;
    display: block;
}

.music {
    width: 200px;
    display: inline-block;
    margin: auto;
    margin-top: 5%;
    text-align: center;  
    background-image: url(backgrounds/petals.gif);
    background-size: contain;
}

button.tracklist {
    font-family: "2Credits";
    font-size: larger;
    background-image: url(backgrounds/glitterbabyblue.gif);
    margin: auto;
    margin-top: 5%;
}

.music p{
    font-weight: bold;
    font-style: italic;
    color: #3243db;
    background-color: #7386FF;
    border: 1px solid #f7adff;
    box-shadow: 2px 2px #3243db;
    border-radius: 30px;
    padding: 5px 10px 5px 10px;
    display: inline-block;
}

.quaver{
    
    position: absolute;
    margin-top: -20px;
    margin-bottom: 60px;
    margin-left: -50px;
}

/* MAIN MIDDLE AREA */

#main {
    position: sticky;
}


.closeInfo {
    height: 20px;
    font-size: 19px;
    color: #9ba3f0;
    padding-left: 2px;
    text-shadow: 1px 1px #10218d;
    background-color: #7386FF;
    box-shadow: 2px 2px #9aa4e5;
    border: 1px solid #f7adff;
    width: 20px;
    border-radius: 25%;
    font-family: "ModernDOS";
    float: right;
}

.welcome {
    width: 60%;
    height: 40px;
    padding: 0px;
    margin: auto;
    margin-top: 2%;
    text-align: center;
    background-image: url(gifs/cloud.gif);
    background-size: contain;
    border-radius: 50%;

}

.welcome img#uniright {
    float: right;
    vertical-align: middle;
    
   
}
.welcome img#unileft {
    
    margin-top: -30px;
    float: left;
    
}

.welcome span#welcome {
    vertical-align: middle;
}

img#close {
    background-color: #f7cae1;
    border-radius: 50%;
    padding: 5px;
    position: absolute;
    scale: 110%;
    margin-left: 145px;
    }
img#close:hover {
    background-color: #dcf3ff;
    scale: 130%;
}
.welcome h1 {
    font-family: "2Credits";
    font-size: 13px;
    color: #faffb3;
    text-shadow: 1px 1px #000000;
    margin: auto;
    margin-left: 43px;
    margin-bottom: 0px;
    text-decoration: 1px wavy underline;
    text-decoration-color: #ffadd6;
    text-underline-offset: 2px;
    padding: 0%;
    padding-top: 10px;
    margin-bottom: -10px;
}

.infobox p {
    background-color: rgba(173, 173, 255, 0.6);
    border-radius: 30px;
    border: 1px dotted #96fbb3;
    padding: 2px;
    margin: 5px;
    color: #4e5bd0;
    font-weight: bolder;
    line-height: 0px;
}
span#Est {
    font-size: 8px;
    
}
span#MSDos {
    font-family: 'ModernDOS';
    font-size: 17px;
    color: #fff;
    text-shadow: 1px 1px #3243db;
    vertical-align: middle;
    margin-bottom: -5px;
}
img#emoteleft {
    vertical-align: middle;
   
}
img#emoteright {
    vertical-align: middle;
   
}
.box3 {
    width: 575px;
    height: 380px;
    margin: auto;
    margin-bottom: 2%;
    margin-top: 2%;
    text-align: center;
    background-image: url(images/shine.gif);
    background-size: cover;
    border: 2px ridge #f1c877;
}

.box4 {
    width: 575px;
    height: 400px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 0%;
    background-image: url(images/painting.png);
    background-size: cover;
    border: 2px ridge #415fc0;
}

gallery.folderselect {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    float: left;
    text-align: center;
    gap: 30px;
    max-width: 600px;
    margin-top: -140px;
    margin-left: 10px;
    padding: 5px 5px;

}

td#folderselect {
    height: 300px;
}

a#foldericon {
    line-height: 0%;
    
}

a#foldericon:hover {
    background-color: #7386FF;
    border-radius: 2px;
    display: inline-block;
    padding: 0%;
    padding-left: 3px;
    padding-right: 3px;
}


gallery.folderselect img#foldericon {
    
    width: 50px;
    height: 50px;
    display: inline-block;
    
  }

gallery::after {
    content: "";
    width: 100px;
  }

span#foldericon {
    display: inline-block;
    font-family: "W95FA";
    font-size: 15px;
    font-weight: bolder;
    letter-spacing: normal;
    text-align: center;
}

gallery.folderselect img#pcfoldericon {
    width: 70px;
    height: 65px;
}

a.backbutton {
    position: absolute;
    bottom: 8px;
    left: 4;
    font-variant: small-caps;
    font-weight: bolder;
    z-index: 3;
}



a.backbutton#nobg:hover {
    background-image: url(backgrounds/skywal1.gif);
    color: #e15ea2;
    text-shadow: 1px 1px #faffb3;
    border-radius: 50%;
    border: 1px dotted #7386FF;
}

a.backbutton#backbuttwithbg {
    color: #faffb3;
    border: 1px solid #ffadd6;
    text-shadow: 1px 1px #415fc0;
    background-color: #9aa4e5;
    border-top-right-radius: 50%;
    border-top-left-radius: 2px;
}

a.backbutton#backbuttwithbg:hover {
    color: #ffadd6;
    border: 1px dotted #96fbb3;
    text-shadow: 1px 1px #415fc0;
    background-color: #ca8ed1;
}

img#tinymoon {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8px;
    display: block;
    width: 575px;
}

img#table {
    scale: 50%;
    position: absolute;
    margin-left: 201px;
    margin-top: -84px;
}

img#pegasus {
    position: absolute;
    margin-left: 390px;
    margin-top: -190px;
}
img#pinkG {
    position: absolute;
    margin-left: 251px;
    margin-top: 80px;
    width: auto;
    height: auto;
    z-index: 2;
}

img#alert {
    position: absolute;
    margin-left: 245px;
    margin-top: 65px;
}
img#treep {
    position: absolute;
    margin-left: 310px;
    margin-top: -190px;
}
img#tree {
    position: absolute;
    margin-left: 20px;
    margin-top: -140px;
}
img#kart {
    position: absolute;
    margin-left: 200px;
    margin-top: -110px;
}
img#play {
    position: absolute;
    margin-top: -150px;
    margin-left: 370px;
}
img#hair {
    position: absolute;
    margin-top: -100px;
    margin-left: 240px;
}
img#flick {
    position: absolute;
    margin-left: 100px;
    margin-top: -50px;
}
img#fold {
    position: absolute;
    margin-left: 340px;
    margin-top: -140px;
}
img#circle {
    scale: 110%;
    position: absolute;
    margin-left: 360px;
    margin-top: -110px;
}
img#special {
    position: absolute;
    margin-left: 60px;
    margin-top: -105px;
}

img#door {
    position: absolute;
    opacity: 0;
    margin-top: 70px;
    margin-left: 436px;
    scale: 79%;
}
img#door:hover {
    opacity: 1;
}

.messageBoxBack {
    width: 597px;
    height: 399px;
    display: block;
    position: absolute;
    top: 53px;
    right: auto;
    left: auto;
    background-image: url(images/Moratorium_169_resultat.gif);
    background-size: cover;
    opacity: 0.8;
    z-index: 2;
}

.messageBox {
    background-image: url(sprites/messagebox.gif);
    background-size: contain;
    padding: 10px;
    padding-top: 3px;
    padding-left: 15px;
    display: none;
    position: absolute;
    margin-left: 24px;
    margin-top: 20px;
    width: 240px;
    height: 64px;
    z-index: 1;
 }
.messageBox p {
    font-family: '2Credits';
    color: #10218d;
    text-shadow: 1px 1px #f1c877;
}
#arrow {
    scale: 90%;
   
    float: inline-end;
    margin-top: -15px;
    margin-right: 1px;
    margin-bottom: 2px;
    padding: 2px;
    background-color: #ffadd6;
    box-shadow: 1px 1px #ae8f52;
}
#arrow:hover {
    position: relative;
    top: -1px;
    background-color: #f9c7ff;
}

.infobox {
    width: 350px;
    height: 300px;
    text-align: center;
    position: absolute;
    margin-top: -150px;
    margin-left:7%;
    overflow-y: scroll;
    padding-top: 0%;
    padding-bottom: 0%;
    background-color: rgba(255, 203, 219, 0.7);
    border: 1px solid #000000;
    display: block;
    z-index: 3;
}

span#surreal {
    font-family: "ModernDOS";
    color: #faffb3;
    text-shadow: 1px 1px #7386FF;
    font-style: italic;
    letter-spacing: 1px;
    margin-bottom: -25px;
}

img#angels {
    position: static;
    display: block;
}
img#bunni {
    background-color: #fadffd;
    box-shadow: 1px #7386FF;
    border-radius: 10px;
    stroke-width: 10px;
}

span#welcomeNote p{
    line-height: 15px;
}
button.siteinfobutton {
  padding: 5px;
  background-color: #95a1ed;
  font-family: "ModernDOS";
  color: #faffb3;
  text-shadow: 1px 1px #000;
  font-size: 13px;
  letter-spacing: 2px;
  line-height: 15px;
  font-weight:bolder;
  width: 180px;
  margin-top: -30px;
  margin-bottom: -10px;
}

button.siteinfobutton:active {
    position: relative;
    top: -1;
}

button.siteinfobutton img#book {
    width: 30px;
}

button.siteinfobutton > img#book,
button.siteinfobutton > span {
  vertical-align: middle;
}


.todobox {
    width: 210px;
    height: 200px;
    position: absolute;
    margin-top: 20px;
    margin-left: 20px;
    overflow-y: scroll;
    padding: 10px;
    background-color: rgba(249, 180, 110, 0.7);
    border: 1px solid #000000;
    font-family: "2Credits";
    text-align: left;
}

.todobox h2 {
    font-family: "2Credits";
    font-size: medium;
    font-weight: bolder;
    text-decoration: 1px wavy underline;
    text-decoration-color: #7386FF;
    text-underline-offset: 3px;
    margin: auto;
    margin-bottom: 10px;
    padding: 2px;
    color:#fff5dc;
    text-shadow: 1px 1px #0606c3;
}

.todobox hr {
    border: 1px dotted #4e5bd0;
}

.note {
    width: 201px;
    height: 135px;
    padding: 20px;
    margin-top: 215px;
    margin-left: 340px;
    position: absolute;
    background-image: url(images/strawbunny.gif);
    background-repeat: no-repeat;
}

.note p{
    font-family: "2Credits";
}

.note img.mush {
    border: 1px dotted #faffb3;
    border-radius: 50%;
    padding: 2px;
}

.note img#mush1:hover {
    background-color: #f7adff;
}

.note img#mush2:hover {
    background-color: #abb6ff;
}

.note img#mush3:hover {
    background-color: #96fbb3;
}

.note img#mush4:hover {
    background-color: #ee959b;
}

img#gifbanner {
    display: block;
    width: 99%;
    margin: auto;
    margin-top: 2px;
    image-rendering: pixelated;
    border: 1px dotted #3243db;
}

img#gifbanner2 {
    display: block;
    margin-top: -180px;
    float: left;
    image-rendering: pixelated;
    border: 1px dotted #3243db;
}

img#gifbanner:hover {
    border: 1px solid #fff;
    zoom: 101%;
}

.siteupdates {
    width: 500px;
    height: 300px;
    padding: 10px;
    margin: auto;
    margin-top: 1%;
    margin-bottom: 2%;
    text-align: center;
    background-image: url(backgrounds/rbowlinebg.gif);
    border: 3px double #253770;
    box-shadow: 0px 5px 3px rgba(90, 71, 109, 0.6);
    box-shadow: inset 2px 2px #7386FF, inset -2px -2px #f7adff;
    overflow-y: scroll;
}

.siteupdates i#date {
    color: #f7adff;
    background-color: #faffb3;
    border-radius: 50%;
    padding: 5px;
    text-shadow: 0px 1px #d977e4;
    font-family: "2Credits";
    font-weight: bolder;
    margin-bottom: 10px;
}

.siteupdates hr {
    border: 1px dotted #faffb3;
    margin: 0%;
}


.siteupdates h2 {
    font-family: "W95FA";
    font-size: small;
    font-weight: bolder;
    display: inline-block;
    padding: 5px;
    color: #4e5bd0;
    background-color: #abb6ff;
    border: 1px solid #f7adff;
    border-top-left-radius: 20px;
    box-shadow: 1px 1px #415fc0;
}

.siteupdates a {
    font-family: "2Credits";
    font-variant: small-caps;
    font-size: large;
    color: #f9cffe;
    text-shadow: 1px 1px #415fc0;
    text-decoration: 1px wavy underline;
    text-decoration-color: #e15ea2;
    text-underline-offset: 2px;
}

.siteupdates a:hover {
    color: #faffb3;
}


.chatbox {

    width: 300px;
    height: 300px;
    margin-top: -8px;
    margin-left: 250px;
    position: absolute;
    background-color: rgba(165, 255, 247, 0.4);
    border: 3px double #474747;
    border-top: 3px double #faffb3;
    border-left: 3px double #b1f6ff;
}


.underchatads {
    margin: 3px;
}

.underchatads img#ad{
    height: 30px;
}

.catbunnytitlebar {
    display: block;
    padding: 10px;
    text-align: center;
}

.catbunnytitlebar img#leftcat{
    float: left;
    margin-top: -10px;
    margin-left: 20px;
}

.catbunnytitlebar img#redbunny {
    margin-top: -5px;
}

.catbunnytitlebar img#rightcat {
    float: right;
    margin-top: -10px;
    margin-right: 20px;
}

.adbox {
    width: 620px;
    height: 90px;
    margin-top: 5px;
    margin-bottom: none;
    padding: none;
}

.adbox #ad {
    max-width: 100%;
    max-height: 100%;
}

/* MAIN MIDDLE AREA BOXES */


.box button:active {
    position: relative;
    top: 1px;
}

.box button:hover {
    font-style: italic;
}


/* WEBMASTER BIO */



img#profile-pic {

    float: left;
    width: 250px;
    margin: 10px;
    position: relative;
    stroke: 2px solid #7386FF;

}

td.windowbody#webmasterbody {
    background-image: url(images/mushroombg.png);
    background-size: cover;
    height: 410px;
    overflow-y: scroll;
}


table#bioinfo {
    width: 50%;
    padding: 10px;
    margin: 0px;
    background-color: #d2c7dc;
    box-shadow: 5px 5px #7386FF;
    border: 1px solid #415fc0;
    border-radius: 10px;
}
table#bioinfo td, th {
    border: 1px solid #415fc0;
    text-align: left;
    padding: 8px;
  }
  
table#bioinfo  tr:nth-child(even) {
    background-color: #ab9889;
  }

table#bioinfo th#q {
    font-family: "2Credits";
    font-size: 15px;
    font-weight: normal;
    color: #faffb3;
    text-shadow: 1px 1px#242424;
    text-decoration: underline wavy;
    text-decoration-color: #f7adff;
    background-color: #7386FF;
}

table#bioinfo th#a {
    font-weight: 300;
}

table#bioinfo th#a.scroll {
    overflow-y: scroll;
    display: block;
    max-height: 100px;
}

/* BOX TITLE BAR */

table.window img#titlebarchat {
    padding: 0%;
    margin-bottom: -3px;
    margin-left: 1%;
}


/* FOOTER */

.footer {
    width: 620px;
    height: auto;
    display: block;
    padding-top: 20px;
    border: 4px double #000000;
    border-top: 4px double #faffb3;
    box-shadow: 0px 5px 3px rgba(90, 71, 109, 0.6);
    box-shadow: inset 2px 2px #4e5bd0, inset -2px -2px #d8ddff;
    border-radius: 10px;
    background-image: url(backgrounds/cloudswallpaper.png);
    text-align: center;
    
}

.footer h1{
    font-family: "2Credits";
    font-size: medium;
    line-height: 0%;

}

.footer h1:hover {
    color: #f7adff;
    text-shadow: 1px 1px #415fc0;
}

.footer p{
    font-size: x-small;
}

.footer img#copyright {
    margin-right: 5px;
}


/* RIGHT SIDE */

#right {
    width: 160px;
    height: auto;
}

#right img#ad {
    margin-top: 5%;
    margin-bottom: 5%;
    border: 1px solid #000000;
}

#right p {
    font-family: "2Credits";
    line-height: 20%;
    margin: none;
    font-size: x-small;
    color: #7386FF;
    text-shadow: 1px 1px #3243db;
}

/* STATS BOX */

.stats {
    width: 150px;
    height: 250px;
    border: 4px double #000000;
    border-radius: 0px 0px 50px 0px;
    box-shadow: 0px 5px 3px rgba(90, 71, 109, 0.6);
    box-shadow: inset 2px 2px #3243db, inset -2px -2px #abb6ff;
    background-image: url(backgrounds/98sky.gif);
    position: relative;
    float: right;
    margin-top: none;
    margin-left: 10px;
    text-align: center;
    padding: 10px;
}

.stats h1 {
    font-family: "2Credits";
    font-size: small;
    font-weight: lighter;
    color: #faffb3;
    text-shadow: 2px 2px #3243db;
    line-height: 0%;
    margin-top: -5px;
}

.stats img#bunny {
    margin-top: -6px;
}

.visits {
    background-image: url(backgrounds/pastels.gif);
    border: 1px solid #253770;
    border-radius: 5px;
    margin-bottom: 10%;
}

.online {
    background-image: url(backgrounds/pastels.gif);
    border: 1px solid #253770;
    border-radius: 5px 5px 30px;
}

/* RIGHT SIDE ADSCROLL */

.adscroll {
    width: 150px;
    height: 250px;
    position: relative;
    float: right;
    margin-top: 10px;
    margin-left: 10px;
    text-align: center;
    padding: 10px;
}

.adscroll img{
    max-width: 150px;
}



/* MUSIC PLAYER */

.title-bar {
    background-image: url(backgrounds/98sky.gif);
    background-position: 5%;
}

.player {
    cursor: url('https://cur.cursors-4u.net/cursors/cur-10/cur918.cur'), default;
    width:fit-content;
    border: #242424 solid 1px;
    border-width: 1px 0px 0px 1px;
    margin-left:auto;
    margin-right:auto;
}

.player-title-bar-controls {
    float: right;
    padding-right: 2px;
  }

i.fas:hover {
    cursor: url('cursor/cur905.gif') text;
}

i.fas.fa-pause, i.fas.fa-play, i.fas.fa-forward, i.fas.fa-backward{
    color:#f7adff; /* color of controls */
}    

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
  }
   
  input[type="range"]:focus {
    outline: none;
  }
   
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 21px;
    width: 11px;
    background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
    transform: translateY(-8px);
    box-shadow: none;
    border: none;
  }
   
  input[type="range"].has-box-indicator::-webkit-slider-thumb {
    background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg");
    transform: translateY(-10px);
  }
   
  input[type="range"]::-moz-range-thumb {
    height: 21px;
    width: 11px;
    border: 0;
    border-radius: 0;
    background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
    transform: translateY(2px);
  }
   
  input[type="range"]::-moz-range-thumb {
    background: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
    border: 0;
    border-radius: 0;
    height: 21px;
    transform: translateY(2px);
    width: 11px;
    }
   
  input[type="range"].has-box-indicator::-moz-range-thumb {
    background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg");
    transform: translateY(0px);
  }
   
  input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    box-sizing: border-box;
    background: #543223 ;
    border-right: 1px solid grey;
    border-bottom: 1px solid grey;
    box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
      -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
  }
   
  input[type="range"]::-moz-range-track {
    width: 100%;
    height: 2px;
    box-sizing: border-box;
    background: #242424;
    border-right: 1px solid grey;
    border-bottom: 1px solid grey;
    box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
      -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
  }
   
  button,input,label,option,select,table,textarea,ul.tree-view   {-webkit-font-smoothing:none;font-family:"Pixelated MS Sans Serif",Arial;font-size:11px}h1{font-size:5rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.5rem}u{border-bottom:.5px solid #222;text-decoration:none}button,input[type=reset],input[type=submit]{border:none;border-radius:0;box-sizing:border-box;color:transparent;min-height:23px;min-width:75px;padding:0 12px;text-shadow:0 0 #222}.vertical-bar,button,input[type=reset],input[type=submit]{background:#ab9889;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}.vertical-bar{height:20px;width:4px}button:not(:disabled):active,input[type=reset]:not(:disabled):active,input[type=submit]:not(:disabled):active{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey;text-shadow:1px 1px #222}@media (not(hover)){button:not(:disabled):hover,input[type=reset]:not(:disabled):hover,input[type=submit]:not(:disabled):hover{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}}button:focus,input[type=reset]:focus,input[type=submit]:focus{outline:1px dotted #000;outline-offset:-4px}button::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{border:0}:disabled,:disabled+label,input[readonly],input[readonly]+label{color:grey}:disabled+label,button:disabled,input[type=reset]:disabled,input[type=submit]:disabled{text-shadow:1px 1px 0 #fff}
   
  .title-bar-controls button {border:none;border-radius:0;box-sizing:border-box;color:transparent;min-height:23px;min-width:75px;padding:0 12px;text-shadow:0 0 #222}
   
  .title-bar-controls button {background:#ab9889;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}
   
  .title-bar-controls button:not(:disabled):active {box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey;text-shadow:1px 1px #222}
   
  @media (not(hover)){
      button:not(:disabled):hover {
      box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}
  }
   
  .title-bar-controls button:focus {outline:1px dotted #000; outline-offset:-4px}
  .title-bar-controls button::-moz-focus-inner {border:0}
   
   

   
  .window, .title-bar {
    font-family: "W95FA";
    -webkit-font-smoothing: none;
    font-size: 13px;
  }
   
  .window {
    box-shadow: inset -1px -1px #242424,
      inset 1px 1px #dfdfdf, inset -2px -2px #808080,
      inset 2px 2px #ffffff;
    background: #ab9889;
    padding: 3px;
    width:168px;
  }
   
  .title-bar {
    padding: 3px 2px 3px 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
   
  .title-bar-text {
    font-weight: bolder;
    color: #253770;
    letter-spacing: 0;
    margin-right: 24px;
  }
   
  .title-bar-controls {
    display: flex;
  }
   
  .title-bar-controls button {
    padding: 0;
    display: block;
    min-width: 16px;
    min-height: 14px;
  }
   
  .title-bar-controls button:active {
    padding: 0;
  }
   
  .title-bar-controls button:focus {
    outline: none;
  }
   
  .title-bar-controls button[aria-label=Minimize]{
  background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/minimize.svg");
  background-position:bottom 3px left 4px;
  background-repeat:no-repeat}
   
  .title-bar-controls button[aria-label=Maximize]{
  background-image:url("https://raw.githubusercontent.com/jdan/98.css/4a2282dd9170cabf730fb5803d1153d86b2e94e3/icon/maximize.svg");
  background-position:top 2px left 3px;
  background-repeat:no-repeat}
   
  .title-bar-controls button[aria-label=Close]{
  background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg");
  background-position:top 3px left 4px;
  background-repeat:no-repeat;
  margin-left:2px}
   
  .window-body { margin:0px; height:98px; }
   
  input[type=range] {
          -webkit-appearance: none;
          appearance:none;
          width: 100%;
      }
   
      input[type=range]:focus {
          outline: none;
      }
   
      /* settings for chrome browsers */
      input[type=range]::-webkit-slider-runnable-track {
          width: 100%;
          height: 2px; /* thickness of seeking track */
          cursor: url('cursor/cur902.gif');
      }
   
   
      /* settings for firefox browsers */
      input[type=range]::-moz-range-track {
          width: 100%;
          height: 2px; /* thickness of seeking track */
          cursor: url('cursor/cur902.gif');
      }
   
      .flex {display: flex;}
   
      .titlebaricon { height:14px; width:14px;}
   
   
      .songtitlewindow {
          background-color:#faffb3;
          box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;
      }
   
      #musicplayer {
          border:2px solid #ab9889; /* border around player */
          border-width: 2px 0px 0px 0px;
          width:160px; /* width of the player */
      }
   
      #imagestyle {
          background:#ab9889; /* background color of player */
          border:2px solid #ab9889; /* border around player */
          width:95px; /* width of the player */
          height:95px;
          box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;
      }
   
      .ic {
          width:90px;
          position:relative;
          bottom:1px;
          right:1px;
          overflow:hidden;
          padding:2px;
          border:2px solid transparent;
      }
   
      .songtitlearrow {
          background-size:100%;
          background-repeat:no-repeat;
          background-image:url(https://files.catbox.moe/f5e8np.png);
          height:21px;
          width:21px;
          position:relative;
          top:2px;
          left:-2px;
          border:0px solid transparent;
          border-width:0px 0px 0px 0px;
      }
   
      .songtitle {
          padding:5px; /* padding around song title */
          border-bottom:0px; /* border under song title */
          display:block;
          font-family: "2Credits";
      }
   
      .controls {
          font-size:18px !important; /* size of controls */
          text-align:center;
          width:100%;
          position:relative;
          bottom:10px;
      }
   
      .controls td {
          padding:8px 5px 0px 5px; /* padding around controls */
      }
   
      button {
          min-width:40px;
      }
   
      .seeking {
          background-color:#ab9889; /* background color of seeking bar */
          color: #543223;
          display:flex;
          justify-content: space-evenly;
          padding:14px; /* padding around seeking bar */
      }

      input.seek_slider {
        color: #253770;
      }
   
      .current-time {
          padding-right:5px;
      }
   
      .total-duration {
          padding-left:5px;
      }