:root {
	--bg: #525050;
}
* {
	box-sizing: border-box;
}
html {
	font-family: sans-serif;
	color: white;
}

body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100vh;
	margin: 0;
	padding: 0;
	background-color: #252526;
}

.container {
	width: 375px;
	margin: 80px auto;
	padding: 0;	
}


.player {
	height: 680px;
	margin: 0;
	border-radius: 10px;
	background: linear-gradient(var(--bg), black);
	padding: 36px 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.cover {
	width: 100%;
	border-radius: 10px;
}

.timeline {
	background-color: #808080;
	height: 5px;
	border-radius: 10px;
}
.progress {
	background-color: white;
	border-radius: 10px;
	width: 0;
	height: 5px;
}

.timing {
	margin-top: 10px;
	display: flex;
	justify-content: space-between;
}

.controls {
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 40px;
}
.next, .prev, .play-container, .timeline {
	cursor: pointer;
}

.pause {
	display: none;
}
.play-container {
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
}

main {
	height: 100vh;
}

footer {
	padding: 0 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.logo {
	height: 40px;
}

a {
	text-decoration: none;
	color: grey;
}

footer span {
	max-width: 500px;
}