#trackInfo {
	font-size: 1.5rem;
	text-align: center;
}
body {
	margin: 0px;
	background:url('https://bettysgraphics.neocities.org/images/backgrounds/music%20notes%207.gif');
}
  html {
cursor: url("https://cdn.fastly.steamstatic.com/steamcommunity/public/images/apps/697440/4436b48dc046c1da4a9d0493bb7890366a1ac348.jpg"), auto;
}

button{
	cursor: url("https://cdn.fastly.steamstatic.com/steamcommunity/public/images/apps/697440/4436b48dc046c1da4a9d0493bb7890366a1ac348.jpg"), auto;
}

a {
cursor: url("https://cdn.fastly.steamstatic.com/steamcommunity/public/images/apps/697440/4436b48dc046c1da4a9d0493bb7890366a1ac348.jpg"), auto;
}

.cursor-trail {
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  border-radius: 50%;

}

.cursor {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;
}
#header {

background:url('https://m.gjcdn.net/fireside-post-image/200/46069965-ll-xay4hdsz-v4.webp');
border-radius: 8px;
background-size: 50px;

}
#nav {
border-radius: 8px;
background-size: 30px 30px;
height: 50px;
}
#nav li {

float:left;
border-radius: 8px;
display:block;
width:110px;
}
#main {
	margin:0 auto;
	background:url('https://bettysgraphics.neocities.org/images/backgrounds/pattern%20123.jpg');
	width:750px;
	border-radius: 8px;
	padding: 10px;
}
#main > h1 {
	font-size: 3.5rem;
	text-align: center;
}
#main1 {
background:url('https://m.gjcdn.net/fireside-post-image/200/46071452-ll-ehkcntew-v4.webp');
background-size: 100px;
float:center;
width: 736px;
color:white;
padding: 5px;
margin: auto;
border-radius: 8px;
border: 2px solid black;
text-align: center;
}

#main2 {
background:url('https://m.gjcdn.net/fireside-post-image/300/46082714-ll-raedr9dn-v4.webp');
background-size: 100px;
background-position: left top;
float:center;
width: 700px;
margin: auto;
border-radius: 8px;
border: 2px solid black;
text-align: center;
}

#seek, #trackInfo {
	width:90%;
	margin: 2rem auto;
	display: block;
}
#seek{
	cursor: url("https://m.gjcdn.net/fireside-post-image/100/46332518-ll-u79ea7jm-v4.webp"), auto;
}
#trackControls {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}
#trackControls .button{
	height: 5rem;
	width: 5rem;
	cursor: url("https://m.gjcdn.net/fireside-post-image/100/46332518-ll-u79ea7jm-v4.webp"), auto;
}
#trackControls .button:hover {
	filter: saturate(200%);
	filter: brightness(115%);
}
#trackControls #playButton, #playButton {
	height: 6.5rem;
	width: 6.5rem;
}
#trackArt {
    width: 50%;
    margin: 2rem 25%;
}

#tracklist {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

#tracklist > div {
	margin: 2px;
	white-space: nowrap;
    overflow: hidden;
	flex: 1 0 300px;
	display: grid;
	grid-template-columns: 4rem 1fr;
	grid-template-rows: 2rem 2rem;
}
.listTrack {
	background-color: #ffffff22;
	cursor: url("https://m.gjcdn.net/fireside-post-image/100/46332518-ll-u79ea7jm-v4.webp"), auto;
}
.listTrack:hover {
	background-color: #ffffff44;
}

.listTrack img {
	grid-row-start: 1;
	grid-column-start: 1;
	grid-row-end: 3;
	grid-column-end: 2;
    height: 100%;
	width: 100%
}
.trackName {
	grid-area: 1 / 2 / 2 / 3; /* This is shorthand for the row start, column start, row end and column end */
	padding-left: 5px;
}
.artistName {
	grid-area: 2 / 2 / 3 / 3;
	padding-left: 5px;
}
#footer {
padding: 5px;
background:url('https://bettysgraphics.neocities.org/images/backgrounds/pattern%20545.gif');
border-radius: 8px;
border: 2px solid black;
clear:both;

text-align: center;
}