/* make responsive "playlist.html" page with the desktop first approach*/
@media screen and (max-width: 1200px) {
  /* ================================
  favourites text will be hidden for this viewport width
  =====================================*/
  .favs {
    display: none !important;
  }
  /*===========================
   reduced size of search bar 
   ==============================*/
  .search-bar {
    width: 30%;
  }
  /*===================
   input search bar size
   =====================*/
  input {
    font-size: 11px !important;
  }
  .song-name-main h1 {
    font-size: 2.4vw;
  }
  .desc {
    font-size: 1.2vw;
  }
}
/* for max width 900px */
@media screen and (max-width: 900px) {
  /*=====================
  jumbotron description size
  ======================*/
  .desc {
    font-size: 1.6vw;
  }
  /*============================
   more button wil be visible 
   ============================== */
  label {
    display: block;
  }
  /*=============================
   hidden section 2 open inside menu  
   ==============================*/
  .section-2 {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    width: 300px;
    height: 68vh;
    background-color: #050043;
    box-shadow: 0px 0px 2px 1px white;
    right: 0px;
    top: 23.5%;
    overflow: scroll;
    padding-left: 10px;
    z-index: 5;
    padding-right: 5px;
    transition: visibility ease-in-out 0.3s;
    transition: opacity ease-in-out 0.3s;
  }
  /*=====================
   menu bar
   =======================*/
  input[type="checkbox"]:checked ~ .section-2 {
    visibility: visible;
    opacity: 1;
  }
  .list {
    overflow: hidden;
    height: auto;
  }
  .list-item {
    background-color: #1a1e33;
  }
  /*=============================
      section 2 scrollbar hide
   ============================*/
  .section-2::-webkit-scrollbar {
    display: none;
  }
  /*==================================
   when the section 2 is hidden, 
   section-1 width becomes 100% to cover the whole page 
   ===================================*/
  .section-1 {
    width: 100%;
  }
  /*================= 
  jumbotron 
  ================*/
  .jumbotron {
    height: 30vw;
  }
  /*=======================
   image in the jumbotron 
   ========================*/
  .jumbotron-image {
    height: 30vw;
    width: 30vw;
  }
  /*=======================
   buttons responsive 
   =======================*/
  .action-part p {
    font-size: 2vw;
  }
  .btns > button {
    height: 4vw;
    width: 11vw;
    font-size: 1.7vw;
  }
}
@media screen and (max-width: 700px) {
  /* followers and author */
  .followers,
  .author {
    font-size: 2vw;
  }
  /*=====================
  jumbotron description 
  =======================*/
  .desc {
    font-size: 1.8vw;
  }
  /*====================================
   extra icons responsive 
   ===================================*/
  .extras > div:nth-child(3) {
    display: none;
  }
  .extras > div:nth-child(4) {
    display: none;
  }
}
@media screen and (max-width: 550px) {
  /* =======================
  website logo and name responsive
  ========================== */
  .website-logo img {
    height: 30px;
    width: 30px;
  }

  .website-name h1 {
    font-size: 3vw;
  }

  .website-name h4 {
    font-size: 2vw;
  }
  /*========================================
   notification bell icon width height responsive
   ========================================*/
  .notification-bell i {
    width: 20px;
    height: 20px;
  }
  /*=====================================
  profile image width height responsive
  ========================================*/
  .profile-picture img {
    width: 30px;
    height: 30px;
  }
  /*==========================================
   notification bell and profile picture margin
   ==========================================*/
  .notification-bell,
  .profile-picture {
    margin-top: 8px;
  }
  .song-name-main h1 {
    font-size: 3vw;
  }
  /*==============================
   followers and author font size
   ===============================*/
  .followers,
  .author {
    font-size: 3vw;
  }
  /*===============================
   jumbotron description 
   =================================*/
  .desc {
    font-size: 3vw;
    padding-left: 4px;
  }
  /*=====================
    jumbotron responsive
    =====================*/
  .action-part {
    padding-top: 0px;
  }
  /*================= 
  jumbotron 
  ==================*/
  .jumbotron {
    height: 60vw;
    text-align: justify;
  }
  /*=========================
   image in the jumbotron 
   =========================*/
  .jumbotron-image {
    height: 60vw;
    width: 60vw;
  }
  /*====================
   buttons responsive
   ====================*/
  .btns > button {
    height: 8vw;
    width: 17vw;
    font-size: 3.2vw;
  }
}