:root {
	/*Размеры контейнера, тут это размеры фонового изображения*/
	--main-container-width: 550px;
	--main-container-height: 100px;
}

body {
	background: #042953;
	margin: 0;
	color: white;
	overflow: hidden;
}

.mainContainer {
	background-image: url(img/bg.png);
	background-repeat: no-repeat;	
	width: var(--main-container-width);
	height: var(--main-container-height);
}
.mainContainer > * {
	height: 100%;
}
.logoContainer {
	/*Чтобы этот контейнер был квадратным*/
	width: var(--main-container-height);
	float: left;
	margin-left: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.logoContainer > * {
	width: 90%;
}

.playerContainer {	
	float: right;
	width: 256px;
	margin-right: 32px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.volumeContainer {
	width: min-content;
	display: flex;	
	flex-direction: row;
	align-items: center;
	gap: 7px;
}
.volumeIcon {
	height: 24px;
}

.volumeSlider {	
	/* (10*9) + 6, vol0.png*/
	width: 120px;  
	height: 6px;
	background: url('img/vol0.png') repeat-x top left;
}

.volumeSlider:hover {
	cursor: pointer;
	filter: contrast(0.9);	
}
.volumeSliderValue {
	width: 50%;
	height: 100%;
	background: url('img/vol1.png') repeat-x top left;
}
.playButton {
	width: 32px;
	height: 32px;	
	background: linear-gradient(#1B4A80, #062553);
}

.playButton .icon {
	width: inherit;
	height: inherit;
}
.playButton.stopped .icon
{
	background: url("img/playButton.png") no-repeat center; 
}

.playButton.loading .icon
{
	background: url("img/playButton.png") no-repeat right; 
	
	animation-name: rotation;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;	
}
@keyframes rotation {
	100% {transform: rotate(360deg);}
}


.playButton.playing .icon {
	background: url("img/playButton.png") no-repeat left;
}


.playButton .icon:hover {
	cursor: pointer;
	filter: contrast(0.9);
}


.playbutton.loading .icon:hover{
	filter: none;
}