@import url( https://fonts.googleapis.com/css?family=Kumar+One);  


body {
    margin: 0;
    padding: 0;
    background: azure;
    text-align: center;  /* centrira sve inline i inline-block elemente */
}

#naziv {
    font-size: 45px;
    font-family: 'Alfa Slab One';
    -webkit-text-fill-color: Blue;
    -webkit-text-stroke: 1px #FF3333;
    display: block;
    width: 100%;
    text-align: center;
    display: block;         /* standardno, ali naglašavam */
    width: 100%;
    margin: 0;              /* opciono, da nema viska prostora */
    clear: none; 
    
}
audio {
    display: block;      /* pretvara audio u blok element */
    margin: 20px auto;   /* horizontalno centriranje + vertikalni razmak */
}     
h1 {
   font-size: 40px;
    font-family: 'Alfa Slab One';
    -webkit-text-fill-color: #00BFFF;
    -webkit-text-stroke: 1px azure;
    margin:0;
}
     #lista {
        width: 1500px;
        height: auto;
        border: 3px solid gray;
        
        display: inline-block;
    }


    #player {
        width:90%;
        height:auto;
    }
#nav {
    height: auto;
    background-color: red;
}
#nav a {
    background: white;
    border-radius: 4px;
    border: 1px solid #573357;
    display: inline-block;
    color: blue;
    font-family: arial;
    font-size: 17px;
    font-weight: bold;
    padding: 10px 20px;
    text-decoration: none;
    margin: 2px;
}



.tema a {
    display: inline-block;
    background-color: red;
    border-radius: 6px;
    color: white !important;
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
    padding: 5px;
    font-family:sans-serif;
}






h3 {
              font-size:30px;
               font-weight: bold;
               text-shadow: 0 1px 0 #ccc;
             
               color:blue;
    
}
.tdi {
    background: url('slike/tdi_radio.png') no-repeat center;
    background-size: cover;
    display: block;
}
.nostalgija {
    background: url('slike/nostalgija.jpg') no-repeat center;
    background-size: cover;
    display: block;
}
.naxi {
    background: url('slike/naxi_radio.png') no-repeat center;
    background-size: cover;
    display: block;
}


.jat {
    background: url('slike/radio_jat.png') no-repeat center;
    background-size: cover;
    display: block;
}

.play {
    background: url('slike/play_radio.png') no-repeat center;
    background-size: cover;
    display: block;
}

.karolina {
    background: url('slike/karolina.jpg') no-repeat center;
    background-size: cover;
    display: block;
}

.hitfm {
    background: url('slike/hitfm.png') no-repeat center;
    background-size: cover;
    display: block;
}
.radio021 {
    background: url('slike/radio021.png') no-repeat center;
    background-size: cover;
    display: block;
}

.rock {
    background: url('slike/rock.jpg') no-repeat center;
    background-size: cover;
    display: block;
}

.topfm {
    background: url('slike/topfm.jpg') no-repeat center;
    background-size: cover;
    display: block;
}

.kosava {
    background: url('slike/kosava.png') no-repeat center;
    background-size: cover;
    display: block;
}
.laguna {
    background: url('slike/laguna.png') no-repeat center;
    background-size: cover;
    display: block;
}

.asfm {
    background: url('slike/asfm.jpg') no-repeat center;
    background-size: cover;
    display: block;
}

.superfm {
    background: url('slike/superfm.png') no-repeat center;
    background-size: cover;
    display: block;
}
.city {
    background: url('slike/city.png') no-repeat center;
    background-size: cover; /* <-- KLJUﾄ君A IZMENA */
    display: block;
}

.pingvin {
    background: url('slike/pingvin.jpg') no-repeat center;
    background-size: cover;
    display: block;
}

.red {
    background: url('slike/redradio.png') no-repeat center;
    background-size: cover;
    display: block;
}



.sradio {
    background: url('slike/s1.png') no-repeat center;
    background-size: cover;
    display: block;
}

.s2 {
    background: url('slike/s2.png') no-repeat center;
    background-size: cover;
    display: block;
}

.s3 {
    background: url('slike/s3.png') no-repeat center;
    background-size: cover;
    display: block;
}

.s4 {
    background: url('slike/s4.png') no-repeat center;
    background-size: cover;
    display: block;
}


.spoprock {
    background: url('slike/spoprock.png') no-repeat center;
    background-size: cover;
    display: block;
}

.sjuzni {
    background: url('slike/sjuzni.png') no-repeat center;
    background-size: cover;
    display: block;
}

.snarodni {
    background: url('slike/snarodni.png') no-repeat center;
    background-size: cover;
    display: block;
}

.sfolk {
    background: url('slike/sfolk.png') no-repeat center;
    background-size: cover;
    display: block;
}













.okradio {
    background: url('slike/okradio.png') no-repeat center;
    background-size: cover;
    display: block;
}

.cool {
    background: url('slike/cool.png') no-repeat center;
    background-size: cover;
    display: block;
}

.morava {
    background: url('slike/morava.png') no-repeat center;
    background-size: cover;
    display: block;
}
.moj {
    background: url('slike/moj.jpg') no-repeat center;
    background-size: cover;
    display: block;
}
.ritam {
    background: url('slike/ritam.png') no-repeat center;
    background-size: cover;
    display: block;
}

.sky {
    background: url('slike/sky.png') no-repeat center;
    background-size: cover;
    display: block;
}

.lola {
    background: url('slike/lola.png') no-repeat center;
    background-size: cover;
    display: block;
}



.pink {
    background: url('slike/pink.jpg') no-repeat center;
    background-size: cover;
    display: block;
}

.krajiski {
    background: url('slike/krajiski_radio.jpg') no-repeat center;
    background-size: cover;
    display: block;
}

@media only screen and (max-width: 1501px) {
    #lista {
     width:90%;
    }
}
@media only screen and (max-width: 1101px) {
    #lista {
     width:95%;
    }
}
@media only screen and (max-width: 751px) {
#lista {
     width:99%;
    }
     #player {
        width:90%;
        height:auto;
    }
  
 
 
  
   h2 {
font-family:impact;
font-size:30px;
-webkit-text-fill-color:red;
-webkit-text-stroke: 1px black;
    

}




#klik {
     color: white;
}
h3 {
              font-size:30px;
               text-shadow: 0 1px 0 #ccc;
              
               color:blue;
    
}
#player {
    width:333px;
    border:1px solid black;
    background-color:#339;
}
#nav {
    height: auto;
    background-color: red;
}
#nav a {
    background: white;
    border-radius: 4px;
    border: 1px solid #573357;
    display: inline-block;
    color: blue;
    font-family: arial;
    font-size: 17px;
    font-weight: bold;
    padding: 10px 20px;
    text-decoration: none;
    margin: 2px;
}

      h1 {
        font-size:45px;
               text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
               color:blue;
        
    } 
       .dgm {
 
  width:30%;
  height: 50px;
} 
    
}

@media only screen and (max-width: 425px) {
    
       h1 {
        font-size:40px;
        text-shadow: 0 1px 0 #ccc;
        color:blue;
        
    }
    
    #naziv {
    font-size: 45px;
   }
    
     #lista {
        width: 100%;
        border: 0;
    }  
   #player {
    width:300px;
    border:1px solid black;
    background-color:#339;
} 

   .dgm {
 
  width:25%;
  height: 50px;
}  
    
}


@media only screen and (max-width: 375px) {
    

    #naziv {
    font-size: 34px;
    -webkit-text-fill-color: Royalblue;
    -webkit-text-stroke: 2px silver;
}
     #lista {
        width: 100%;
        height: auto;
        border: 0;
        display: inline-block;
    }  
   #player {
    width:300px;
    border:1px solid black;
    background-color:#339;
} 
    

    
}
@media only screen and (max-width: 320px) {
    
       h1 {
        font-size:30px;
               text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
               color:blue;
        
    }
    
   #player {
    width:300px;
    border:1px solid black;
    background-color:#339;
} 
#naziv {
    font-size: 29px;
    -webkit-text-fill-color: Royalblue;
    -webkit-text-stroke: 2px silver;
}
    
   .dgm {
 width:40%;
  height: 40px;
} 

}