/* background */

body {
    font-family: "Abel", sans-serif;
    line-height: 1.6;
    color: #033142;
    background: url("/images/painting1.jpg") no-repeat center center fixed;
    background-size: cover;
    padding-bottom: 80px; /* adjust to footer height */
  }

/* =======================================
   General Gallery Container Styles
   ======================================= */
   .comicsgallerycontainer,
   .drawinggallerycontainer,
   .paintinggallerycontainer,
   .petgallerycontainer,
   .communitygallerycontainer {
       max-width: 500px;       /* max width of gallery */
       margin: 40px auto;       /* center container */
       padding: 0 20px;
       background-color: #ffffff;
       border-radius: 12px;
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
   }
   
   /* =======================================
      Masonry Grid Setup
      ======================================= */
   #rig {
       list-style: none;
       margin: 0 auto;
       padding: 20px 0 0 0;
       display: flex;             /* Flexbox for centered layout */
       flex-wrap: wrap;           /* Wrap rows */
       justify-content: center;   /* Center items */
       max-width: 960px;
   }
   
   /* =======================================
      Individual Gallery Items
      ======================================= */
   #rig li {
       width: 300px;              /* fixed width for consistency */
       margin: 10px;              /* spacing between items */
       border-radius: 8px;
       overflow: hidden;
       position: relative;
       transition: transform 0.3s ease, box-shadow 0.3s ease;
       background: #fff;
   }
   
   .rig-cell {
       display: block;
       position: relative;
       text-decoration: none;
       color: inherit;
   }
   
   /* =======================================
      Images inside items
      ======================================= */
   .rig-img {
       width: 100%;
       height: auto;
       display: block;
       transition: transform 0.3s ease;
       border-radius: 8px;
   }
   
   /* Hover scale effect */
   .rig-cell:hover .rig-img {
       transform: scale(1.05);
   }
   
   /* =======================================
      Glassy Overlay for Text
      ======================================= */
   .rig-overlay {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       padding: 10px 0;
       background: rgba(255, 255, 255, 0.6); /* glassy look */
       backdrop-filter: blur(6px);
       border-top: 1px solid rgba(255, 255, 255, 0.3);
       text-align: center;
       opacity: 0;
       transition: opacity 0.3s ease;
   }
   
   .rig-cell:hover .rig-overlay {
       opacity: 1;
   }
   
   /* Text over overlay */
   .rig-text {
       font-family: 'Shadows Into Light', cursive;
       font-size: 1.1rem;
       color: #033142;
       display: block;
       text-align: center;
       pointer-events: none;
   }

   /* Footer */
.footer {
    position: fixed;
    bottom:0;
    width:100%;
    height:2vh;
    font-size:1.5vh;
    color:#fff;
    background:#000;
    text-align:right;
    opacity:0.6;
    padding-right:10px;
  }
   
   /* =======================================
      Hover shadow effect for cards
      ======================================= */
   #rig li:hover {
       box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
   }

   /* Add extra space at the bottom of the gallery */
.comicsgallerycontainer,
.drawinggallerycontainer,
.paintinggallerycontainer,
.petgallerycontainer,
.communitygallerycontainer {
    max-width: 1000px;       /* max width of gallery */
    margin: 40px auto;       /* center container */
    padding: 0 20px 160px 20px; /* add bottom padding */
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

   
   /* =======================================
      Responsive Design
      ======================================= */
   @media (max-width: 1000px) {
       #rig li {
           width: 45%; /* 2 items per row */
       }
   }
   
   @media (max-width: 600px) {
       #rig li {
           width: 100%; /* full width on mobile */
           margin: 10px 0;
       }
   }