@font-face {
    font-family: pixelari;
    src: url(assetsandstuff/Pixellari.ttf) format(truetype);
    display: swap;
}

a {
    color: rgb(221, 221, 221);
    text-decoration: none;
    opacity: 80%;
}


body {
    width: 200px;
    height: 500px;
    background-image: url(assetsandstuff/bgggg.png);
    background-attachment: fixed;
    background-size: cover;
}


.logo img {
    position: absolute;
    width: 120px;
    top: 10px;
    border-radius: 10px;
}

.songt {
    position: absolute;
    font-size: 10px;
    font-family: pixelari;
    z-index: 1;
    left: 506px;
    opacity: 20%;
    top: 340px;
    transform: rotate(90deg);
    color: aliceblue;
}

.songa {
    position: absolute;
    font-size: 10px;
    font-family: pixelari;
    z-index: 1;
    left: 505px;
    opacity: 20%;
    top: 340px;
    transform: rotate(90deg);
    color: aliceblue;
}



.aboutsitens {
    position: absolute;
    font-size: 10px;
    font-family: pixelari;
    z-index: 1;
    left: 565px;
    opacity: 20%;
    top: 550px;
    color: aliceblue;
}

.link {
    position: absolute;
    font-size: 10px;
    font-family: pixelari;
    z-index: 1;
    left: 585px;
    opacity: 20%;
    top: 840px;
    color: aliceblue;
}






.vinyl-player img {
    position: absolute;
    width: 600px;
    top: 40px;
}

.vinyl img {
    position: absolute;
    width: 435px;
    top: 70px;
    left: 36px;
    animation: spins 093s linear infinite;
}

@keyframes spins {
    30% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.firstsong img {
    position: absolute;
    width: 120px;
    filter: drop-shadow(20px 10px 20px black);
    left: 740px;
    top: 80px;
    opacity: 90%;
    border-radius: 10px;
}



.secondsong img {
    position: absolute;
    width: 112px;
    filter: drop-shadow(20px 10px 20px black);
    left: 900px;
    top: 80px;
    opacity: 90%;
    border-radius: 10px;

}

.oc img {
    position: absolute;
    width: 304px;
    left: 950px;
    border-radius: 10px;
}

.sc img {
    position: absolute;
    width: 344px;
    left: 500px;
    top: 600px;
    z-index: 1;
    opacity: 90%;
    border: 4px solid rgb(116, 115, 115);
    filter: drop-shadow(20px 10px 20px black);
    border-radius: 10px;
    transition: 2s ease-in-out;
}

.sc img:hover {
    z-index: 2;
    width: 450px;
}

.abm img {
    position: absolute;
    width: 204px;
    z-index: 1;
    left: 400px;
    top: 600px;
    opacity: 80%;
    filter: drop-shadow(20px 10px 20px black);
    border-radius: 10px;
    transition: 2s ease-in-out;
}

.abm img:hover {
    z-index: 1;
    width: 250px;
}

.gifbw img {
    position: absolute;
    width: 350px;
    z-index: 0;
    left: 450px;
    top: 580px;
    opacity: 80%;
    filter: drop-shadow(20px 10px 20px black);
    border-radius: 10px;

}


.playbtn img {
    position: absolute;
    width: 38px;
    top: 439px;
    left: 45px;
    opacity: 80%;
}

.pausebtn img {
    position: absolute;
    width: 32px;
    top: 459px;
    left: 80px;
    opacity: 80%;
}



.songs-progressbar {
    position: absolute;
    width: 5px;
    top: 480px;
    height: 5px;
    border-radius: 20px;
    left: 360px;
    background: rgb(29, 29, 29);
    transition: width 1s;
    transform: all 5s ease;

}

.songs-timeline {
    position: absolute;
    width: 200px;
    top: 480px;
    height: 5px;
    border-radius: 20px;
    left: 360px;
    background: rgb(111, 110, 110);
    opacity: 10%;
}