body{margin: 0;
padding: 0;
background: #222;
font-family: sans-serif;
height: 100vh;
position: relative;
color: #bbb;}

header{background: #111;
width: 100vw;
height: 8vh;}
header ul{margin: 0;
padding: 1vh 0;
list-style-type: none;
display: flex;
justify-content: center;
gap: 3.5rem;}
header li{width: 2.25rem;
height: 2.25rem;}

#musica{background-image: url(img/icn-musica-off.svg);
background-size: cover;}
#cafe{background-image: url(img/icn-cafe-off.svg);
background-size: cover;}

main{display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: end;
height: 80vh;
max-height: 90vh;
overflow: scroll;}

#offline{font-size: xx-large;
text-align: center;
flex-direction: column;
align-items: center;}
#offline article{width: 30rem;
height: 2.75rem;}

article{background-color: #8c8c8c;
background-size: cover;
width: 10rem;
height: 10rem;
margin: .75rem 0 .75rem 1.45rem;
border:solid .35rem #1b1b1b;
border-radius: 1rem;
cursor: pointer;}

footer{background: #111;
height: 12vh;
width: 100%;
border-top: 1px #000 solid;}
footer #ctrlStop, footer p{float: left;}

#ctrlStop{width: 5rem;
height: 5rem;
margin: .5rem 1rem;
background: url(img/ctrlStop.png) no-repeat no-repeat;
background-size: cover;}

article.reproduciendo{animation: colores 3s infinite;}
@keyframes colores{
    0%  {border-color:magenta;background-color: magenta;}
    12.5% {border-color: yellow;background-color: yellow;}
    37.5% {border-color: lime;background-color: lime;}
    62.5% {border-color: orange;background-color: orange;}
    87.5% {border-color: cyan;background-color: cyan;}
    100%  {border-color: magenta;background-color: magenta;}
}

footer{font-size: x-large;}
#titulo{font-weight: bold;}
#interprete{font-style: italic;}