/*MOBILE CSS Design, squishes the boxes and makes everything visible on mobile*/
@media (max-width: 800px) {
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* main container */
  .container-musicals {
    width: 100% !important;
    margin: 70px auto 20px auto !important;
    padding: 10px !important;
  }
  
    
  footer {
      font-size: 12px;
      padding: 10px 0;
      margin-top: 25px;
  }

  #music > div {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  #top {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  #top > div {
    width: 100% !important;
    margin: 0 !important;
  }

  /* album scroller */
  #album-covers {
    width: 100% !important;
    height: 140px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
  }

  .portada {
    width: 110px !important;
    height: 110px !important;
    min-width: 110px !important;
  }

  /* BOTTOM SECTION*/
  #bottom {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  @media (max-width: 800px) {

  /* make ALL album sections full width like cocktail */
  #albumsContainer .content .section {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .coverTitle,
  .favTrack,
  .albumText {
    width: 100% !important;
    margin: 0 !important;
  }
}

  
  @media (max-width: 800px) {

  /* make ALL album content blocks behave like cocktailid */
  #albumsContainer .content {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 auto !important;
  }

  /* hide ALL album content blocks unless active */
  #albumsContainer .content.displayNone {
    display: none !important;
  }
}

@media (max-width: 800px) {
  .portada {
    width: 110px !important;
    height: 110px !important;
    min-width: 110px !important;
    background-size: cover !important;
    background-position: center !important;
  }
}


  #cocktail {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  #cocktail .section {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .coverTitle,
  .favTrack {
    width: 100% !important;
    margin: 0 !important;
  }

  .albumText {
    width: 100% !important;
    margin: 0 !important;
    height: auto !important;
    max-height: calc(100vh - 260px) !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .content {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 800px) {
  /* ...your existing mobile rules... */

  /* hide the whole album-of-the-month + paragraph block on mobile */
  #top > div:first-child {
    display: none !important;
  }
}

  /* hide ALL album content blocks unless active */
  #albumsContainer .content {
    display: none !important;
  }

  /* show ONLY the selected album */
  #albumsContainer .content:not(.displayNone) {
    display: block !important;
  }

  /* special case: cocktail must obey displayNone */
  #cocktail.displayNone {
    display: none !important;
  }
  
  @media (max-width: 800px) {

  /* smaller nav text */
  .top-nav a {
    font-size: 12px !important;
    letter-spacing: 1px !important;
  }

  /* reduce spacing between nav items */
  .top-nav ul {
    gap: 10px !important;
  }

  /* shrink the little GIF icons */
  .top-nav .nav-gif {
    width: 12px !important;
    height: 12px !important;
  }

  /* tighten nav bar padding */
  .top-nav {
    padding: 6px 0 !important;
  }
}