/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { height: 100%; font-family: 'Georgia', serif; color: #eee; }

/* Background slideshow */
.background-slideshow {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  background-size: cover;
  background-position: center;
  transition: background-image 1s ease-in-out;
}

/* Header */
header {
  text-align: center;
  padding: 2rem;
  background: rgba(0,0,0,0.4);
  border-bottom: 2px solid #c0a060;
}
header h1 {
  font-size: 2.5rem;
  letter-spacing: 2px;
  text-shadow: 2px 2px 6px #000;
}

/* Grid of cards - desktop default */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 2rem;
  margin: 3rem auto;
  max-width: 1000px;
}

main.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 2rem;
  margin: 3rem auto; /* pushes down */
  max-width: 1000px; /* keeps grid centered and not too wide */
}
/* Card button */
.card {
  background: rgba(20,20,20,0.8);
  border: 2px solid #c0a060;
  padding: 2rem;
  text-align: center;
  font-size: 1.2rem;
  border-radius: 6px;
  transition: transform 0.3s, background 0.3s;
  cursor: pointer;
  color: #c0a060;
}
.card a {
  text-decoration: none;
  color: #c0a060;
  font-weight: bold;
}
.card:hover {
  background: rgba(192,160,96,0.2);
  transform: scale(1.05);
}

/* Touch/tap effect */
.card:active {
  background: rgba(192,160,96,0.4);
  transform: scale(0.97);
}

/* Responsive breakpoints */
@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(2, 1fr); /* 2 across on tablets */
  }
}

@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr; /* single column on phones */
    max-width: 90%;
  }
  .card {
    font-size: 1rem;
    padding: 1.5rem;
  }
  header h1 {
    font-size: 1.8rem;
  }
}

/* Easter egg */
.easter-egg {
  position: absolute;
  top: 15%;
  left: -150px;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  animation: appear 2s ease-in forwards, drift 40s linear infinite;
}
.easter-egg img {
  width: 120px;
  max-width: 20vw; /* responsive for mobile */
}

.easter-egg:hover img {
  opacity: 1;
}

/* Fade-in (dither effect imitation) */
@keyframes appear {
  0% { opacity: 0; filter: contrast(200%) brightness(0%); }
  30% { opacity: 0.3; filter: contrast(150%) brightness(50%); }
  60% { opacity: 0.7; filter: contrast(120%) brightness(80%); }
  100% { opacity: 1; filter: none; pointer-events: auto; }
}

/* Crawl across screen */
@keyframes drift {
  0% { left: -150px; top: 15%; }
  50% { left: 50%; top: 20%; }
  100% { left: 110%; top: 25%; }
}

/* Footer */
footer {
  text-align: center;
  padding: 1rem;
  background: rgba(0,0,0,0.6);
  border-top: 2px solid #c0a060;
  position: relative;
  bottom: 0;
  width: 100%;
}
footer a {
  color: #c0a060;
  text-decoration: none;
  font-weight: bold;
}
footer a:hover {
  text-decoration: underline;
}

/* Responsive breakpoints */
@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
    max-width: 90%;
  }
  .card {
    font-size: 1rem;
    padding: 1.5rem;
  }
  header h1 {
    font-size: 1.8rem;
  }
}