@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap');

/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
    box-sizing: border-box;
  }
  /*
    2. Remove default margin
  */
  * {
    margin: 0;
  }
  /*
    Typographic tweaks!
    3. Add accessible line-height
    4. Improve text rendering
  */
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  /*
    5. Improve media defaults
  */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  /*
    6. Remove built-in form typography styles
  */
  input, button, textarea, select {
    font: inherit;
  }
  /*
    7. Avoid text overflows
  */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  /*
    8. Create a root stacking context
  */
  #root, #__next {
    isolation: isolate;
  }
body {
    font-family: "Poppins";
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color:#121212;
}

.home-search {
/* background-color: black; */
max-width: 700px;
margin-left: 10px;

}

i {
    margin-left: 2px;
    margin-right: 14px;
}

.container{
    max-width: 450px;
    
}

.main-container {
  /* display: inline-flex; */
}

.home-search .hm-sr {
    display: flex;
    flex-direction: column;
    background-color: #212121;
    border-radius: 16px;
    color: aliceblue;
    /* margin-bottom: 10px; */
height: 180px;

}

.home-search .container a {
    color: white;
    margin-top: 40px;
    margin-left:20px ;
    text-decoration: none;
    margin-bottom: 12px;
}

.your-lib {
    background-color: #212121;
    border-radius: 15px;
    height: 1250px;
    margin-top: 10px;
}

.your-lib .container {
    display: flex;
    background-color: #212121;
    margin-top: 25px;
    flex-direction: column;
    border-radius: 15px;
}

.your-lib .yr-lb  {
    margin-top: 25px;

}

.your-lib .buttons {
    margin-top: 50px;

}

.buttons a {
    background-color: rgb(17, 17, 17);
    border-radius: 15px;
    padding: 10px;

}


.search-recent .se-re {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;


}
.search-recent .se-re:nth-last-child(1){
    margin-right: 100px;
}

.home-search .playlists {
    background-color: rgb(37, 34, 34);
    color: white;
    margin-top: 40px;
    margin-left: 10px;
    border-radius: 20px;
    height: 90px;

}

.search-recent .playlst {
    color: white;
    margin-top: 60px;
    font-size: x-large;
    font-weight: bold;
    margin-left: 20px;
}

/* . .container i {
    font-size: 60px;
    top: 10px;
    background-color: #a0c4ff;
    border-radius: 5px;
    flex-direction: column;

} */

.home-search .container {
    display: flex;
    flex-direction: column;
}

.home-search .likedsongs {
    background-color: #a0c4ff;
}
.home-search .lked-songs-2 {
    background-color: #a0c4ff;
    /* font-size: px; */
}

.home-search .lked-songs-3 {
 display: flex;
  /* font-size: px; */
}

/* .home-search .likedsongs:nth-of-type(){
    margin-top: 200px;
} */
.playlists .fa-heart {
  font-size: 70px;
}
.playlists .likedsong {
  display: flex;
    background-color: #302f2f;
    height: 90px;
    margin-top: 20px;
    width: 400px;
    margin-left: 1px;
    border-radius: 10px;
    padding: 10px;
}

.playlists .likedsong2 {
  display: flex;
    background-color: #302f2f;
    height: 90px;
    margin-top: 20px;
    width: 400px;
    margin-left: 1px;
    border-radius: 10px;
    padding: 10px;
}

.playlists .likedsong3 {
  display: flex;
    background-color: #302f2f;
    height: 90px;
    margin-top: 20px;
    width: 400px;
    margin-left: 1px;
    border-radius: 10px;
    padding: 10px;
}

/* .playlists .likedsong4 {
    background-color: #302f2f;
    height: 95px;
    margin-top: 20px;
    border-radius: 10px;
    width: 400px;
    margin-left: 1px;
    padding: 10px;
  
} */


.playlists .min-container {
  display: flex;
  justify-content: space-evenly;
  /* gap: 2px; */
  margin-top: 15px;
}

.playlists .main-container .pcv {
  gap: 20px;
  
  margin-left: 15px;
  margin-right: 15px;
}

/* .playlists .mini-container {
  display: flex;
  flex-direction: column;
} */
.playlists .min-container #thmb-1 {
    transform: rotate(50deg);
    /* margin-left: 2px; */
}

.playlists .sub-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    
}


.center-container .mn-container {
  height: 1420px;
  width: 2370px;
  /* background-color: #312b2b; */
  position: absolute;
  left: 470px;
  top: 0;
  border-radius: 20px;
  background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(147,147,238,1) 45%, rgba(0,0,0,1) 97%);
}