body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background-color: #f5f5f5;
    font-family: sans-serif;
}
main {
    flex: 1 0 auto;
    padding: 20px;
}
.player-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
}
.track-info {
    margin-bottom: 20px;
    text-align: center;
}
.track-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}
.controls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.play-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 0 10px;
}
.play-button i {
    font-size: 36px;
}
.volume-control {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}
.radio-logo {
    text-align: center;
    margin-bottom: 30px;
}
.radio-logo h1 {
    font-weight: 700;
    color: #6a1b9a;
    margin: 0;
}
.radio-logo p {
    margin: 0;
    color: #666;
}
#volume-slider {
    margin: 0;
}
.now-playing {
    padding: 10px;
    border-radius: 5px;
    margin-top: 0;
    text-align: center;
}

.status-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    vertical-align: middle;
    position: relative;
}

/* Connecting Icon - Animated Loading Spinner */
.connecting-icon {
    background-color: transparent;
    border: 2px solid #f3f3f3;
    border-radius: 50%;
    border-top: 2px solid #3498db;
    border-right: 2px solid #3498db;
    animation: spin 1s linear infinite, pulse-color 2s ease-in-out infinite;
    position: relative;
}

.connecting-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    background-color: transparent;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top: 2px solid #4CAF50;
    border-left: 2px solid #4CAF50;
    transform: translate(-50%, -50%) rotate(45deg);
    animation: spin-reverse 1.5s linear infinite;
}


.playing-icon {
    background-color: transparent;
    position: relative;
    overflow: hidden;
}

.playing-icon::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="1" y="7" width="3" height="10" fill="%234CAF50" rx="1"></rect><rect x="6" y="3" width="3" height="18" fill="%234CAF50" rx="1"></rect><rect x="11" y="5" width="3" height="14" fill="%234CAF50" rx="1"></rect><rect x="16" y="2" width="3" height="20" fill="%234CAF50" rx="1"></rect><rect x="21" y="9" width="3" height="6" fill="%234CAF50" rx="1"></rect></svg>');
    animation: equalizer-advanced 1.2s ease-in-out infinite alternate;
}



/* Status Icon Styles */
.status-icon {
display: inline-block;
width: 24px;
height: 24px;
margin-right: 10px;
vertical-align: middle;
position: relative;
}

/* Connecting Icon - Animated Loading Spinner */
.connecting-icon {
background-color: transparent;
border: 2px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #6a1b9a;
border-right: 2px solid #6a1b9a;
animation: spin 1s linear infinite, pulse-color 2s ease-in-out infinite;
position: relative;
}

.connecting-icon::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
background-color: transparent;
border-radius: 50%;
border: 2px solid transparent;
border-top: 2px solid #ffd700;
border-left: 2px solid #ffd700;
transform: translate(-50%, -50%) rotate(45deg);
animation: spin-reverse 1.5s linear infinite;
}

/* Playing Icon - Dynamic Equalizer Bars */
.playing-icon {
background-color: transparent;
position: relative;
overflow: hidden;
}

.playing-icon::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="1" y="7" width="3" height="10" fill="%236a1b9a" rx="1"></rect><rect x="6" y="3" width="3" height="18" fill="%236a1b9a" rx="1"></rect><rect x="11" y="5" width="3" height="14" fill="%236a1b9a" rx="1"></rect><rect x="16" y="2" width="3" height="20" fill="%236a1b9a" rx="1"></rect><rect x="21" y="9" width="3" height="6" fill="%236a1b9a" rx="1"></rect></svg>');
animation: equalizer-advanced 1.2s ease-in-out infinite alternate;
}

.paused-icon {
background-color: transparent;
position: relative;
overflow: hidden;
}

.paused-icon::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="1" y="7" width="3" height="10" fill="%236a1b9a" rx="1"></rect><rect x="6" y="3" width="3" height="18" fill="%236a1b9a" rx="1"></rect><rect x="11" y="5" width="3" height="14" fill="%236a1b9a" rx="1"></rect><rect x="16" y="2" width="3" height="20" fill="%236a1b9a" rx="1"></rect><rect x="21" y="9" width="3" height="6" fill="%236a1b9a" rx="1"></rect></svg>');
/* No animation for paused state */
}

span.status-icon.playing-icon, span.status-icon.paused-icon {
width: 48px;
}

/* Animations */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

@keyframes spin-reverse {
0% { transform: translate(-50%, -50%) rotate(45deg); }
100% { transform: translate(-50%, -50%) rotate(405deg); }
}

@keyframes pulse-color {
0% { border-top-color: #6a1b9a; border-right-color: #6a1b9a; }
33% { border-top-color: #9c27b0; border-right-color: #9c27b0; }
66% { border-top-color: #ffd700; border-right-color: #ffd700; }
100% { border-top-color: #6a1b9a; border-right-color: #6a1b9a; }
}

@keyframes equalizer-advanced {
0% {
transform: scaleY(1);
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="1" y="12" width="3" height="5" fill="%236a1b9a" rx="1"></rect><rect x="6" y="8" width="3" height="9" fill="%236a1b9a" rx="1"></rect><rect x="11" y="5" width="3" height="12" fill="%236a1b9a" rx="1"></rect><rect x="16" y="10" width="3" height="7" fill="%236a1b9a" rx="1"></rect><rect x="21" y="13" width="3" height="4" fill="%236a1b9a" rx="1"></rect></svg>');
}
20% {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="1" y="9" width="3" height="8" fill="%236a1b9a" rx="1"></rect><rect x="6" y="4" width="3" height="13" fill="%236a1b9a" rx="1"></rect><rect x="11" y="7" width="3" height="10" fill="%236a1b9a" rx="1"></rect><rect x="16" y="5" width="3" height="12" fill="%236a1b9a" rx="1"></rect><rect x="21" y="10" width="3" height="7" fill="%236a1b9a" rx="1"></rect></svg>');
}
40% {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="1" y="4" width="3" height="13" fill="%236a1b9a" rx="1"></rect><rect x="6" y="8" width="3" height="9" fill="%236a1b9a" rx="1"></rect><rect x="11" y="2" width="3" height="15" fill="%236a1b9a" rx="1"></rect><rect x="16" y="3" width="3" height="14" fill="%236a1b9a" rx="1"></rect><rect x="21" y="8" width="3" height="9" fill="%236a1b9a" rx="1"></rect></svg>');
}
60% {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="1" y="7" width="3" height="10" fill="%236a1b9a" rx="1"></rect><rect x="6" y="4" width="3" height="13" fill="%236a1b9a" rx="1"></rect><rect x="11" y="9" width="3" height="8" fill="%236a1b9a" rx="1"></rect><rect x="16" y="8" width="3" height="9" fill="%236a1b9a" rx="1"></rect><rect x="21" y="5" width="3" height="12" fill="%236a1b9a" rx="1"></rect></svg>');
}
80% {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="1" y="11" width="3" height="6" fill="%236a1b9a" rx="1"></rect><rect x="6" y="7" width="3" height="10" fill="%236a1b9a" rx="1"></rect><rect x="11" y="4" width="3" height="13" fill="%236a1b9a" rx="1"></rect><rect x="16" y="2" width="3" height="15" fill="%236a1b9a" rx="1"></rect><rect x="21" y="9" width="3" height="8" fill="%236a1b9a" rx="1"></rect></svg>');
}
100% {
transform: scaleY(1);
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="1" y="10" width="3" height="7" fill="%236a1b9a" rx="1"></rect><rect x="6" y="5" width="3" height="12" fill="%236a1b9a" rx="1"></rect><rect x="11" y="8" width="3" height="9" fill="%236a1b9a" rx="1"></rect><rect x="16" y="3" width="3" height="14" fill="%236a1b9a" rx="1"></rect><rect x="21" y="7" width="3" height="10" fill="%236a1b9a" rx="1"></rect></svg>');
}
}

.player-status {
    display: flex;
    align-items: center;
    margin: 10px 0;
    font-weight: 500;
    justify-content: center;
    background: #ffffff;
    border-radius: 0;
}

.now-playing {
    font-size: 14px;
    font-weight: 400;
}


canvas#smileyCanvas {
    position: absolute;
    z-index: 0;
    left: auto;
    right: auto;
    max-width: 100%;
    overflow: hidden;
    top: 0;
    max-height: 500px;
    margin: 0;
}

.player-container.white.z-depth-2, footer.page-footer.purple.darken-3, header {
    z-index: 1111;
    position: relative;
}

main {
    background: #EFDC28;
    background: radial-gradient(at center, #FCFC74, #EFDC28);
}

@media only screen and (min-width:900px) {

    .container.fw{
        width: 100% !important;
    }

}