body {
  background-image: url(/Backgrounds/silentbackground.png);
  background-size: 8%;
  color:#d4efff;
  font-family: "handcaps";
  background-color:black;
}

body, html {
    scrollbar-width: auto;
    scrollbar-color: #d4efff black;
  }

@font-face {
    font-family: 'shadowlight';
    src: url('https://silentshadow.neocities.org/fonts/ShadowsIntoLight.ttf');
}
@font-face {
    font-family: 'handcaps';
    src: url('https://silentshadow.neocities.org/fonts/Handcaps.otf');
}
      @media (max-width: 1000px) {
  .granddiv {
    flex-direction:column;
    width:400px;
  }
  .title {
    width:400px;  
  }
}

a:link {
  color:#d4EFFF;
  text-decoration:underline;
}
a:visited {
  color:#d4eFFF;
}
a:hover{
  color:#707F87;
}
h1 {
  font-family: 'shadowlight';
}
p {
  font-size:25px;
  font-family: 'handcaps';
}

ul {
  font-size: 25px
}
  .granddiv {
  text-align: center;
  max-width: 1600px;
  min-width: 400px;
  display: flex;
  top:0;
  bottom:0;
  scrollbar-color: #d4efff black;
  right:0;
  left:0;
  border-radius:10px;
  margin:auto;
  align-items:center;
}
.centerbar {
  background:rgba(31,54,72,0.5);
  border: #9DC1D4 dashed;
  border-width:4px;
  max-width:800px;
  min-width:200px;
  border-radius:10px;
  position:relative;
  padding:10px;
  margin:0 auto auto
}
.leftbar {
  background:rgba(31,54,72,0.5);
  border: #9DC1D4 dashed;
  border-width:4px;
  max-width:400px;
  min-width:200px;
  border-radius:10px;
  position:relative;
  padding:10px;
  margin:0 auto auto
}
.rightbar{
  background:rgba(31,54,72,0.5);
  border: #9DC1D4 dashed;
  border-width:4px;
  max-width:400px;
  min-width:200px;
  border-radius:10px;
  position:relative;
  padding:10px;
  margin:0 auto auto
}
.innerblock {
  border: #BFE2F2 dotted;
  border-width:8px;
  scrollbar-color: #d4efff black;
  margin:0;
  padding:3px;
  border-radius:10px;
  background:none;
}
.title {
  background:rgba(31,54,72,0.5);
  border: #9DC1D4 dashed;
  border-width: 4px;
  max-width:800px;
  border-bottom-color:rgba(31,54,72,0.0);
  margin:auto;
  border-radius:10px;
  text-align:center;
  align-items:center;
}
#filter {
  filter:url(/Images/overlay.png);
  filter: opacity(50%);
}
#ww-stamp{
    width: 99px;
    height: 56px;
}
#webmasteringbtn{
    display: flex;
    margin: auto;
    align-items: center;
    justify-content: space-evenly;
    font-size: 2rem;
    text-align:center;
}
#webmasteringbtn img{
    width:132px;
    height:46.5px;
    margin:auto;
}
#webmasteringbtn a{
    color: #2da5d8;
    text-decoration: none;
}
#webmasteringbtn a:hover{
    color: #fa8c8c;
    text-decoration: none;
}
#musicplayer{
                font-family:'shadowlight'; /* default font */
                background: rgba(0,0,0,0); /* background color of player */
                border:4px #4cd4de; /* border around player */
                width:fit-content; /* width of the player - make it 100% if you want it to fill your container */
                padding:1px;
                margin:auto;
                text-align:center; 
                display:flex;
                flex-direction:column;
                gap:10px;
            }
 
            .songtitle, .track-info,{
                padding:5px;
            }
 
            .controls{
                display:flex; 
                flex-direction:column; 
                gap:10px;
            }
 
            .buttons{
                display:flex;
                justify-content:center;
                font-size:17px !important; /* size of controls */
                width:100%;
            }
 
            .buttons div{
                width:33.3%;
            }
 
            .playpause-track, .prev-track, .next-track{
                color:#d4efff; /* color of buttons */
                font-size:35px !important; /* size of buttons */
            }
 
            .volume-icon{
                font-size:22px !important; /* size of volume icon */
            }
 
            .seeking, .volume{
                display:flex;
                flex-direction:row;
                align-items:center;
                gap:5px;
            }
 
            .track-info{
                background-color:#c9eff2; /* background color of top two boxes */
            }
 
            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:#d4efff; /* 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:#d4efff; /* 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:#d4efff; /* color of seeker square */
                border:none; /* removes weird border around seeker square in firefox */
            }