/* ✅ Slide UP and fade out */
@keyframes slideUp {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px);
        opacity: 0;
    }
}

/* ✅ Slide DOWN and fade in */
@keyframes slideDown {
    0% {
        transform: translateY(-100px);
        opacity: 0;
        visibility: hidden;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
}

/* ✅ Apply animation after reload */
.slide-in {
    animation: slideDown 1.5s ease-in-out forwards;
}
      .parawheelbutton {
        display: none;
      }


      @media (max-width: 640px) {

          .side-panel, .sort-bar, .sort{
              width: calc(100% - 40px);
          }
          .sort-bar{

                display: none;
          }
        .show-button{
            display: block;
        }
        .hide-button{
            display: none;
        }

        .overview-image {
        max-width: 400px; /* Limit max width */
        }

        .homebutton {
          display: none;
        }
        .parawheelbutton {
          display: block;
        }

        .collection-title {
          font-size: 1.2rem;
        }
      }