:where([class^="ri-"])::before { content: "\f3c2"; }
      html {
      scroll-behavior: smooth;
      }
      html {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
      }
      html::-webkit-scrollbar {
        display: none;
      }
      .side-menu.active {
      width: 250px;
      }
      .side-menu.active .menu-content {
      opacity: 1;
      }
      .hamburger-menu.active i {
      transform: rotate(90deg);
      }
      body {
      font-family: 'Montserrat', sans-serif;
      background-color: #333333;
      }
      .photo-item {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.8s ease, transform 0.8s ease;
      }
      .photo-item.visible {
      opacity: 1;
      transform: translateY(0);
      }
      .sidebar-logo {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      transform: rotate(180deg);
      }
      .fullscreen-view {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.9);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      }
      .fullscreen-view.active {
      opacity: 1;
      pointer-events: auto;
      }
      .fullscreen-image {
      max-width: 90%;
      max-height: 90%;
      object-fit: contain;
      }
      @media (max-width: 768px) {
      .sidebar {
      width: 40px;
      }
      .main-content {
      width: calc(100% - 40px);
      margin-left: 40px;
      }
      }
      .masonry-grid {
        columns: 1;
        column-gap: 1rem;
      }

      .masonry-item {
        break-inside: avoid;
        margin-bottom: 1rem;
        display: inline-block;
        width: 100%;
      }

      @media (min-width: 768px) {
        .masonry-grid {
          columns: 3;
        }
      }