body {
   background-image: url("images/body.png");
  background-position: right top, left top;
  background-repeat: repeat, repeat;
  border: none;
    font-family: "Meiryo", "Verdana", "Tahoma", sans-serif;
	  text-align: justify;
line-height: 1.3;
 color: #3399ff;
  cursor: url('images/cur.webp'),auto;
font-size: 10px;

}

 h2 {
	 color: #0099ff;
font-size: 16px;
    font-family: "courier new", monospace;
  text-align: center;
  background-color: #ffffff;
 }
.gradmask {
background: linear-gradient(white 50%, #7cd8f3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: "Meiryo", "Verdana", "Tahoma", sans-serif;
font-weight:bold;
filter:  drop-shadow(0px 1px #6b9dcb) drop-shadow(0 -1px #6b9dcb) drop-shadow(1px 0 #6b9dcb) drop-shadow(-1px 0 #6b9dcb)drop-shadow(0px 1px #8bddf4) drop-shadow(0 -1px #8bddf4) drop-shadow(1px 0 #8bddf4) drop-shadow(-1px 0 #8bddf4);
letter-spacing: 2px;
}


a:link {
  color: white;
  text-decoration: none;
  text-align: justify;
line-height: 1.3;
font-size: 16px;
}


a:visited {
  color: white;
  text-decoration: none;
  text-align: justify;
line-height: 1.3;
}


a:hover {
  color: white;
  text-decoration: none;
  text-align: justify;
line-height: 1.3;

cursor: url('images/cur.webp'),auto;
}


a:active {
  color: white;
  text-decoration: none;
  text-align: justify;
line-height: 1.3;
}
/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #6b9dcb #d7e5f2;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #d7e5f2;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #6b9dcb;
    border-radius: 10px;
    border: 3px none #ffffff;
  }
#musicplayer{
                font-family:'Arial'; /* default font */
                background: #d7e5f2; /* background color of player */
                border:3px solid #9dc1e2; /* border around player */
				filter:  drop-shadow(0px 1px #6b9dcb) drop-shadow(1px 0px #6b9dcb);
                width:99%; /* width of the player - make it 100% if you want it to fill your container */
                padding:0px;
                text-align:center; 
                display:flex;
                flex-direction:column;
                gap:0px;
            }

            .songtitle, .track-info, .now-playing{
                padding:0px;
            }

            .controls{
                display:flex; 
                flex-direction:column; 
                gap:0px;
            }

            .buttons{
                display:flex;
                justify-content:center;
                font-size:12px !important; /* size of controls */
                width:100%;
            }

            .buttons div{
                width:33.3%;
            }

            .playpause-track, .prev-track, .next-track{
                color:#3399ff; /* color of buttons */
                font-size:12px !important; /* size of buttons */
            }

            .volume-icon{
                font-size:12px !important; /* size of volume icon */
            }

            .seeking, .volume{
                display:flex;
                flex-direction:row;
                align-items:center;
                gap:0px;
				
            }

            .now-playing, .track-info{
                background-color:#d7e5f2; /* background color of top two boxes */
            }

            .now-playing{
                font-weight:bold;
				
            }

            input[type=range]{
                -webkit-appearance:none; /* removes default appearance of the tracks */
                width:90%;
            }

            input[type=range]:focus{
                outline:none; /* removes outline around tracks when focusing */
            }

            input[type=range]::-webkit-slider-runnable-track{
                width:90%;
                height:4px; /* thickness of seeking track */
                background:#3399ff; /* 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:#3399ff; /* 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:90%;
                height:4px; /* thickness of seeking track */
                background:#3399ff; /* 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:#3399ff; /* color of seeker square */
                border:none; /* removes weird border around seeker square in firefox */