/* ====================================
start responsive media queries for index.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 {
    font-size: 11px !important;
  }
}

@media screen and (max-width: 900px) {
  /* Menu button will be visible */
  label[for="more"] {
    display: block;
  }
  /* hidden section 2 and open inside menu */
  .section-2 {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    width: 300px;
    height: 66vh;
    background-color: #050043;
    box-shadow: 0px 0px 2px 1px white;
    right: 0px;
    top: 23.5%;
    z-index: 5;
    overflow: scroll;
    padding-left: 10px;
    transition: visibility ease-in-out 0.2s;
    transition: opacity ease-in-out 0.2s;
  }
  .playlist-content {
    overflow: visible;
  }
  /*==============================
   queue options box 
   ============================*/
  .queue-options {
    position: absolute;
    height: auto;
    width: auto;
    top: 7%;
    right: 0%;
  }
  /*====more button visible section2 */
  input[id="more"]:checked ~ .section-2 {
    visibility: visible;
    opacity: 1;
  }
  /* hide section 2 scrollbar */
  .section-2::-webkit-scrollbar {
    display: none;
  }
  /* section-1 width 100% to cover the whole page 
     section-2 hide in menu */
  .section-1 {
    width: 100%;
  }
  .list-item {
    min-width: 250px;
  }
  /* carousel size  */
  .outer-carousel {
    height: 9%;
  }
  /* carousel image size change */
  .carousel img {
    height: 23vw;
    width: 34.5vw;
  }
  /* first and 3rd images of the carousel */
  .carousel img:nth-child(1) {
    left: 56vw;
  }
  .carousel img:nth-child(3) {
    right: 56vw;
  }
  /* =====hover carousel size =====*/
  .carousel img:hover {
    height: 27vw;
    width: 40.5vw;
  }
  /*======= music themes section ======*/
  .music-themes {
    justify-content: space-around;
  }
  .theme-main {
    width: 50%;
  }
  /* Theme content */
  /* increased theme content size */
  .theme-content {
    width: 12vw;
    height: 12vw;
  }
  .theme-content p {
    font-size: 3vw;
    top: -12.5vw;
  }
  /* increased music themes image size */
  .music-themes div img {
    width: 12vw;
    height: 12vw;
  }
}
@media screen and (max-width: 700px) {
  /* footer section responsive*/
  .extras > div:nth-child(3) {
    display: none;
  }
  .extras > div:nth-child(4) {
    display: none;
  }
  .outer-div {
    width: 36vw;
    height: 24vw;
    min-width: 123px;
    min-height: 82px;
  }
  .outer-div .inner-div span {
    font-size: 4vw;
  }
}
@media screen and (max-width: 550px) {
  /* website logo media query */

  .website-logo img {
    height: 30px;
    width: 30px;
  }
  /* website name */
  .website-name h1 {
    font-size: 3vw;
  }
  /* website name */
  .website-name h4 {
    font-size: 2vw;
  }
  /* notification bell */
  .notification-bell i {
    width: 20px;
    height: 20px;
  }
  /* profile picture */
  .profile-picture img {
    width: 30px;
    height: 30px;
  }
  /*  bell and profile picture */
  .notification-bell,
  .profile-picture {
    margin-top: 8px;
  }

  /* bottom song play image */
  #song-image {
    display: inline;
  }

  .theme-main {
    width: 100%;
  }
  /* theme content */
  .theme-content {
    width: 18vw;
    height: 18vw;
  }
  .theme-content p {
    font-size: 4.5vw;
    top: -18.8vw;
  }
  .music-themes div img {
    width: 18vw;
    height: 18vw;
  }

  /* stations */
  /* music theme box change size */
  #div1 {
    width: 30vw;
    height: 20vw;
  }
  #div2 {
    width: 28vw;
    height: 24vw;
  }
  #div3 {
    width: 26vw;
    height: 26vw;
  }
  #div3 img {
    width: 12vw;
    height: 12vw;
  }
  /* text part in that section which contains "stations" text */
  #div3 p {
    font-size: 5vw;
  }
  .outer-div .inner-div span {
    font-size: 6vw;
  }
}