.header img { width: 50%; }

p {
  margin: 0;
  color: lime;
}

h1,h2,h3,h4,h5 {
  margin: 0;
  color: lime;
}

body { background-color: black; color: lime; font-family: "Courier New", monospace; background-image: url('backgrounds/bg1.jpg'); }

a { color: red; font-size:20px;}



a:hover { color: yellow; } 

table { width: 100%; border: 3px ridge lime; background-color: black; }

td {
  vertical-align: top;
  border: 1px solid lime;
  padding: 0;
}

.header { text-align: center; background: black; color: black; position: relative; }

.nav {width: 20%;} 

.content { width: 80%; }

.post { margin-bottom: 20px; border-bottom: 1px dashed lime; } 

marquee { color: yellow; font-weight: bold; font-size:20px; } 


ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  margin: 0;
  padding: 0;
}

.nav a {
  display: block;   /* makes links stack nicely */
  padding: 5px 0;   /* optional spacing */
}


/* Grid layout */ .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 100%; margin: auto; } 

/* Square thumbnails */ .thumbnail { width: 100%; border: 1px solid blue; /* Gray border */ aspect-ratio: 1 / 1; /* forces square */ object-fit: cover; /* crops image nicely */ cursor: pointer; transition: 0.3s; }

.thumbnail:hover { opacity: 0.8; }

/* Overlay */ .overlay { display: none; position: fixed; z-index: 999; padding-top: 60px; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); } 

.overlay img { margin: auto; display: block; max-width: 100%; max-height: 100%; }

.close { position: absolute; top: 20px; right: 40px; color: white; font-size: 40px; cursor: pointer; }