body,
    html {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: League Spartan, sans-serif;
      font-weight: 400;
      font-size: 16px;
      scrollbar-width: none;
      /* Firefox */
      -ms-overflow-style: none;
      /* Internet Explorer/Edge */
    }

    #gallery-container {
      display: flex;
      /* justify-content: center; */
      align-items: flex-start;
      max-width: 800px;
    }

    #image-menu {
      display: flex;
      flex-direction: column;
      max-width: 180px;
      column-count: 3;
      column-gap: 0;
      overflow-y: auto;
    }

    #image-menu a {
      margin: 0px;
      padding: 2px 0px 2px 10px;
      display: inline-block;
      width: calc(100% / 1);
      box-sizing: border-box;
      break-inside: avoid-column;
      text-align: left;
      text-decoration: none;
      color: #ff8f08;
      cursor: pointer;
    }

    #image-menu a.active {
      background-color: #eee;
      color: #c00000;
    }

    #image-menu a.inactive {
      color: gray;
      pointer-events: none;
      /* Prevents clicking on inactive links */
    }

    #image-menu a:hover {
      color: #c00000;
    }

    #image-menu::-webkit-scrollbar {
      display: none;
      /* Hides scrollbar for Chrome, Safari, and Opera */

    }

    #image-frame {
      position: relative;
      overflow: hidden;
      width: 100%;
      max-width: 800px;
    }

    #image-frame canvas {
      max-width: 100%;
      height: auto;
    }

    .icon {
      position: relative;
      max-height: 12px;
      padding-left: 10px;
      /* Adjust the size of the icon */
      height: auto;
    }

    @media screen and (max-device-width: 1024px) {
      #gallery-container {
        display: block;
        max-width: 100%;
      }


      #image-frame canvas {
        height: auto;
      }
    }

    @media screen and (max-device-width: 1024px) and (orientation: portrait) {
      
      #menu-categories .player {
        max-width: 140px;;
      }

      #gallery-container {
        display: flex;
        flex-direction: column; 
        max-width: 100%;
      }

      #image-frame {
        order: 1;
        position: sticky;
        top:0;
      }

      #image-menu {
        order: 2;
        max-width: 270px;
      }


      #image-frame canvas {
        height: auto;
      }
    }

    @media only screen and (max-device-width: 1024px) and (orientation: landscape) {
      /* #image-menu {
        display: flex;
        flex-direction: column;
        max-width: 180px;
        column-count: 3;
        column-gap: 0;
        overflow-y: auto;
    } */
    #image-menu {
        display: flex;
        flex-direction: row;
        width: 240px;
        column-count: 3;
        column-gap: 0;
        overflow-y: auto;
        justify-content: flex-start;
      }

      #image-frame {
        display: flex;
        max-width: 65%;
        right: 0;
        top: 0;
        position: fixed;
      }
    }