body { 
    font-family: Arial, sans-serif; 
    background: #181818; 
    color: #fff; 
    text-align:center; 
    padding:20px;
            font-family: 'Geom', sans-serif;
    }

    .container{
        max-width:600px;
        margin:0 auto;
    }

    h1{
        font-size:32px;
        margin-bottom:10px;
    }

    .sottotitolo{
        font-size:20px;
        margin-bottom:30px;
        color:#ffd166;
        text-align: left;
    }

    .song-info{
        display:flex;
        justify-content:space-around;
        font-size:18px;
        margin-bottom:20px;
    }

    .steps-list{
        list-style:none;
        padding:0;
        margin:20px 0;
    }


    .step{
        padding:10px;
        border:1px solid #444;
        margin:20px 0;
        border-radius:10px;
        transition:all 0.3s ease;
    }


    .step.active{
        border-color:#ffd166;
        color:#ffd166;
        font-weight:bold;
    }


    .controls{
        display:flex;
        gap:30px;
        justify-content:center;
        margin:40px 0;
    }

    
    .btn{
        padding:15px 20px;
        border:none;
        border-radius:30px;
        background:#ffd166;
        color: #181818;
        cursor:pointer;
        font-size: 25px;
    }

    .btn:hover{
        background:#ffca3a;
    }

    .btn:active{
        transform:scale(0.95);
    }

    .fa-play, .fa-pause{
        font-size:24px;
        color: #181818;
    }

    .reveal{
        margin-top:20px;
        padding:15px;
        background:rgba(255,209,102,0.1);
        border-radius:10px;
    }

    .reveal.hidden{
        display:none;
    }

    progress {
        width: 100%;
        height: 8px;
        -webkit-appearance: none;
        appearance: none;
        border: none;
        background: #ddd; /* colore sfondo */
        border-radius: 4px;
        overflow: hidden;
    }

    progress::-webkit-progress-bar {
        background: #ddd;
    }

    progress::-webkit-progress-value {
        background: #ffd166; 
    }

    progress::-moz-progress-bar {
        background: #ffd166;
    }

    #player {
        display: none;
    }

    .bigliettolink {
        color: #181818;
        background-color: #ffd166;
        padding: 5px 8px;
        border-radius: 10px;
        margin: 0 5px;
        text-decoration: none;
        font-weight: bold;
    }

    .gift {
        margin-top: 30px;
        font-size: 25px;
    }

@media (max-width: 600px) {

    h1 {
        font-size: 24px;
        text-align: left;
    }

    .song-info {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .song-info p {
        font-size: 18px;
    }

   .controls{
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .btn {
        max-width: fit-content;
        font-size: 20px;
        padding: 10px 15px;
        font-weight: bold;
        color: #181818;
    }


      .gift {
        margin-top: 30px;
        font-size: 20px;
    }
}