/* 1. Prevent the whole page from bouncing/scrolling 
   and ensure it fills the window */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; 
}

/* 1. Prevent the whole page from bouncing/scrolling */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; 
}

body {
  background-image: url(/img/vintage_lines_texture.png);
  background-size: 6px;
  background-color: #f5e7c4;
  color: #3a403d;
  font-family: "Garamond", serif;
  text-shadow: -0.06em 0 0.5px rgba(0, 0, 0, 0.15);
  animation: fade-in 3s;
  
  /* Flexbox settings */
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers children horizontally */
}

/* 2. Ensure every section takes up the full width so text-align works */
h1, .abar, .zine-images, .fade {
  width: 100%;
  text-align: center;
  color: #2a7a5e;
  flex-shrink: 0;
}

/* 1. Tighten the Header */
h1 {
  text-align: center;
  color: #2a7a5e;
  margin: 0.5rem 0 0.2rem 0; /* Reduced top margin from 3rem to 0.5rem */
  flex-shrink: 0;
  width: 100%;
  font-size: 2.5rem; /* Adjust if the title feels too large now */
}

.abar {
  text-align: center;
  flex-shrink: 0;
  width: 100%;
  margin-bottom: 0.5rem; /* Reduced spacing below the nav links */
  line-height: 1.2;      /* Brings the lines of links closer together */
}

/* 2. Expand the Scrollable Window */
.zine-images {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  max-width: 90%;
  padding: 10px 0; /* Reduced padding from 40px to 10px */
  
  display: flex;
  flex-direction: column;
  align-items: center;

  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 5%,   /* Moved the fade closer to the edges */
    black 95%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );
}

/* 3. Tighten the Footer */
.fade {
  flex-shrink: 0;
  width: 100%;
  position: relative;
  text-align: center;
  height: 3em;     /* Reduced height from 4em */
  margin-top: 5px; /* Reduced margin */
  margin-bottom: 10px; 
}

a:visited, a:link, a:active {
  color: #8b5a2b; /* Warm brown */
  text-decoration: underline;
  transition: ease-in-out 0.3s;
  text-shadow: 0.06em 0 0.5px rgba(0, 0, 0, 0.15);
}

a:hover {
  color: #2a7a5e; /* Soft green */
}

.fade span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  transition: ease-in-out 0.6s;
}

.fade span:nth-child(2) { opacity: 0; }
.fade span:nth-child(1) { opacity: 1; }
.fade:hover span:nth-child(2) { opacity: 1; }
.fade:hover span:nth-child(1) { opacity: 0; }

@keyframes fade-in {
  from { opacity: 0; filter: blur(0.4px); }
  to { opacity: 1; }
}

@media (max-aspect-ratio: 7/8) {
  .fade {
    padding-bottom: 2em;
  }
}

#quote-box::after {
  content: "|";
  animation: blink 1s infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}