/* define page-wide styles here */
body {
  background: #eeeee4;
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* index: Button Canvas: holds absolutely positioned buttons */
.button-canvas {
  position: relative;
  width: 700px;
  height: 550px; /* increased for 6 buttons */
}

/* index: Centered button positioning - scattered around center but not aligned */
.button-canvas .img-btn {
  position: absolute;
}

.canon   { top: 150px;  left: 350px; }  /* top center */
.writing  { top: 80px;  left: 20px; }   /* left side */
.iphone { top: 370px; left: 120px; }  /* right side */
.about   { top: 220px; left: 520px; }  /* adjusted for larger button size */
.home { top: 470px; left: 520px; }  /* right side */
.contact   { top: 420px; left: 430px; }  /* adjusted for larger button size */

/* Responsive: adjust for mobile screens */
@media (max-width: 600px) {
  .button-canvas {
    width: 90vw;
    height: 700px;
    margin: 30px 0;
  }
  .canon   { top: 50px;  left: 20vw; }
  .iphone  { top: 150px; left: 50vw; }
  .writing { top: 250px; left: 10vw; }
  .about   { top: 350px; left: 40vw; }
  .home { top: 450px; left: 25vw; }
  .contact { top: 550px; left: 45vw; }
}

/* General hover effect for other buttons */
.img-btn:not(.home):hover .svg-img {
  filter: url(#glow);
  transform: scale(1.09);
}

.svg-btn {
  display: block;
  overflow: visible; /* prevents clipping of glow effect */
}

.svg-img {
  transition: filter 0.22s, transform 0.18s;
  transform-origin: center center;
}

/* Rotating animation home button */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.home .svg-img {
  animation: rotate 2s linear infinite;
}

.home:hover .svg-img {
  filter: url(#glow);
  transform: scale(1.09) rotate(0deg); /* stops rotation and scales on hover */
  animation: none; /* pauses the rotation */
}

/* style for all subpages*/
.page-header {
  width: 100vw;
  min-height: 70px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 16px 24px;
  gap: 16px;
}
/* Home button subpage: top-left of grid, resizes on mobile */
@media (max-width: 600px) {
  .page-header {
    min-height: 50px;
    padding: 10px 8vw;
    gap: 10px;
  }
  .page-header .img-btn.home {
    width: 38px;
    height: 38px;
    margin-right: 8px;
  }
}

/* for text styling */
.image-credits {
  font-size: 1.7em;
  color: #888;
  text-align: left;
  margin-top: 60px;
  margin-bottom: 8px;
  margin-left: 20px;
  margin-right: 20px;
  padding-left: 24px;
  padding-right: 24px;
  line-height: 1.6;
  box-sizing: border-box;
}

.image-credits a {
  color: #888;
  text-decoration: underline dotted;
  transition: color 0.2s;
}
.image-credits a:hover {
  color: #333;
}
/* Responsive: adjust text styling on smaller screens */
@media (max-width: 600px) {
  .image-credits {
    font-size: 1.7em;  /* or whatever you prefer */
  }
}

/* Subpage canvas for writing */
.writing-canvas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px 32px;
  width: 95vw;
  max-width: 700px;
  margin: 0 auto;
  padding: 20px 0;
  justify-items: center;
}
@media (max-width: 600px) {
  .writing-canvas {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 16px 8px;
    max-width: 98vw;
    padding: 10px 0;
  }
}

/* Subpage canvas for photo gallery */
.gallery {
  display: grid;
  gap: 18px;
  width: 100%;   /* Slightly wider */
  max-width: 1500px; /* Allow more space */
  margin: 0 auto;
  padding: 18px 0 36px 0;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 45vw), 1fr));
}
@media (max-width: 600px) {
  .gallery {
    /* Mobile-first: single column */
    grid-template-columns: 1fr;
  }

}
.gallery-item {
  padding: 20px 16px 40px 16px;
  display: flex; /* centers images in cell, optional */
  justify-content: center;
  align-items: center;
}

.gallery-image {
  max-width: 100%;
  height: auto;
  display: block; 
  border-radius: 0;    /* Remove rounded edges */
  object-fit: cover;
  display: block;
}