/* FONTS */

@font-face {
    font-family: '2Credits';
    src: url(/fonts/2Credits.ttf)
}
@font-face {
    font-family: 'PerfectDOS';
    src: url(/fonts/Perfect-DOS-VGA-437.otf)
}
@font-face {
    font-family: 'W95FA';
    src: url(/fonts/W95FA.otf);
}
@font-face {
    font-family: 'Depixel';
    src: url(/fonts/DePixelHalbfett.otf);
}
@font-face {
    font-family: 'RomanceA';
    src: url(/fonts/RomanceA.otf);
}
@font-face {
    font-family: 'CelticBit';
    src: url(/fonts/celtic-bit.otf);
}
@font-face {
    font-family: 'Gallaecia';
    src: url(/fonts/GallaeciaForte.otf);
}
@font-face {
    font-family: 'AutoPilot';
    src: url(/fonts/sd_auto_pilot.otf);
}

/* SITE */

html {
    image-rendering: pixelated;
    -webkit-font-smoothing: never;
    cursor: url(cursor/pizza\ tower\ glove.cur), default;
}

body {
    cursor: url(cursor/pizza\ tower\ glove.cur), default;
    background: url(/backgrounds/sbbg.gif) #10213b;
    position: relative;
    font-family: "W95FA";
    letter-spacing: 2px;
    padding: 0%;
    margin: 0%;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
}
div {
    display: block;
}

/* LINKS */

a {
    text-decoration: none;
}

a:-webkit-any-link {
    cursor: url(cursor/pizza\ tower\ glove.cur), default;
    color: -webkit-link;
}

/* SELECTION */

::selection {
    text-shadow: 1px 1px #faffb3;
    background: rgb(142, 160, 232, 0.6);
}

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


/* HOVERS */





/* UL */

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

button {
    background:#bcaad5;
    border: 1px solid #000;
    box-shadow:inset -1px -1px #302a2a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf
}

/* 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;
}

/* MAIN SITE AREA */

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

#main {
    width: 900px;
    height: fit-content;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: rgba(153, 165, 254, 0.6);
    background-image: url(/backgrounds/dta.gif);
    background-blend-mode: darken;
    border-top: 40px ridge #6d5db8;
    border-left: 50px ridge #6d5db8;
    border-right: 50px groove #6d5db8;
    border-bottom: 40px ridge #6d5db8;
    border-radius: 200px 200px 0px 0px;
    box-shadow: 0px 0px 100px #2e11a0, inset 0px 2px 20px #1a1a5f;
}

#header {
    text-align: center;
}
#header h1{
    font-family: 'RomanceA';
    font-size: 35px;
    color: #f6f67a;
    text-shadow: 2px 2px #2d51c9;
    background-image: url(/backgrounds/cloudsmove.gif);
    display: inline-block;
    padding: 5px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-radius: 50%;
    border: 1px dotted #65fe98;
    box-shadow: 0px 3px 10px #7b6ec4, inset 1px 1px 10px #52b5fc;
    text-decoration: 1px wavy underline #ff79ac;
    font-style: oblique;
    font-weight: 100;
    margin-top: 20px;
    margin-bottom: 0%;
}

#headerIcons {
    vertical-align: text-top;
    display: inline-block;
    margin-top: 2px;
}
#playersml {
    position: absolute;
    margin-top: 25px;
    margin-left: 285px;
    scale: 130%;
}

#header p {
    font-family: 'RomanceA';
    display: inline-block;
    margin-top: 50px;
    margin-right: 20px;
    width: 350px;
    height: 130px;
    color: #f6b9fd;
    text-shadow: 1px 1px #265baa;
    font-weight: 500;
    letter-spacing: 1px;
    background-color: #4f95ff;
    padding: 5px;
    border: 1px solid #0a0a0a;
    border-radius: 50px 50px 0px 0px;
    box-shadow: 2px 2px#3243db;
    
}

span#player {
    color: #f8f8a9;
    font-size: 22px;
    text-decoration: 1px underline wavy;
    text-decoration-color: #ff79ac;
    text-shadow: 1px 1px #253770;
}

img#player {
    margin-bottom: -10px;
}

#girlScene {
    margin: auto;
    background-image: url(images/glare.gif);
    background-size: cover;
    border: 1px solid #0a0a0a;
    box-shadow: 0px 2px 10px #3243db;
    border-radius: 100px 100px 0px 0px;
    width: 600px;
    height: 200px;
}

img#girl {
    height: 198px;
    float: left;
}

#scene {
    display: inline-block;
    width: 190px;
    height: 110px;
    background-color: rgb(50, 67, 219, 0.6);
    background-image: url(/backgrounds/pcknpr.gif);
    background-blend-mode: darken;
    margin-top: 0px;
    margin-left: -140px;
    position: absolute;
    border-radius: 100%;
    border: 3px double #f8f8a9;
    padding: 10px;
}

img#angelDiv {
    display: block;
    margin: auto;
}





/* MAIN MIDDLE AREA */




#main {
    position: sticky;
}


#tableArea {
    width: 650px;
    height: 1000px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 50px;
    overflow-y: scroll;
    background-image: url(/backgrounds/bluerough.png);
    border: 3px double #1158c4;
    box-shadow: 0px 6px 30px #3216a1;
}

 #tableArea th, #tableArea td.albumcover, td.info, td.cd, .tableTitles td {
    border: 1px solid #3619ab;
    box-shadow: 0px 1px 3px #0b1e69;
    padding: 10px;
    
}

table#albums {
    margin: auto;
    width: 610px;
    padding: 10px;
    border-spacing: 5px;
    
}

tr.tableTitles {
    font-family: 'ModernDOS';
    font-variant: small-caps;
    font-size: 10px;
    font-weight: bolder;
    text-align: center;
    margin: 0%;
}

.tableTitles td {
    background-image: url(/backgrounds/rbowlinebg.gif);
    border-radius: 10px;
    margin: 0%;
}

td#trackTitle {
    background-image: none;
    border: none;
    box-shadow: none;
}

span#tableTitles {
    color: #433fb8;
    text-shadow: 1px 1px #cdddf5;
    
}


tr.albumtab {
    
}

td.track {
    padding: 6px;
    border: none;
    box-shadow: none;
    font-family: 'RomanceA';
    font-size: 19px;
    border: 1px solid #09326e;
    color: #211b83;
    text-shadow: 4px 4px 3px #c7a2ec;
    box-shadow: 1px 1px 5px #081c39;
    background-image: url(/gifs/dsc.gif);
    background-size: cover;
    display: inline-block;
    border-radius: 50%;

}

td.albumcover {
    background-image: url(backgrounds/cloudswallpaper.jpeg);
    background-size: cover;
    border-radius: 10px;
    padding: 0%;
}
img#albumcover {
    border: 1px solid #0d2e5f;
    box-shadow: 1px 2px 5px #22539c;
    width: 100%;
    transform: rotate(2deg);
}

img#albumcover:hover {
    scale: 110%;
    box-shadow: 0px 2px 10px #5e2ac4;
    z-index: 900;
    border: 1px solid #ffffff;
    transform: rotate(-2deg);
}

td.info {
    background-image: url(backgrounds/yellowwall.gif);
    background-blend-mode: darken;
    overflow-y: scroll;  
    padding: 5px;
    text-align: right;
    height: 150px;
    width: 230px;
}

span#title, #artist, #trackname {
    font-family: '2Credits';
    font-size: 15px;
    line-height: 16px;
    letter-spacing: 1px;
}

#title {
    color: #164da1;
}

#artist {
    color: #4f95ff;
}

#trackname {
    color: #9d8de5;
}

td.cd {
    border-radius: 15px;
    background-image: url(/images/pngegg.png);
    background-size: cover;
    padding: 0%;
    z-index: 100;
    height: 150px;
    width: 162px;
}

img#disc {
    scale: 95%;
    mix-blend-mode: hard-light;
    z-index: 200;
    opacity: 0.7;
}
img#disc:hover {
    scale: 99%;
    z-index: 900;
    mix-blend-mode: normal;
    box-shadow: 0px 0px 20px #1b0d52;
    border-radius: 50%;
    transform: rotate(8deg);
    opacity: 1;
}








button#chatbutton:hover {
    font-style: italic;
    font-weight: bolder;
    color: #f6b9fd;
    background-color: #709adb;
}

h2#button {
    font-family: 'PerfectDOS';
    font-size: 28px;
    line-height: 1px;
    font-weight: bold;
    margin: auto;
    font-variant: small-caps;
}

button#chatbutton {
    width: fit-content;
    height: 20px;
    border-radius: 10px 10px 0px 0px;
     color: #f6f67a;
    text-shadow: -2px 2px #3133a9;
    letter-spacing: 2px;
    box-shadow: inset -1px -1px #575c91,
      inset 1px 1px #dfdfdf, inset -2px -2px #79748d,
      inset 2px 2px #ffffff, 0px 1px 5px #2a3180;
    border: 1px solid #211b83;
    display: inline-block;
    position: absolute;
    margin-left: -366px;
    margin-top: 132px;
    transform: rotate(-90deg);
    z-index: 200;
}

img#moon {
    transform: rotate(90deg);
}


#chat {
    background-color: rgb(124, 140, 188, 0.6);
    border: 1px solid #403a79;
    width: 250px;
    height: 334px;
    position: absolute;
    left: 0%;
    top: 10%;
    z-index: 1000;
    display: none;
    box-shadow: inset -1px -1px #242424,
      inset 1px 1px #dfdfdf, inset -2px -2px #808080,
      inset 2px 2px #ffffff, 2px 0px 10px #2a3180;
    padding: 3px;
    cursor: url(/cursor/Wug\ blue\ move.cur), move;
}

#chatheader {
    width: 100%;
    height: 17px;
    background: #ADFFC9;
    background: linear-gradient(96deg, rgba(173, 255, 201, 1) 0%, rgba(176, 248, 246, 1) 35%, rgba(177, 206, 255, 1) 69%);
}

#chatheader {
    text-align: right;
    padding: 3px 2px 3px 3px;
    display: flex;
    justify-content: right;
    align-items: center;
}


#chatheader:hover {
    cursor: url(/cursor/Wug\ blue\ move.cur), move;
}

iframe#chatroom {
    margin: auto;
    display: block;
    margin-top: 2px;
    border: #242424 solid 1px;
    
    
    
}

















































/* SCROLLBAR */

::-webkit-scrollbar {
    width: 16px;
}
::-webkit-scrollbar-button {
    background-color: #709adb;
    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: #709adb;
    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;
}
























/* MUSIC PLAYER */

.title-bar {
    background: #ADFFC9;
background: linear-gradient(96deg, rgba(173, 255, 201, 1) 0%, rgba(176, 248, 246, 1) 35%, rgba(177, 206, 255, 1) 69%);
    
    
}

.player {
    cursor: url(cursor/pizza\ tower\ glove.cur), default;
    width: 550px;
    border: #242424 solid 1px;
    border-width: 1px 0px 0px 1px;
    margin: auto;
}

i.fas:hover {
    cursor: url(cursor/pizza\ tower\ glove.cur), default;
}

i.fas.fa-pause, i.fas.fa-play, i.fas.fa-forward, i.fas.fa-backward{
    color:#ADFFC9; /* color of controls */
    text-shadow: 0px 1px #253770;
}    

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
    cursor: url(cursor/pizza\ tower\ glove.cur), default;
  }
   
  input[type="range"]:focus {
    outline: none;
  }
   
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 15px;
    width: 15px;
    background: url(/icons/spin.gif);
    background-size: cover;
    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: #272354 ;
    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:#8c9ccf;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 #222222}
   
  .title-bar-controls button {background:#6d89ae;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: #7c8cbc;
    padding: 3px;
    width:550px;
  }
   
  .title-bar {
    padding: 3px 2px 3px 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
   
  .title-bar-text {
    font-family: "W95FA";
    font-weight: 600;
    font-size: 10px;
    color: #4f95ff;
    
    letter-spacing: 1px;
    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("/icons/window/minimize.svg");
  background-size: 50%;
  background-position:bottom 3px left 4px;
  background-repeat:no-repeat
 }
   
  .title-bar-controls button[aria-label=Maximize]{
  background-image:url("/icons/window/maximize.svg");
  background-size: 58%;
  background-position:top 2px left 3px;
  background-repeat:no-repeat}
   
  .title-bar-controls button[aria-label=Close]{
  background-image:url("/icons/window/close.svg");
  background-size: 50%;
  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/pizza\ tower\ glove.cur), default;
      }
   
   
      /* settings for firefox browsers */
      input[type=range]::-moz-range-track {
          width: 100%;
          height: 2px; /* thickness of seeking track */
          cursor: url(cursor/pizza\ tower\ glove.cur), default;
      }
   
      .flex {display: flex;}
   
      .titlebaricon { height:14px; width:14px;}
   
   
      .songtitlewindow {
          background-color:#6c64d7;
          box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;
          color: #65fe98;
          padding: 0px 2px 0px 2px;
          text-shadow: 0px 1px 2px #2b2da9;
      }
   
      #musicplayer {
          border:2px solid #9d8de5; /* border around player */
          border-width: 2px 0px 0px 0px;
          width:599px; /* width of the player */
      }
   
      #imagestyle {
          background:#9d8de5; /* background color of player */
          border:2px solid #9d8de5; /* border around player */
          width:85px; /* width of the player */
          height:85px;
          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: "PerfectDOS";
          letter-spacing: 1px;
          font-size: 18px;
          font-weight: 900;
      }
   
      .controls {
          font-size:18px !important; /* size of controls */
          text-align:center;
          width:50%;
          margin: auto;
          position:relative;
          bottom:15px;
      }
   
      .controls td {
          padding:8px 3px 0px 3px; /* padding around controls */
          
      }
   
      button {
          min-width:100px;
          cursor: url(cursor/pizza\ tower\ glove.cur), default;
      }
   
      .seeking {
          background-color:#7c8cbc; /* background color of seeking bar */
          color: #543223;
          display:flex;
          justify-content: space-evenly;
          padding:14px; /* padding around seeking bar */
          cursor: url(cursor/pizza\ tower\ glove.cur), default;
      }

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