body {
    margin: 0;
    justify-content: center;  
}

#feature-image {
  display: block;
  width: 500px;       
  margin: 60px auto;
}

.gallery {
  max-width: 600px;
  margin: 40px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  border: 2px solid;     
  padding: 20px;         
  box-sizing: border-box;
}

.gallery img {
    width: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 1 / 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gallery img:hover {
  transform: scale(1.08); 
}

.red-theme .gallery {
  border-color: #c62828;
}

.orange-theme .gallery {
  border-color: #ef6c00;
}

.yellow-theme .gallery {
  border-color: #f9a825;
}

.green-theme .gallery {
  border-color: #2e7d32;
}

.blue-theme .gallery {
  border-color: #1565c0;
}

.purple-theme .gallery {
  border-color: #6a1b9a;
}

.pink-theme .gallery {
  border-color: #ffb6c1;
}

.brown-theme .gallery {
  border-color: #6d4c41;
}

.black-theme .gallery {
  border-color: #000000;
}

.white-theme .gallery {
  border-color: #e0e0e0; 
}

.menu {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 10px;
  padding: 15px;
  box-sizing: border-box;
  justify-items: center;   
}

.menu a {
/* circle */
  width: 40px;            
  height: 40px;           
  border-radius: 50%;     
  overflow: hidden;
  display: block;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.menu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: box-shadow 0.2s ease, transform 0.2s ease;

}
.menu a:nth-child(1):hover { box-shadow: 0 0 12px rgba(198,40,40,0.7); }
.menu a:nth-child(2):hover { box-shadow: 0 0 12px rgba(239,108,0,0.7); }
.menu a:nth-child(3):hover { box-shadow: 0 0 12px rgba(255, 232, 21, 0.962); }
.menu a:nth-child(4):hover { box-shadow: 0 0 12px rgba(46,125,50,0.7); }
.menu a:nth-child(5):hover { box-shadow: 0 0 12px rgba(21,101,192,0.7); }
.menu a:nth-child(6):hover { box-shadow: 0 0 12px rgba(106,27,154,0.7); }
.menu a:nth-child(7):hover { box-shadow: 0 0 12px rgba(255, 52, 184, 0.8); }
.menu a:nth-child(8):hover { box-shadow: 0 0 12px rgba(78, 42, 31, 0.7); }
.menu a:nth-child(9):hover { box-shadow: 0 0 12px rgba(0,0,0,0.8); }
.menu a:nth-child(10):hover { box-shadow: 0 0 12px rgba(173, 173, 173, 0.9); }