body {
	text-align: center;
  	font-family: 'Courier New', monospace;
  	margin: 0;
}


#logo {
	padding: 10vh;
	max-height: 30vh;
	overflow: visible;
}
.cls-1 {
	fill: black;
}

.rotate {
	animation: rotate linear 3s infinite;
}
.rotate.online {
	animation: rotate linear 300s infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.left-s {
    transform-origin: 86.2px 138px;
}
.right-s {
	transform-origin: 465px 138px;
	animation-delay: 1.5s;
}


.player {
	max-height: 40vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.text {
	position: fixed;
	width: 100vw;
	bottom: 0;
	padding-bottom: 4vh;
}

marquee {
	  font-size: 4vh;
}

#stream_info_song.off {
	opacity: 0;
}
#pause.on {
	opacity: 0;
}

#stream_info_source, #stream_info_bitrate {
	display: none;
}

button {
        -webkit-tap-highlight-color: transparent;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        background: none repeat scroll 0 0 transparent;
        border: medium none;
        border-spacing: 0;
        color: #26589F;
        font-size: 6vh;
        font-weight: normal;
        line-height: 6vh;
        list-style: none outside none;
        margin: 0;
        padding: 0;
        text-align: left;
        text-decoration: none;
        text-indent: 0;
}
.button.off {
	z-index: 1;
}
.button {
    display: block;
    box-sizing: border-box;
    width: 0;
    height: 6vh;
    border-color: transparent transparent transparent #202020;
    transition: 200ms border-width ease;
    cursor: pointer;

    border-style: solid;
    border-width: 10vh 0 10vh 15.6vh;

  &.paused {
    border-style: double;
    border-width: 0 0 0 60px;
  }

  &:hover {
    border-color: transparent transparent transparent #404040;
  }
}