@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@1,300&family=Varela&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oswald&family=Varela&display=swap");

* {
	margin: 0;
	padding: 0;
}

body {
	background-color: rgb(40, 44, 53);
}

nav {
	font-family: "Ubuntu", sans-serif;
}
nav ul {
	display: flex;
	align-items: center;
	list-style-type: none;
	height: 65px;
	background-color: black;
	color: #fff;
}
nav ul li {
	padding: 15px;
}
.brand img {
	width: 44px;
	padding: 8px;
}
.brand {
	display: flex;
	align-items: center;
	font-weight: bold;
	font-size: 1.3rem;
}

/*-------Container----*/
.container {
	min-height: 72vh;
	background-color: black;
	color: #fff;
	font-family: "Varela", sans-serif;
	display: flex;
	width: 70%;
	margin: 23px auto;
	border-radius: 12px;
	padding: 34px;
	background-image: url("./images/bg1.jpg");
}

/* ----------bottom-------/ */
.bottom {
	position: sticky;
	height: 130px;
	background-color: black;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.icons {
	margin: 14px 0;
}
.icons i {
	cursor: pointer;
}
#myProgressBar {
	width: 80vw;
	cursor: pointer;
}
.songItem {
	height: 50px;
	display: flex;
	background-color: #fff;

	color: black;
	margin: 12px 0;
	justify-content: space-between;
	align-items: center;
	border-radius: 30px;
}
.songItem img {
	width: 43px;
	margin: 0 23px;
	border-radius: 34px;
}
.timestamp {
	margin: 0 23px;
}
.timestamp i {
	cursor: pointer;
}

.songItemContainer {
	margin-top: 74px;
}
.songInfo {
	font-family: "Varela", sans-serif;
	position: absolute;
	left: 10vw;
}
.songInfo img {
	width: 50px;
	opacity: 0;
	transition: opacity 0.4s ease-in;
}