/* Start custom CSS for html, class: .elementor-element-c6f5bc5 */#title{
    color: white;
}

#playlist{
    margin-top:30px;
    max-width:400px;
}

.song-item{
    padding:12px 15px;
    margin-bottom:10px;
    background:#222;
    color:white;
    border-radius:8px;
    cursor:pointer;
    transition:.3s;
}

.song-item:hover{
    background:#333;
}

.vinyl-player{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:60px;
}

.controls{
    display:flex;
    gap:15px;
}

.controls button{
    width:60px;
    height:60px;
    border-radius:50%;
    border:1px solid #fff;
    background:transparent;
    color:white;
    font-size:22px;
    cursor:pointer;
}

.turntable{
    position:relative;
    width:min(550px,90vw);
    height:min(550px,90vw);
}

#record{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

#record.playing{
    animation:girar 6s linear infinite;
}

#cover{
    position:absolute;
    width:170px;
    height:170px;
    border-radius:50%;
    object-fit:cover;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);
}

.arm{
    position:absolute;
    width:220px;
    right:-30px;
    top:20px;
    transform:rotate(25deg);
}

.song-info{
    width:250px;
}

.song-info h2{
    margin:0;
}

.song-info p{
    opacity:.7;
}

@keyframes girar{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@media (max-width: 768px){

    .vinyl-player{
        flex-direction:column;
        gap:20px;
        padding:20px;
        min-height:auto;
    }

    .turntable{
        width:90vw;
        height:90vw;
        max-width:400px;
        max-height:400px;
    }

    #cover{
        width:28%;
        height:28%;
    }

    .arm{
        width:35%;
        right:0;
        top:5%;
    }

    .controls{
        order:2;
    }

    .song-info{
        width:100%;
        text-align:center;
        order:1;
    }

    #playlist{
        width:100%;
        max-width:100%;
        padding:0 15px;
        box-sizing:border-box;
    }

    .song-item{
        text-align:center;
    }

}/* End custom CSS */