@media (max-width: 1300px){
    .vinyl-main-side {
        width: 55vw;
        height: 55vw;
    }

    html{
        height: 160%;
    }

    .vinyl-front-side {
        width: 55vw;
    }

    html {
        font-size: 12px;
    }

    .wrapper {
        padding: 40px;
    }
    .duration-bar, .time-stamps {
        width: 100%;
    }
    .page-container{
        align-items: center;
        flex-direction: column;
        gap: 2vw;
    }
    .audio-player-section {
        width: 55vw;
        height: 600px;
    }
    .audio-player {
        width: 80%;
    }
    .time-stamps {
        width: 80%;
    }
}

@media (max-width: 666px){
    html {
        font-size: 10px;
    }
}

@media (max-width: 510px){
    .control-panel {
        gap:30px;
    }

    .vinyl-main-side {
        width: 65vw;
        height: 65vw;
    }

    .vinyl-front-side {
        width: 65vw;
    }
    html {
        font-size: 8px;
        height: 170%;
    }
    .audio-player-section {
        width: 70vw;
        height: 500px;
    }
    .audio-player {
        width: 100%;
    }
    .time-stamps {
        width: 100%;
    }
    .control-buttons {
        gap: 30px;
    }
}