body {
    background-image: url(/images/Home/bgoverlay.png), url(/images/music/arcadebg.png);
    background-size: cover, 200px;
}

* {
    cursor: url(/images/magicwand3.png),auto;
}

a img{
    cursor: url(/images/magicwand4.png),auto;
}


img {
    user-select: none;
}
#main {
    display: flex;
    justify-content: center;
}

#main div {
outline: solid rgba(255, 0, 0, 0);
}


#txt {
    box-sizing: border-box;
    transform-origin: center;
    padding: 25px;
    height: 200px;
    width: inherit;
    background-image: url(/images/music/bubble.png);
    background-size: 600px 200px;
}

#center {
text-align: center;
height: 500px;
    width:600px;
}

#list  {
    padding: 10px;
    color: rgb(12, 37, 0);
    font-family: pixel;
    outline: solid rgb(19, 0, 0);
    height: 200px;
    background-image: url(/images/music/gradient2.png);
    background-size: cover;
}

ul{
    transform-origin: left;
    font-family: pixel;
}

li {
    transition: 0.2s all ease-in-out;
    color: rgb(0, 0, 0);
}

li:hover {
color: rgb(23, 31, 4);
font-size: 18px;
text-shadow: rgb(99, 53, 0) 1px 1px 1px;
    /* animation: enlarge 0.3s ease-in-out 1 forwards;*/
}


#cat {
animation: float 3s ease-in-out infinite alternate-reverse;
}

#back {
    height: 60px;
    width: 100px;
    display: block;
margin: 1px auto 1px auto;
}


#tracklist {
    position: relative;
    scrollbar-color: rgb(124, 0, 0) rgb(0, 0, 0);
    height: 500px;
overflow-y: scroll;
overflow-x: hidden;
}

#tracklist .margin{
margin-top: 40px;
}


#record img{
    width: 200px;
}

#cover {
    scrollbar-color: rgba(194, 118, 4, 0.644) rgba(94, 53, 0, 0.575);
    overflow-x: hidden;
    overflow-y: scroll;
    height: 200px;
    width: 200px;
    background-image: url(/images/music/cover.png);
    opacity: 90%;
    z-index: 99;
}

#disc img{

animation: rotate 4s linear infinite;
}



@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
    
}


@keyframes float {
   from {transform: translateY(10%)}
   to {transform: translateY(0%);}
    
}


@font-face {
    font-family: friendly;
        src: url("/images/fonts/pedagogique/Pedagogique\ Medium.otf")  
        format(opentype);
    }

@font-face {
        font-family: pixel;
            src: url("/images/fonts/visitor1.ttf")  
            format(opentype);
}


#splat {
    transition: 0.3s all ease-in-out;
    animation: rotate 4s linear infinite;
    opacity: 20%;
    position: absolute;
    z-index:-99;
    right: 100px;
    top:1px;
}