body{

background:#0f172a;
font-family:Arial;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
color:white;

}

.radio-container{

text-align:center;
background:#1e293b;
padding:40px;
border-radius:20px;
width:320px;

}

.logo{

width:350px;
margin-bottom:10px;

}

.slogan{

color:#94a3b8;
margin-bottom:20px;

}

.nowplaying{

margin-bottom:15px;
font-size:14px;

}

#musicaNome{

font-weight:bold;
display:block;
margin-top:5px;

}

#playBtn{

width:80px;
height:80px;
border-radius:50%;
border:none;
font-size:30px;
cursor:pointer;

background:#2eb1e9;
color:white;

}

/* efeito pulsando */

.playing{

animation:pulse 1.5s infinite;

}

@keyframes pulse{

0%{transform:scale(1);}
50%{transform:scale(1.15);}
100%{transform:scale(1);}

}

#status{

margin-top:15px;
font-size:14px;

}

@media (max-width: 400px) {
  .radio-container {
    width: 90%; /* Ajusta o container para caber na tela */
    padding: 20px; /* Dá um pouco mais de respiro */
  }

  .logo {
    width: 100%; /* Logo fica dentro do container */
    max-width: 280px; /* Para não estourar */
  }

  #playBtn {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }

  .nowplaying, #status, #musicaNome {
    font-size: 12px;
  }
}