@charset "UTF-8";

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

.logoScreen {
	position: absolute;
	z-index: 1200;
	background-color:#242424;
	height: 852px;
	width: 393px;
	padding-top: 320px;
	padding-left: 105px;
}

.main {
	background-color: #141414;
	border: 1px none;
	flex-direction: column;
	align-items: center;
	width: 393px;
	height: 852px;
}

.topnav {
	position: sticky;
	z-index: 1;
	top: 0;
}

.sidePanel {
	position: absolute;
	display: none;
	background-color: black;
	width: 200px;
	height: 100vh;
	
	top: 0;
	left: 0;
	z-index: 100;
}

.hamburger {
	position: absolute;
	top: 27px;
	left: 20px;
}

.logo {
	position: absolute;
	top: 13px;
	left: 50px;
}

.search {
	position: absolute;
	top: 27px;
	left: 285px;
}

.user {
	position: absolute;
	top: 27px;
	left: 330px;
}

.cover {
	position: absolute;
	width: 393px;
	height: 253.31px;
}

.featured-release {
	position: inherit;
}

.ijo {
	background-color: #93D80F;
	opacity: 90%;
	position: absolute;
	width: 155px;
	height: 24px;
	top: 247px;
	left: 18px;
}

.hitam {
	background-color: #202020;
	opacity: 75%;
	position:absolute;
	display: flex;
	width: 357px;
	height: 45px;
	top: 271px;
	left: 18px;
}

.featured-release h1 {
	position: absolute;
	display: flex;
	left: 32px;
	top: 275px;	
	color: #FFFFFF;
	font-family: 'Roboto Flex', sans-serif;
	font-weight: 700;
	font-size: 16px;
}

h2 {
	position: absolute;
	left: 32px;
	top: 250px;
	color: #FFFFFF;
	font-family: 'Roboto Flex', sans-serif;
	font-weight: 700;
	font-size: 13px;
	text-shadow: 1px 1px 2px #141414;
	blur-radius: 1px;
}

h3 {
	position: absolute;
	top: 290px;
	left: 32px;
	color: #cccccc;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 14px;
	font-weight: 300;
}

.play {
	position:absolute;
	display: flex;
	left: 335px;
	top: 280px;
}

.shadow {
	height: 70px;
	width: 393px;
	background-color: #1C1C1C;
	position: absolute;
	top: 346px;
	display: flex;
	box-shadow: 0px 3px 3px #000000;
}

.oren {
	background-color: #FFA800;
	position: absolute;
	display: flex;
	width: 7px;
	height: 16px;
	top: 369px;
	left: 25px;
}

.new-release h1 {
	position: absolute;
	top: 367px;
	left: 42px;
	color: #89C711;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 16px;
	font-weight: 700;
}

.row1 {
	display: flex;
	flex-direction: row;
	padding-left: 20px;
	padding-right: 20px;
	justify-content: space-between;
	margin-bottom: 20px;
	padding-top: 360px;
}

.row2 {
	display: flex;
	flex-direction: row;
	padding-left: 20px;
	padding-right: 20px;
	justify-content: space-between;
	margin-bottom: 20px;
	padding-top: 10px;
}


.judul {
	color: #ffffff;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 11px;
	font-weight: 700;
	margin-top: 5px;
}

.artist {
	font-family: 'Roboto Flex', sans-serif;
	color: #cccccc;
	font-size: 11px;
	font-weight: 300;
}

.footer {
	background-color: #141414;
	position: absolute;
	width: 393px;
	height: 100px;
	top: 780px;
	box-shadow: 0px -6px 6px #000000;
}

.page2 {
	width: 393px;
	height: 852px;
	background-color: #242424;	
	
	/* toggle display flex */
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}