body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    color: white;
    background-color: black;
    padding: 20px;
    text-align: center;
    
    animation: backgroundChange 2s infinite alternate;
    background-image: url('imgs/starBg_0.jpg');
    background-size: cover;
    background-position: center;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges; 
    image-rendering: -o-crisp-edges;
}

a {
    color: white;
}

h1, h2 {
    font-family: "Barrio", serif;
    font-weight: 400;
    font-style: normal;
}

.container {
    max-width: 50%;
    min-height: 100%;
    margin: 0 auto;
    background-color: rgb(0, 0, 0);
    border: solid white 2px;
    position: relative;
}


.flex-container {
    display: flex;
}

.flex-container.column {
    flex-direction: column;
    text-align: left;
}

.padding-20 {
    padding: 20px;
}

.fact-sheet-col-1 {
    display: flex;
    flex-direction: column;
    flex: 1; 
    padding: 20px; 
    text-align: left;
    /* border: 1px solid #ccc;  */
    gap: 20px;
}

.fact-sheet-col-1 h2 {
margin: 0px;
padding: 0px;
}

.fact-sheet-col-2 {
    flex: 2; 
    text-align: left;
    padding: 20px; 
    /* border: 1px solid #ccc; */
}

.fact-sheet-col-2 h2 {
margin: 0px;
padding: 0px;
}


.box-1 p {
    margin: 4px;
}
.box-1 a {
    margin: 4px;
}


.section-header {
  position: relative;
  text-align: left;
  margin-bottom: 1em; /* space below the header */
  padding-bottom: 0.25em; /* optional space above the line */
}

.section-header::after {
  content: "";
  display: block;
  width: 50%;          /* line spans half the container’s width */
  height: 1px;         /* thickness of the underline */
  background-color: currentColor; /* matches the text color */
}



.social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.social-icons a {
    text-decoration: none;
}
.social-icons img {
    width: 35px;
    height: 35px;
    transition: transform 0.15s ease-in-out;
}
.social-icons img:hover {
    transform: scale(1.1);
}

ul { 
    padding-left: 20px;
}


.flex-container iframe {       
  max-width: 100%; 
  width: 100%;   
  height: auto;  
  aspect-ratio: 560 / 315; 
}


/* TOC */
.toc {
    position: fixed;
    top: 20px;
    margin: 5px;
    left: 10%;
    width: 10%; /* Width of the TOC */
    background-color: #000;
     border: 2px solid #ccc;
}

.toc ul {
    list-style-type: none;
    padding: 0;
}

.toc ul li {
    margin-bottom: 10px;
}

.toc a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    display: block;
    padding: 5px 0;
    transition: color 0.3s ease;
}

.toc a:hover {
    color: orange;
}

.photo-section {
  padding: 20px;
  display: block; /* reset any flex stuff */
}

.photo-section h2 {
  text-align: left;
  margin-left: 20px; /* optional for a consistent left indent */
}

.photo-grid {
  display: flex;
  flex-direction: column;
  align-items: center; /* center the grid horizontally */
  /* border: solid white 2px; */
  gap: 20px;
  margin: 0 auto;
  max-width: 800px;
  width: 100%;
}

.photo-row.large {
  display: flex;
  justify-content: left;
}

.photo-row.large img {
  width: 50%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.photo-row.small img {
    flex: 1 1 0;
    max-width: 25%;
    height: auto;
    border-radius: 8px;
    box-sizing: border-box;
}

/* Make super-wide art span the full row */
.photo-row.small img.wide {
    flex: 1 1 100%;
    max-width: 100%;
    height: auto;           /* preserve aspect */
    object-fit: contain;    /* no crop */
}
.hero-image img, .footer-art img {
    width: 50%;
    max-width: 1200px;
    display: block;
    margin: 0 auto;
    border-radius: 12px; /* optional */
}


/* === Mobile responsiveness === */
@media (max-width: 768px) {
  /* Stack all flex containers vertically */
  .flex-container {
    flex-direction: column !important;
  }

  /* Full-width columns with smaller padding */
  .column-1,
  .column-2 {
    flex: none;
    width: 100%;
    padding: 10px;
  }

  /* Move the TOC into the document flow, full width */
  .toc {
    position: static;
    width: 100%;
    margin: 0 0 20px;
    padding: 10px;
    box-shadow: none;
    border: none;
  }
  .toc ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .toc li {
    margin: 5px;
  }
  .toc a {
    display: inline-block;
    padding: 5px 8px;
  }

  /* Make iframes and images scale down */
  iframe,
  img {
    max-width: 100%;
    height: auto;
  }

  /* Photo grid: one column */
  .photo-grid {
    flex-direction: column;
  }
  .photo-row.small img {
    max-width: 45%;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  /* Tighter typography & spacing */
  .toc a {
    font-size: 0.9rem;
  }
  .padding {
    padding: 8px;
  }
  .social-icons img {
    width: 28px;
    height: 28px;
  }
}