/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

/* general */
html {
	font-size: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}

html, body, button, input, select, textarea {
	line-height: 1;
	font-family: 'Nunito', sans-serif;
}

body {
	/*background-color: #1c1f72;*/
	background: linear-gradient(to right, #062470 , #030341);
	color: #fff;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 300;
}

html, body {
	width: 100%;
	height: 100%;
}

.stream-name, .splash h2 {
	font-family: 'Russo One', sans-serif;
	font-weight: 400;
}

.stream-artist, .stream-title, .event-artist, .event-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.logo svg, .soc svg, .part span, .part svg {
	display: inline-block;
	vertical-align: middle;
}

.streams h2, .splash h2, .history h2 {
	font-size: 1.125rem;
	padding-bottom: 5px;
}

.main::after, .stream::after, .event::after {
	content: '';
	display: table;
	clear: both;
}

/* top bar */
.header {
	display: grid;
	grid-template-columns: 1fr auto auto;
	grid-gap: 20px;
	align-items: center;
	padding: 20px 30px;
	background: linear-gradient(to right, #ff2366 , #8d4de8);
}

.soc {
	display: block;
}

/* main */
.main {
	padding: 20px 30px;
}

.main > * {
	float: left;
	width: calc(33.33% - 30px);
	margin-right: 30px;
}

.main > .history {
	float: right;
	margin-right: 0;
}

/* streams */
.streams ul {
	list-style-type: none;
	max-height: 462px;
    overflow-y: auto;
    scrollbar-width: thin;
	scrollbar-color: #c13aad #000;
	padding-right: 2px;
}

.streams ul::-webkit-scrollbar {
	width: 14px;
}

.streams ul::-webkit-scrollbar-track {
	background: #c13aad;
}

.streams ul::-webkit-scrollbar-thumb {
	background-color: #000;
	border-radius: 0;
	border: 3px solid #c13aad;
}

.streams li {
	padding: 7px 10px;
}

.streams li.active, .streams li:hover, .stream.live:hover, .stream.live.active {
	background-color: rgba(0,0,0,0.3);
}

.stream {
	position: relative;
}

.stream a {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

.stream.live {
	padding: 10px;
	margin-bottom: 5px;
}

.stream-cover {
	float: left;
	width: 60px;
	position: relative;
}

.stream-cover::after {
	content: '';
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url(../img/vinyl.png) center center no-repeat;
    background-size: cover;
    opacity: 0;
}

.active .stream-cover::after {
	opacity: 1;
}

.active .stream-cover::after, .active .stream-cover img {
	animation: rotate 3s infinite linear;
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

.stream-info {
	float: right;
	width: calc(100% - 90px);
}

.stream-cover img {
	display: block;
	width: 60px;
	height: 60px;
	border-radius: 100%;
}

.stream-artist, .event-artist {
	font-size: 0.875rem;
}

.stream-title, .event-title, .event-time {
	font-size: 0.75rem;
	opacity: 0.5;
}

/* events */
.history ul {
	list-style-type: none;
	padding-top: 10px;
}

.history li {
	padding-bottom: 10px;
}

.event-cover {
	float: left;
	width: 44px;
}

.event-cover img {
	display: block;
	vertical-align: bottom;
	outline: 2px solid rgba(255,255,255,0.3);
}

.event-info {
	float: right;
	width: calc(100% - 64px);
	position: relative;
	border-bottom: 1px solid rgba(255,255,255,0.3);
}

.event-title {
	margin-right: 60px;
}

.event-time {
	position: absolute;
	right: 5px;
	bottom: 0;
}

/* splash */
.splash {
	background-color: #02023e;
	padding: 15px 10px;
	position: relative;
}

.splash::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: linear-gradient(to bottom, #02023e , transparent);
	height: 150px;
	z-index: 1;
}

.type {
	position: absolute;
	right: 0;
	top: 17px;
	background-color: #471b9a;
	color: #fff;
	font-size: 0.875rem;
	padding: 3px 15px;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.part a {
	display: inline-block;
	background-color: #fff;
	text-decoration: none;
	color: #1778f2;
	font-size: 0.813rem;
	border-radius: 3px;
	padding: 3px 10px;
}

.part svg {
	margin-top: -2px;
}

.domeldo {
	position: absolute;
	right: 10px;
	top: 50px;
}

.domeldo img {
	display: block;
}

@media screen and (max-width: 1060px) {
	.main > * {
		float: left;
		width: calc(50% - 15px);
		margin-right: 0;
	}

	.main > .history {
		float: none;
		width: auto;
		padding-top: 30px;
		padding-left: 10px;
		clear: both;
	}

	.main > .current {
		float: right;
	}
}

@media screen and (max-width: 760px) {
	.header, .main {
		padding: 20px;
	}

	.main > .streams, .main > .current {
		width: calc(50% - 10px);
	}
}

@media screen and (max-width: 680px) {
	.main {
		display: grid;
		grid-template-columns: 1fr;
	}

	.main > * {
		min-width: 0;
	}

	.main > .streams, .main > .current {
		float: none;
		width: auto;
	}

	.main > .current {
		order: 1;
	}

	.main > .streams {
		order: 2;
		padding-top: 30px;
	}

	.main > .history {
		order: 3;
	}
}

@media screen and (max-width: 400px) {
	.logo svg {
		height: 25px;
		width: auto;
	}

	.soc svg {
		height: 18px;
		width: auto;
	}
}