#musicplayer{
font-family: 'basiic';
font-weight:bold;
height:30px;
width:100%;
left:0;
top:0;
position:fixed;
margin-bottom:20px;
display:flex;
background: linear-gradient(180deg,#cc2d3e 0%, #ff5959 45%, #630115 47%, #cc2d3e 100%);
border:ridge 2px #cc2d3e;/* border around player */
outline: solid 2px black;
box-shadow: inset 10px 0px 6px -10px #630115, inset -13px 0px 6px -10px #630115, inset 0px 10px 6px -10px #ff5959, inset 0px -13px 6px -10px #630115;
}
.songtitle{
display:block;
padding:2px; /* padding around song title */
font-family: 'pixel';
margin-top:4px;
margin-right: 5px;
font-size:15px;
color:black;
letter-spacing: 1px;
background: white;/* background of song title */
border: gray inset 1px;
border-radius:6px;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
}
.controls{
font-size:12px; /* size of controls */
text-align:center;
width:100px;
height:20px;
text-decortation:none;
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(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
}
.controls td{
padding-top:5px; /* padding around controls */
}
.seeking{
width:75%;
background: transparent;/* background color of seeking bar */
display:flex;
justify-content: space-evenly;
padding:7px; /* padding around seeking bar */
}
.current-time{
padding-right:5px;
margin-right: 3px;
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(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
}
.total-duration{
padding-left:5px;
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(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
}
.ctrlimg {
height:16px;
width:16px;
}
.ctrlimg:hover{
cursor:help;
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
background: transparent;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 6px; /* thickness of seeking track */
cursor: help;
border-radius: 6px;
background: black; /* color of seeking track */
border: 1px white solid;
}
input[type=range]::-webkit-slider-thumb {
height: 30px; /* height of seeking square */
width: 20px; /* width of seeking square */
background-image: url('https://file.garden/Zztv0a9yEhr5pmEq/tumblr_40786d3985453eb5412348aad980ac51_3a9a1088_1280%20(1).gif'); /* image of seeking square */
background-size: 25px;
-webkit-appearance: none;
margin-top: -10px;
}
input[type=range].volume_slider::-webkit-slider-runnable-track {
background: white; /* color of volume seeking track */
filter:drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black); /* outline of volume seeking track */
}
input[type=range].volume_slider::-webkit-slider-thumb {
background-image: url(https://file.garden/Zztv0a9yEhr5pmEq/798d7d72_original.png);/* image of volume seeking square */
background-size: 20px;
height: 20px; /* height of volume seeking square */
width: 20px;
margin-top: -8px;
}
.slider_container {
width: 15%; /* width of volume seeker */
display: flex;
justify-content: center;
align-items: center;
}
Welcome to my Website!
This is a paragraph! Here's how you make a link: Neocities.
Here's how you can make bold and italic text.
Here's how you can add an image:
Here's how to make a list:
- First thing
- Second thing
- Third thing
Cupcake ipsum dolor sit amet. Carrot cake marzipan bonbon donut I love tiramisu jujubes muffin dessert. Tootsie roll toffee gingerbread gummies cupcake I love. Topping soufflé gummi bears I love cotton candy cupcake tootsie roll marzipan. Caramels pudding topping marzipan tootsie roll. Cupcake caramels caramels topping lemon drops. Caramels dessert gummies cotton candy shortbread I love gummies tart marshmallow. Caramels pie sugar plum sugar plum sweet. Apple pie cheesecake brownie soufflé tart cheesecake tootsie roll. Icing biscuit ice cream danish sesame snaps lollipop sugar plum tiramisu. Danish tiramisu I love muffin cheesecake cheesecake jujubes chocolate bar. Bear claw tart pudding brownie tart apple pie. Jelly-o chocolate bar biscuit bear claw carrot cake cookie chocolate. Topping brownie toffee marzipan candy chocolate bar cake jelly beans.
To learn more HTML/CSS, check out these tutorials!
