/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@font-face {
  font-family: 'Lacquer';
  /* Assuming the font file is named Lacquer.ttf or Lacquer-Regular.ttf */
  src: url('fonts/Lacquer.woff2') format('woff2'); 
}

@font-face {
  font-family: 'Xirwena';
  src: url('fonts/Xirwena.woff2') format('woff2'); 
}

@font-face {
  font-family: 'Aclonica';
  src: url('fonts/Aclonica.ttf') format('truetype'); 
}

@font-face {
  font-family: 'Mea Culpa';
  src: url('fonts/Mea Culpa.woff2') format('woff2');
}

@font-face {
  font-family: 'Xirwena';
  src: url('fonts/Xirwena.ttf') format('truetype');
}

@font-face {
  font-family: 'STENCILED PERSONAL USE';
  src: url('fonts/STENCILED PERSONAL USE.otf') format('opentype'); 
}

@font-face {
  font-family: 'CraftyGirls';
  src: url('fonts/CraftyGirls.woff2') format('woff2');
}

@font-face {
  font-family: 'Orbitron';
  src: url('fonts/Orbitron.woff2') format('woff2'); 
}

@font-face {
  font-family: 'Bizancia';
  src: url('fonts/Bizancia.ttf') format('truetype'); 
}

  body {
      font-family: Arial, sans-serif;
      background-color: #ffffff;
      background-image: url('https://vadavadavitrine.neocities.org/SUNSET.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 100vh;
      overflow-x: hidden;
    }  

h1 {
  font-size: 2.5rem;
  margin-top: 20px;
}

#searchBar {
  margin: 20px;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid #c9a8ff;
  width: 60%;
  font-size: 1rem;
}

#gallery {
  display: flex;
  flex-wrap: wrap; /* Lets cards wrap to the next line */
  justify-content: center;
  gap: 20px;
  padding: 20px;
  width: 100%;
}

.card:hover {
  transform: scale(1.05);
}

.card img {
  width: 100%; /* This will now work (100% of 300px) */
  border-radius: 12px 12px 0 0; /* Your original rule, it's good! */
  display: block; /* Fixes potential whitespace issues */
}

.tags {
  padding: 10px;
  color: #7b5ca8; /* Your original rule */
  font-size: 0.9rem; /* Your original rule */
}