:root {
	--header-bg-color: #78a0d5;
	--main-bg-color: #051f43;
	--header-text-color: #253E54;
	--text-color: #d1c4c4;
}

html, body {
	margin: 0;
	padding: 0;
	color: var(--text-color);
}

body {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--main-bg-color);
	overflow: auto;
}

#header {
	background-color: var(--header-bg-color);
	height: 110px;
	width: 100%;
	color: var(--header-text-color);
}

#logo {
	display: inline-block;
	left: 0;
	right: auto;
	max-height: 100px;
	max-width: 150px;
}

#website-title {
	display: inline-block;
    position: absolute;
    bottom: auto;
    font-size: 25px;
    width: calc(100% - 150px);
    text-align: center;
    border-bottom: 1px solid var(--header-text-color);
}

#page-title {
	display: inline-block;
    width: calc(100% - 153px);
	font-size: 20px;
    text-align: center;
}

#nav {
	display: block;
	background-color: var(--header-bg-color);
	height: calc(100% - 110px);
	width: 300px;
	border-top: 1px solid var(--header-text-color);
	border-right: 1px solid var(--header-text-color);
}



.nav-item, .nav-item-folder, .nav-item-song, .nav-item-fsong {
	display: inline-block;
	width: 100%;
	border-bottom: 1px solid var(--header-text-color);
	cursor: pointer;
}

.nav-item.unclickable {
	cursor: default;
}

.nav-item-song:before{
	color: black;
	content: '- ';
}

.nav-item-fsong:before{
	color: black;
	content: '\3164- ';
}

.folded:before{
	color: black;
	content: "\25BE ";
}

.unfolded:before{
	color: black;
	content: '\25B4 ';
}

.big-text {
	font-size: 20px;
}

.center-text { 
	text-align: center;
}

.clickable {
	cursor: pointer;
}

.hidden {
	display: none;
}

.spinningImg:hover{
	-webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }