:root {
  --background-images: url(assests/music-bg.jpg);
  --jumbotron-color: #501f46;
  --playlist-items-background-color: hsl(313, 37%, 32%);
  --playlist-items-background-color-on-hover: hsl(313, 29%, 37%);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0px;
  display: inline-block;
}
/* this is for Akash font*/
#font1 {
  font-size: 20px;
  font-style: italic;
  color: gold;
  border: 2px solid dashed;
  transition: font-size 1s ease-in-out;
}
#font1:hover {
  font-size: 25px;
}
/*favourites animation*/
@keyframes pop2 {
  from {
    transform: rotate(2deg);
    color: white;
  }
  to {
    transform: rotate(-2deg);
    color: #b3d85ad4;
  }
}
.favo {
  margin: 40px;
  color: whitesmoke;
  font-style: italic;
  animation-name: pop2;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

body {
  height: 100vh;
  min-width: 100%;
  background-image: var(--background-images);
  margin: 0px;
  font-family: "Segoe UI", Arial, sans-serif;
  color: white;
  background-size: cover;
  overflow-x: hidden;
}
/* icon animation*/
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.website_logo img {
  padding: 1px;
  height: 50px;
  width: 50px;
  border-radius: 100%;
  animation-name: rotating;
  animation-timing-function: ease-in-out;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

.navigation-bar {
  height: auto;
  width: auto;
  background-image: linear-gradient(180deg, black, rgba(0, 0, 0, 0));
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding-left: 2%;
  padding-right: 2%;
  transition: all ease-in-out 1s; /* when the navbar loads, every property transits for 1s */
}
.navigation-bar > div {
  display: inline-block;
}
.website-name h6 {
  color: rgb(237, 246, 248);
}
.title-combo > div {
  vertical-align: middle;
  display: inline-block;
}
.website-name {
  display: inline-block;
}
/* this is a search bar section where animation and customisation of search bar is done */
.searchBar div {
  display: inline-block;
}
.searchBar input {
  padding: 5px;
  text-align: center;
  text-size-adjust: 10px;
  border-radius: 15px;
  font-weight: bold;
}
.searchBar {
  position: relative;
  margin-left: 150px;
}
.searchBar > div:nth-child(1) {
  display: inline-block;
  position: absolute;
  width: min-content;
  left: 5%;
  top: 10%;
}
.search-ico {
  color: black;
  position: absolute;
  margin-top: 4px;
}
.searchBar > div:nth-child(3) {
  display: inline-block;
  position: absolute;
  width: min-content;
  right: 5%;
  top: 10%;
  color: black;
}
.mic-ico {
  margin-top: 3px;
}
input:focus {
  outline: rgb(231, 224, 224);
  outline-style: solid;
}
/* end of search bar Area */
/* this is animation for bell icon */
@keyframes shake {
  from {
    transform: rotate(3deg);
  }
  to {
    transform: rotate(-3deg);
  }
}

.Notification-bell img {
  height: 30px;
  width: 30px;
  margin-top: 3px;
  margin-left: 300px;
  animation-name: shake;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
/* this is customisation for notification word */
#Noti {
  color: goldenrod;
  font-family: sans-serif;
  font-weight: bolder;
  font-style: italic;
}
/* this profic pic customisation */
.profile-pic img {
  height: 40px;
  width: 40px;
  border-radius: 60px;
  margin-left: 120px;
}

/* main */
main {
  width: 100%;
  padding: 0% 3%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  transition: all ease-in-out 1s;
}
/* there are two aside sections both of them will have this class 
(I have taken care of the re-usability of the classes and removed redundancy) */
.aside {
  display: inline-block;
  overflow: hidden;
}
/* section one of the main part */
.section-1 {
  width: 70%;
  height: 85vh;
  overflow: scroll;
}
/* overflow should be scrollable but the scroll bar should be hidden*/
.section-1::-webkit-scrollbar {
  display: none;
}
/* section 2 of the main part */
.section-2 {
  width: 28%;
  height: 85vh;
  z-index: 2;
}

/* aside section 1 */
/* jumbotron */
.jumbotron {
  height: 20vw;
  width: 100%;
  margin-top: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: var(--jumbotron-color);
  margin-bottom: 40px;
  position: relative;
  border-radius: 20px;
}
/* image insider jumbotron */
.jumbotron-image {
  height: 18vw;
  width: 18vw;
  background-image: linear-gradient(to bottom, transparent, rgba(20, 27, 65, 1)),
    url("assests/PL-11.jpg");
  background-size: cover;
  border-radius: 20px;
  margin-left: 20px;
}
/* right part of the jumbotron */
.jumbotron-detail {
  width: 67%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding-right: 12px;
}
/* descriptive part contains the descripton of the song and action part contains the follow and play buttons */
.descriptive-part,
.action-part {
  width: 100%;
  height: max-content;
}
/* song name and followers */
.song-name-main,
.followers {
  display: inline-block;
  margin-top: 10px;
  font-style: oblique;
}
.followers {
  margin-right: 10px;
  font-size: 15px !important;
  font-weight: bolder;
}
/* song name heading properties */
.song-name-main h1 {
  font-size: 2vw;
}
/* follower count */
.followers {
  position: absolute;
  right: 0%;
  top: 5%;
}
/* self explanatory */
.followers,
.author {
  font-size: 1.5vw;
}
/* description of the jumbotron */
.desc {
  font-size: 1vw;
  font-style: oblique;
  font-weight: bolder;
  color: whitesmoke;
}
/* action part */
/* .action-part {
	padding-top: 2vw;
} */
.action-part p {
  font-size: 1vw;
}
.btns > button {
  border: 0px;
  height: 3vw;
  width: 10vw;
  color: white;
  font-size: 1.2vw;
}
/* play button */
.btns > button:nth-child(1) {
  background-image: linear-gradient(-19deg, red 0%, blue 100%);
  border-radius: 40px;
}
/* follow button */
.btns > button:nth-child(2) {
  background-image: linear-gradient(-19deg, red 0%, blue 100%);
  border-radius: 40px;
  margin-left: 185px;
}
/* particular item in the playlist */
.playlist-item {
  height: 8vh;
  box-sizing: border-box;
  background-color: var(--playlist-items-background-color);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  border-radius: 10px;
}
/* playlist item hovering effects */
.playlist-item:hover {
  background-color: var(--playlist-items-background-color-on-hover);
}
/* left part if the playlist item */
.left {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 30%;
  height: 100%;
  padding: 0% 1%;
}
/* center part of the playlist item which contains the duration length of the song */
.center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: min-content;
  height: 100%;
}
/* right part of the playlist item, which contains icons */
.right {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 100%;
  padding-right: 2%;
} /* now adjusting the contents of left, center and right parts */
.left > div:nth-child(2) {
  height: 80%;
  min-width: 50px;
  max-width: 50px;
  margin: 0px 12% 0px 12%;
  position: relative;
}
.left > div:nth-child(2) img {
  width: 100%;
  height: 100%;
}
.left > div:nth-child(3) p {
  color: rgb(185, 185, 185);
}
/* customizing the play button */
.play-btn {
  background-color: black;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  opacity: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: all ease-in-out 0.1s;
}
/* on hover effects */
.play-btn:hover {
  opacity: 0.7;
}
/* adjusting fonts in the playlist items  */
.left div p {
  font-size: 14px;
}
.center {
  font-size: 12px;
  color: rgb(185, 185, 185);
}
.right {
  color: rgb(185, 185, 185);
}
.right div:nth-child(2) {
  margin-left: 27%;
}
/* second section of the page starts here */
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* "more" button properties */
label {
  display: none;
  position: absolute;
  right: 0%;
  top: 20%;
  padding-bottom: 5px;
  z-index: 3;
  box-shadow: 0px 0px 2px 1px white;
  width: 70px;
  font-size: 20px;
  height: 21px;
  text-align: center;
  background-image: linear-gradient(red, blue);
}
/* on a normal display, it will be hidden */
label ~ input {
  display: none;
}
/* ASIDE SECTION -2 */
/* this is the first section heading of the aside section 2 */
.section-heading {
  margin-top: 10px;
  position: relative;
  margin-bottom: 12px;
}
/* adjusting for side by side display */
.section-heading div,
.section-heading h1 {
  display: inline-block;
}
.section-heading h1 {
  font-size: 23px;
}
.section-heading div {
  position: absolute;
  bottom: 0%;
  right: 0px;
  font-size: 14px;
}

.list {
  height: 36vh;
  overflow: scroll;
}
/* hiding the scrollbar */
.list::-webkit-scrollbar {
  display: none;
}
/* this is particular item in the "list  container*/
.list-item {
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-bottom: 12px;
  border-radius: 10px;
}
/* hovering effect for the list item */
.list-item:hover {
  background-color: var(--playlist-items-background-color-on-hover);
}
/* adjusting the name and image of the songs relative to their original position */
.list-item > div:nth-child(1) {
  width: 100px;
  height: 100%;
  position: relative;
}
.list-item > div:nth-child(1) > img {
  width: 100%;
  height: 100%;
}
.author-name {
  font-size: 12px;
  color: rgb(185, 185, 185);
}
.extra {
  text-align: right;
  height: 100%;
}
.left img {
  border-radius: 10px;
}
.playlist-item div {
  font-style: oblique;
  font-weight: bold;
  color: goldenrod;
}
.left div p {
  font-style: oblique;
  font-weight: bold;
  color: goldenrod !important;
  margin: 0px !important;
}
.list-item img {
  border-radius: 20px;
}
@keyframes moved {
  from {
    transform: scale(1.2);
    color: whitesmoke;
  }
  to {
    transform: scale(1);
    color: goldenrod;
  }
}
/* extras */
#flash {
  font-style: oblique;
  font-weight: bolder;
  color: whitesmoke;
  font-size: 20px;
  margin-left: 20px;
  animation: moved 1s ease-in-out infinite alternate;
}