@font-face {
  font-family: "hello";
  src: url(americancursive.ttf);
}

@font-face {
  font-family: "hello2";
  src: url(Maternellecolor_trace_cursive3.ttf);
}

.intro {
  position: fixed;
      top: 0;
      left: 0;
      width: auto;
      height: auto;
      display: flex;
  text-align: center;
      justify-content: center;
      align-items: center;
      z-index: 9999; 
}

body{
  font-family: "nimbus-sans", sans-serif;
  font-weight: 400;
  font-style: normal;

  background-image: url('images/paper.gif');
}
           p{
             font-size: 16px;}
.headercontainer{
  width: 95%;
  height: 245px;
  margin: auto;
  text-align: center;

}

header {
  padding-top: 37px;
  padding-bottom: -5px;
  text-align: center;

}

#banner {
    width: 318px;
    height: auto;
  }



.insta-icon {
  position: absolute;
  top: 20px;
  right: 20px;
}

.insta-icon img {
  margin-top: 20%;
  margin-right: 20%;
  width: 74px;  
  height: auto;
}

.cont{
  padding: 5%;
  padding-top: 1%;
  margin: auto;
  
  width: 75%;
  height: auto;
  
  background-color: white;
  background-image: url('images/backgrounds/skywal1.gif');
  
}

h4{
  position: relative;
  left: 0;
  margin-left: calc(-1 * var(--container-padding, 18rem));
  transform: scaleX(4.2) ; 
  transform-origin: left;
  background-color: blue;
  color: yellow;
  padding: 0.5rem 1rem;
  padding-left: 61px;
  width: fit-content;
}


p{
  margin: 3px;
}

.price{
  color: black;
}


.row1 {
   text-align: center;
}


.row1 img{
  width: auto;
  height: 230px;
}

.row2 {
   text-align: center;
}

.row2 img{
  width: auto;
  height: 225px;
}


.row3 {
   text-align: center;
}

.row3 img{
  width: auto;
  height: 225px;
}

.row4 {
   text-align: center;
}

.row4 img{
  width: auto;
  height: 225px;
}

.topnav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 23px; /* spacing between images */
  padding-bottom: 13px;
  text-align: center;
  overflow: hidden;

}

.topnav a {
  display: flex;
  text-align: center;
  padding: -8px 5px;
  text-decoration: none;
  width: 186px;
  height: auto;

}



.nav-icon {
  width: 98%;
  height: 118px;
  background-size: cover;
  background-repeat: no-repeat;
  transition: background-image 0.1s ease-in-out;
}


.store-icon {
  background-image: url("/images/navbar/shop.png");
}

.store-icon:hover {
  background-image: url("images/navbar/shop2.png");
}

a.active .store-icon{
  background-image: url("images/navbar/shop2.png"); 
}

.mag-icon {
  background-image: url("images/navbar/magazine.png");

}
.mag-icon:hover {
  background-image: url("images/navbar/magazine2.png");
}

a.active .mag-icon{
  background-image: url("images/navbar/magazine2.png"); 
}


.artists-icon {
  background-image: url("images/navbar/artists.png");
}
.artists-icon:hover {
  background-image: url("images/navbar/artists2.png");
}
a.active .artists-icon {
  background-image: url("images/navbar/artists2.png"); 
}


.about-icon {
  background-image: url("images/navbar/about.png");
    }
.about-icon:hover {
  background-image: url("images/navbar/about2.png");
}
a.active .about-icon {
  background-image: url("images/navbar/about2.png"); 
}


.corner-img {
  position: absolute;
  bottom: -1666px;  /* negative value to move outside container */
  left: 14px;    /* negative value to move outside container */
  width: 188px;
  height: auto;
  z-index: 10;
  opacity: 92%;
}

.corner-img1 {
  position: absolute;
  bottom: -1567px;  /* negative value to move outside container */
  right: 5px;    /* negative value to move outside container */
  width: 87px;
  height: auto;
  z-index: 10;
  opacity: 95%;
  
}

.footer {
  padding: 20px;
  text-align: center;
}

.blinkie {
  width: 150px;
  height: auto;
}

.bottom8831{
  padding-left: 20px;
  padding-right: 20px;

}

.counter {
  float: right;
  padding-bottom: 30px;
}

html {
  scroll-behavior: smooth;
}

.filter-bar {
  display: flex;
  justify-content: center;
  gap: 87px;
  background-color: #ffdf00;
  background-image: url("images/backgrounds/thumb_MetalGrate.jpg");
  opacity: 113%;
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 99;
  
  
  
}

.filter-bar a {
  text-decoration: none;
  color: #000000;
  background-color: #ffdf00;
  padding-left: 15px;
  padding-right: 15px;
  
  font-size: 18px;
  transition: color 0.2s ease-in-out;
}

.filter-bar a:hover {
  color: red;
}

/* === Responsive listing grid === */
.row1, .row2, .row3, .row4 {
 display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* adjust min to taste */
  gap: clamp(12px, 2vw, 24px);
  align-items: start;
}

/* Each listing card */
.allColumns {
  float: none;              /* turn off legacy float */
  width: auto;              /* let grid control the width */
  display: flex;
  flex-direction: column;
  gap: 6px;                 /* space between title/artist/price */
  color: #ff0000;           /* keep your red text color */
}

/* Make thumbnails scale nicely and stay consistent */
.allColumns img {
  width: 100%;
  height: auto;             /* natural height */
  aspect-ratio: 3 / 4;      /* consistent card feel; tweak if you like */
  object-fit: contain;        /* crop gracefully inside the aspect */
  display: block;
}

/* Let section wrappers size to their content */
.comiccont,
.sculpturecont,
.finecraftcont,
.misccont {
   height: auto !important;   /* override fixed heights everywhere */
  min-height: 0;
  padding-block: clamp(8px, 2vw, 24px);   /* responsive internal padding */
  margin-block: clamp(12px, 4vw, 48px);   /* responsive space between sections */
}


.allColumns img {
  width: 100%;
  height: auto;            /* natural scale for most cases */
  aspect-ratio: 2.5 / 3;     /* consistent card silhouette */
  object-fit: contain;     /* <-- no cropping */
  display: block;
  border: 0;               /* optional: remove default gaps */
  image-rendering: auto;   /* good default for gifs/pngs */
}

@media (min-width: 480px) {
  .row1, .row2, .row3, .row4 {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: clamp(12px, 2.5vw, 22px);
  }
}

.allColumns > img.category {
  display: inline-block;     
  width: 113px;              
  height: auto;     
  padding: 0;                
  aspect-ratio: auto;
  object-fit: contain;
  vertical-align: middle;
}