/*!
CSS stylesheet for the Interim Computer Museum: <https://icm.museum/>

Copyright 2024 SDF Public Access UNIX System

Copying and distribution of this file, with or without modification, 
are permitted in any medium without royalty, provided the copyright 
notice and this notice are preserved. This file is offered as-is, 
without any warranty.
 */
        body {
            background-color: black;
            /* color: green; */
	    color: #39FF14;
            font-family: 'Courier New', Courier, monospace;
            text-align: center;
            margin: 0;
            padding: 0;
        }
        .hero {
            margin: 50px 0;
        }
        .logo {
            width: 300px;
            height: auto;
        }
        .slogan {
            font-size: 1.5em;
            margin-top: 10px;
        }
        nav {
            margin: 0px 0px 0;
        }
        nav a {
            color: orange;
            text-decoration: none;
            margin: 0 15px;
        }
        nav a:hover {
            text-decoration: underline;
        }
        .content {
            max-width: 800px;
            margin: 0 auto;
            text-align: left;
            padding: 20px;
        }
        .section {
            margin: 40px 0;
        }
        h2 {
            color: cyan;
        }
        .footer {
            background-color: #111;
            color: green;
            padding: 10px;
        }
        .footer a {
            color: orange;
            text-decoration: none;
        }
        .footer a:hover {
            text-decoration: underline;
        }
        .cta-buttons {
            margin: 20px 0;
        }
        .cta-buttons a, button {
            display: inline-block;
            padding: 10px 20px;
            color: black;
            background-color: cyan;
            text-decoration: none;
            margin: 5px;
            border-radius: 5px;
        }
        .cta-buttons a, button:hover {
            background-color: darkcyan;
        }
        .news-entry {
            border-bottom: 1px solid gray;
            margin-bottom: 20px;
            padding-bottom: 10px;
        }
        .news-entry h2 {
            color: cyan;
            font-size: 1.2em;
        }
        .news-entry p {
            margin: 5px 0;
        }
        .news-entry .date {
            color: lightgray;
            font-size: 0.9em;
        }
        .event-entry {
            border-bottom: 1px solid gray;
            margin-bottom: 20px;
            padding-bottom: 10px;
        }
        .event-entry h2 {
            color: cyan;
            font-size: 1.2em;
        }
        .event-entry p {
            margin: 5px 0;
        }
        .event-entry .date {
            color: lightgray;
            font-size: 0.9em;
        }
        .collection-item {
            margin-bottom: 20px;
        }
        .collection-item h2 {
            color: cyan;
            font-size: 1.2em;
        }
        .collection-item p {
            margin: 5px 0;
        }
        .collection-item a {
            color: cyan;
            text-decoration: none;
        }
        .collection-item a:hover {
            text-decoration: underline;
        }
        .curation {
            color: lightgray;
            font-style: italic;
        }
        .sponsorship-level {
            margin-bottom: 20px;
        }
        .sponsorship-level h2 {
            color: cyan;
            font-size: 1.2em;
        }
        .sponsorship-level ul {
            list-style-type: none;
            padding: 0;
        }
        .sponsorship-level ul li::before {
            content: "• ";
            color: cyan;
        }
        .banner {
            margin: 20px 0;
            border: 1px solid gray;
            padding: 10px;
        }
        .banner img {
            max-width: 100%;
            height: auto;
        }
        a {
            color: orange;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }
      .membership-details {
            margin: 20px 0;
        }
        .membership-details ul {
            list-style-type: none;
            padding: 0;
        }
        .membership-details li::before {
            content: "• ";
            color: cyan;
        }

/* Lightbox container hidden by default */
.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.95);
  text-align: center;
  padding-top: 60px;
}

/* Show when this element is targeted by a URL hash */
.lightbox:target {
  display: block;
}

/* Full-size image styling */
.lightbox img {
  max-width: 90%;
  max-height: 80vh;
  border: 2px solid cyan;
}

/* Close button */
.lightbox-close {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 40px;
  color: orange;
  text-decoration: none;
}

/* Prevent scrolling when lightbox is active (Safari >= 15.4) */
body:has(#lightbox:target) {
  overflow: hidden;
}

.thumbnail {
  margin-top: -30px;
  width: 250px;
  cursor: pointer;
  border: 1px solid gray;
  border-radius: 12px; /* Rounded corners */
}

/* ===== MOBILE STYLES ===== */
@media (max-width: 767px) {
  body {
    font-size: 14px;
    padding: 10px;
  }

  .logo {
    width: 80%; /* Scale logo responsively */
    max-width: 200px;
  }

  .slogan {
    font-size: 1.2em;
    margin-top: 5px;
  }

  nav a {
    display: block;
    margin: 8px 0; /* Stack nav links vertically */
    font-size: 1.1em;
  }

  .content {
    padding: 10px;
    text-align: left;
  }

  .cta-buttons a, button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 1em;
  }

  .thumbnail {
    width: 100%;
    max-width: 100%;
    margin: 10px 0;
  }

  .lightbox img {
    max-width: 95%;
    max-height: 70vh;
  }

  .footer {
    font-size: 0.9em;
    padding: 15px 10px;
  }

  .hero {
    margin: 30px 0;
  }
}

@media (max-width: 500px) {
  img {
    max-width: 100%;
    height: auto;
  }

  .thumbnail {
    width: 150px; /* or even smaller if needed */
    margin: 10px auto;
  }

  .lightbox img {
    max-width: 90%;
    max-height: 60vh;
  }
}