/* Osnovni stilovi za tijelo stranice */
    body {
      font-family: Arial, sans-serif;
      /* Postavlja font */
      padding: 20px;
      /* Dodaje unutarnje margine */
      background: #f4f4f4;
      /* Postavlja pozadinsku boju */
      display: flex;
      /* Omogućuje fleksibilno pozicioniranje elemenata */
      justify-content: center;
      /* Poravnava sadržaj horizontalno u sredinu */
      align-items: center;
      /* Poravnava sadržaj vertikalno u sredinu */
      height: 100vh;
      /* Postavlja visinu stranice na 100% visine preglednika */
      margin: 0;
      /* Uklanja vanjske margine */
    }

    /* Stilizacija za mini player */
    .player {
      background: white;
      /* Bijela pozadina */
      padding: 20px;
      /* Unutarnje margine */
      border-radius: 10px;
      /* Zaokruženi kutovi */
      width: 400px;
      /* Širina playera */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      /* Blagi okvir */
    }

    /* Stilizacija za tipke */
    button {
      margin: 5px;
      /* Razmak između tipki */
      padding: 10px 15px;
      /* Unutarnje margine tipki */
      border: none;
      /* Uklanja obrub */
      border-radius: 5px;
      /* Zaokruženi kutovi tipki */
      background: #007BFF;
      /* Plava boja pozadine tipki */
      color: white;
      /* Bijela boja teksta */
      cursor: pointer;
      /* Pokazuje da je tipka klikabilna */
      display: flex;
      /* Koristi flexbox unutar tipke za poravnanje ikona */
      justify-content: center;
      /* Poravnava ikonu u središte */
      align-items: center;
      /* Poravnava ikonu vertikalno u središte */
      width: 60px;
      /* Fiksna širina za sve tipke */
    }

    button i {
      font-size: 20px;
      /* Postavlja jednaku veličinu za sve ikone */
      line-height: 0;
      /* Uklanja dodatni razmak oko ikona */
    }

    /* Stilizacija za kontener tipki - koristi flexbox */
    .player div {
      display: flex;
      /* Koristi flexbox za poravnavanje tipki u red */
      justify-content: space-between;
      /* Razmak između tipki */
      align-items: center;
      /* Poravnava tipke vertikalno */
      gap: 10px;
      /* Razmak između tipki */
    }

    button:hover {
      background: #0056b3;
      /* Tamnija plava boja kad je tipka u fokusu */
    }

    /* Stilizacija za padajući izbornik */
    select {
      padding: 10px;
      /* Unutarnje margine izbornika */
      width: 100%;
      /* Širina izbornika na 100% */
      margin-bottom: 10px;
      /* Razmak ispod izbornika */
    }

    /* Stilizacija za tekst "Slušate" */
    #nowPlaying {
      margin-top: 10px;
      /* Razmak od vrha */
      font-weight: bold;
      /* Podebljan tekst */
    }

    /* Stilizacija za kontrolu glasnoće */
    #volumeControl {
      width: 100%;
      /* Širina kontrole glasnoće */
      margin-top: 10px;
      /* Razmak od gore */
      display: flex;
      /* Postavlja kontrolu kao fleksibilni element */
      align-items: center;
      /* Poravnava elemente vertikalno */
    }

    /* Stilizacija za klizač glasnoće */
    #volumeSlider {
      width: 80%;
      /* Širina klizača glasnoće */
    }

    /* Stilizacija za prikaz glasnoće */
    #volumeValue {
      margin-left: 10px;
      /* Razmak s lijeve strane */
      font-weight: bold;
      /* Podebljan tekst */
    }

    #currentSong {
      min-height: 30px;
      /* Postavlja minimalnu visinu */
      line-height: 30px;
      /* Poravnava tekst unutar tog prostora */
    }
    
        /* Stiliziranje kontejnera s tipkama */
    .controls-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    /* Stiliziranje tipki i input polja */
    .file-container {
      display: flex;
      align-items: center;
    }

    #fileInput {
      margin-right: 10px;
    }