body {
	display: flex;
	flex-direction: column;
	height: 100vb;
}





#top-status-bar {
	display: flex;
	flex-direction: row;
	height: 60px;
	width: 100%;
	border-bottom: 2px solid lightgrey;
	background: linear-gradient(180deg, #666673 0%, #444454 100%);
}

#logged-in-as {
	align-self: center;
	margin-left: 20px;
}

#page-switching {
	margin-left: auto;
	margin-top: 8px;
	margin-bottom: 8px;
	margin-right: 20px;
	width: 100px;
	border: 3px solid lightgrey;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	background: linear-gradient(180deg, #f61 0%, #f83 47%, #f41 53%, #f61 100%);
}

#login {
	margin-right: 40px;
	margin-top: 8px;
	margin-bottom: 8px;
	width: 100px;
	border: 3px solid lightgrey;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	background: linear-gradient(180deg, #f61 0%, #f83 47%, #f41 53%, #f61 100%);
}

#login:hover {
	background: linear-gradient(180deg, #61f 0%, #41f 47%, #61f 53%, #83f 100%);
}

#page-switching:hover {
	background: linear-gradient(180deg, #61f 0%, #41f 47%, #61f 53%, #83f 100%);
}








#application {
	background: linear-gradient(180deg, #22222d 0%, #333340 100%);
	flex-grow: 1;
}

#main-page {
	width: 800px;
	margin: auto;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

#main-page::-webkit-scrollbar {
	display: none;
}

#search-bar {
	margin-top: 50px;
	margin-left: 30px;
	font-size: medium;
	color: black;
}






.library-split {
	display: flex;
	flex-direction: row;
}

#playlist-list {
	width: 45%;
	margin-left: auto;
	margin-right: 35px;
	overflow-y: scroll;
	padding-top: 40px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

#playlist-list::-webkit-scrollbar {
	display: none;
}

#uploaded-list {
	width: 45%;
	margin-right: auto;
	margin-left: 35px;
	overflow-y: scroll;
	padding-top: 40px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

#uploaded-list::-webkit-scrollbar {
	display: none;
}








#bottom-status-bar {
	margin-top: auto;
	margin-bottom: 0px;
	display: flex;
	flex-direction: row;
	height: 60px;
	width: 100%;
	border-top: 2px solid lightgrey;
	background: linear-gradient(180deg, #666673 0%, #444454 100%);
}

#cover-bottom-bar {
	align-self: center;
	margin-left: 10px;
}

#player {
	align-self: center;
	margin-left: 20px;
}

#info {
	align-self: center;
	margin-left: 20px;
}

#length {
	align-self: center;
	margin-left: auto;
	margin-right: 10px;
}




#song-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 40px;	
}

.song-container {
	display: flex;
	flex-direction: row;
	border: solid 2px lightgrey;
	background: linear-gradient(180deg, #aaa4 0%, #5554 100%);
}

.song-container:hover {
	background: linear-gradient(180deg, #ccc5 0%, #6665 100%);
}

.song-image {
	width: 64px;
	height: 64px;
	object-fit: cover;
	flex-shrink: 0;
}

.song-title {
	margin-left: 20px;
	margin-top: 5px;
}

.song-artist,
.song-album {
	font-size: 12px;
	color: gray;
	margin-left: 20px;
}
.delete-btn {
	margin: auto;
	height: 30px;
	margin-right: 15px;
	border: 2px solid lightgrey;
	background: linear-gradient(180deg, #e66b 0%, #f33b);
	border-top-right-radius: 7px;
	border-bottom-left-radius: 7px;
}

.delete-btn:hover {
		background: linear-gradient(180deg, #e66 0%, #f33);
}