body{

margin:0;
background:#050505;
color:white;
font-family:Arial, sans-serif;

}



/* HEADER */

.header{

min-height:70px;
background:#111;
border-bottom:3px solid #0080ff;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 30px;

font-size:30px;
font-weight:bold;

box-sizing:border-box;

}



.header select{

background:#222;
color:white;

padding:12px 20px;

border-radius:20px;
border:1px solid #0080ff;

font-size:18px;

}



/* MAIN */

.radio-box{

display:flex;

height:calc(100vh - 73px);

}



/* PLAYER */

.cover{

flex:1;

display:flex;
flex-direction:column;

align-items:center;
justify-content:center;

padding:20px;

}



.cover img{

width:250px;
height:250px;

object-fit:contain;

border-radius:50%;

background:white;

}



.cover h1{

color:#0080ff;

font-size:32px;

text-align:center;

}



audio{

width:450px;
max-width:90%;

}



/* LIST */

.list{

width:380px;

background:#111;

overflow-y:auto;

padding:20px;

box-sizing:border-box;

}



.radio-item{

display:flex;

align-items:center;

gap:15px;

background:#222;

padding:18px;

margin-bottom:12px;

border-radius:12px;

cursor:pointer;

font-size:20px;

transition:.2s;

}



.radio-item:hover{

background:#0080ff;

}



.radio-item img{

width:60px;

height:60px;

object-fit:contain;

background:white;

border-radius:50%;

}



/* =====================
   TELEFON
===================== */

@media(max-width:768px){


.header{

height:auto;

min-height:60px;

padding:15px;

flex-direction:column;

gap:15px;

font-size:24px;

text-align:center;

}



.header select{

width:90%;

font-size:18px;

}



.radio-box{

height:auto;

display:flex;

flex-direction:column;

}



.cover{

order:1;

padding:30px 10px;

}



.cover img{

width:180px;
height:180px;

}



.cover h1{

font-size:25px;

}



audio{

width:95%;

}



.list{

order:2;

width:100%;

padding:15px;

}



.radio-item{

font-size:18px;

padding:15px;

}



.radio-item img{

width:55px;
height:55px;

}



}



/* =====================
   TABLET
===================== */

@media(min-width:769px) and (max-width:1200px){


.list{

width:320px;

}


.cover img{

width:200px;
height:200px;

}


}



/* =====================
   SMART TV
===================== */

@media(min-width:1900px){


.header{

font-size:42px;

height:100px;

}


.header select{

font-size:28px;

}


.cover img{

width:350px;
height:350px;

}


.cover h1{

font-size:48px;

}


audio{

width:650px;

}


.list{

width:550px;

padding:30px;

}


.radio-item{

font-size:32px;

padding:25px;

}


.radio-item img{

width:90px;

height:90px;

}


}