html {
        scroll-behavior: smooth;
      }
      *,
      *::after,
      *::before {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        font-family: sans-serif;
        width:100%;
        height:100%;
        background-color:black;
      }

      /* gallery grid */
      .gallery .row{
        /* display: grid; */
        /* grid-template-columns: repeat(auto-fill, minmax(150px, 33.33%)); */
        width:100%;
        /* gap: 10px;
        padding: 10px; */
        margin:0;
      }

      .gallery .thumb {
        cursor: pointer;
        overflow: hidden;
        /* width:100%; */
        padding:0.25rem;
      }
      
      .gallery .thumb>img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.36s;
        margin-bottom:1rem;
        border: 1px solid #ddd; /* Gray border */
        border-radius: 4px;  /* Rounded border */
        padding: 5px; /* Some padding */
      }
      .gallery .thumb:hover img {
        /* transform: scale(1.05); */
        box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.5);
        cursor:pointer;
      }

      /* overlay */
      #overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.9);
        color: #fff;
        display: none;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        width:100%;
        height:100%;
      }

      #overlay.active {
        display: flex;
      }
    
      #openSidePanelBtn {
        position: absolute;
        top:8px;
        left:4px;
        display:flex;
      }

      /* The side navigation menu */
  #sidePanel {
  z-index: 2;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s;
          width:0;
        height:100%;
        padding:0.5rem;
        position:fixed;
        display:flex;
        flex-direction: column;
        justify-content: space-between;
}


/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#overlay .inner-wrapper {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    #sidePanel{padding-top: 15px;}
}

@media screen and (min-width: 768px) {
    #sidePanel{width:250px;}
    .inner-wrapper{margin-left:250px;}
    #openSidePanelBtn {display:none;}
}

      #sidePanel .sidePanelGroup {
        padding-top:1.5rem;
        padding-bottom:1.5rem;
      }

      /* .sidePanelGroup div.buttons {
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width:100%;
      } */

      .inner-wrapper {
        position: relative;
        width:100%;
        height:100%;
      }

      .inner-wrapper>button {
        z-index: 9;
      }
      .image-wrapper {
        position:absolute;
        width: 100%;
        height:100%;
        display:flex;
        justify-content: center;
        align-content: center;
      }

      .overlay-image {
        max-width: 100%;
        max-height: calc(100vh - 200px);
        /* all sliders target these CSS variables */
        filter: brightness(var(--b, 1)) contrast(var(--c, 1))
          saturate(var(--s, 1)) blur(var(--bl, 0px)) grayscale(var(--g, 0))
          hue-rotate(var(--h, 0deg)) /* ✅ valid */ invert(var(--i, 0))
          sepia(var(--se, 0)) opacity(var(--o, 1));
          width:auto;
          height:auto;
          margin:auto;
          /* display:block; */
          /* margin-top:auto; */
      }

      /* navigation buttons share one flex-box */
      /* .controls {
        top: 20px;
        right: 20px;
        display: flex;
        gap: 10px;
      } */

      .controls-wrapper {
        position:absolute;
        width: 100%;
        height: 100%;
        top:0;left:0;
      }

      #prevBtn,
      #nextBtn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 50px;
        /* height: 150px; */
        filter: invert(50%);
        background-color: transparent;
        border: none;
        outline: none;
        z-index: 100;
        position: absolute;
        top:50%;
        /* transform: translateY(-50%); */
      }
      #prevBtn {
        left: 5%;
      }
      #nextBtn {
        right: 5%;
      }

      #closeBtn {
        position: absolute;
        right:20px;
        top:10px;
        display:flex;
        width:44px;
        height:44px;
        background: none;
        border:none;
      }

      #closeBtn svg {
        color:white;
        filter:invert(100%);
      }

      #nextBtn {
        position: absolute;
      }

      #prevBtn {
        position: absolute;
      }

      .btn {
        background: rgba(255, 255, 255, 0.2);
        border: none;
        border-radius: 4px;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        padding: 8px;
      }

      /* slider panel */
      .settings {
        /* position: absolute; */
        /* left: 10px;
        bottom: 20px; */
        background: rgba(255, 255, 255, 0.1);
        padding: 4px 10px;
        border-radius: 5px;
        display: flex;
        flex-direction: row;
        flex-wrap:wrap;
        gap: 10px;
        max-width:100%;
        align-items: center;
      }
      .settings label {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12px;
      }
      .settings input[type="range"] {
        width: 100px;
      }

      @media screen and (min-width:550px) {
        /* .col.thumb {
          width:50%;
        }  */
      }