body {font-family:serif;
}

body.index, body.viz{
background:#eeeae5; 
font-family:serif;
font-size:larger;
color:black;
}

body.viz{
background:#FFB6C1;
}
a {
color:white;
}
a:visited{
color:white;    
}

section.sub a, footer a, a.footer {
color:blue;
}
section.sub a:active, .footer a:active {color:red;
    
}
section.sub a:visited, .footer a:active {
color:purple;    
}

nav.nav{
background:#45749D;
color:white;
text-align:center;
border-style:solid;
border-color:black;
border-width:thick;
border-radius:15px;
width: 80%;
margin:auto;
padding:1em;

}
nav a {
padding-left:1em; 
padding-right:1em;
white-space: nowrap;
}


section {
    margin:auto;
    padding-left:2em;
    padding-right:2em;
}
section.sub {
    background: #D5D7E0;
    color: black;
    padding: 2em;              /* slightly more breathing room */
    border: solid black;
    border-radius: 15px;

    max-width: 800px;          /* 👈 controls how wide the box can be */
    margin: 2em auto;          /* 👈 centers it + adds space above/below */

    font-size: 1em;
    text-align: center;
}

h1{
font-size:3em;
text-align:center;
/*border-style:solid;
border-color:white;*/

}

.party-grid {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    column-gap: 4rem;
    row-gap: 1.5rem;
}

.party-column {
    padding: 1rem;
}

.bold-subtitle {
    font-weight: bold;
    font-size: 1.2rem;
    margin-top: 1rem;
}

.bold-subtitle {
  text-align: center;
  font-family: serif; /* or your site font */
  font-size: 1.25em;
  font-weight: 700;
  color: #333;
}

.bold-subheader {
  text-align: center;
  font-family: serif; /* or your site font */
  font-size: 1.25em;
  font-weight: 700;
  color: #333;
}

.italic-subheader {
  text-align: center;
  font-family: serif; /* or your site font */
  font-style:italic;
  color: #333;
}

.countdown-container {
  text-align: center;
  font-family: serif; /* or your site font */
  color: #333;
}

.countdown-date {
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.countdown-days {
  font-size: 22px;
  letter-spacing: 3px;
  font-weight: 500;
}

.question {
    font-weight: bold;
    font-size: 1.75rem;
    margin-top: 1rem;
    text-align: center;
}

.answer {
    font-size: 1.25rem;
    margin-top: 1rem;
    text-align: center;
}
h2{
text-align:center;
font-size:2em;
font-weight: medium;
}
p1{
font-size:1em;
text-align:center;
/*border-style:solid;
border-color:white;*/
}
iframe.timeline{
width:100%;
height:500px
}
iframe.kumu{
width:100%;
height:500px   
}
div.engagement{
display: flex;
border-style:solid;
border-radius: 15px;
border-color:black;
border-width:thick;
background:#45749D;
color:black;
margin:auto;
text-align:left;
flex-wrap: wrap;
justify-content: center;
gap: 1rem; 
padding: 1rem;            /* <--- adds space inside the border */
align-items: center
}
figure.engagement {
  flex: 0 1 300px;   /* default width */
  margin: 0;
  margin: 0.5rem;    /* <--- adds spacing around each figure */
  border: solid thick lightslategray;
  border-radius: 15px;
  overflow: hidden;                     /* keeps image corners rounded */
}
figure.engagement figcaption {
  margin-top: 0.5rem;
  font-size: 1rem;
}
figure.engagement.wide {
  flex: 0 1 500px;   /* wider image */
}
figure.engagement img {
  width: 100%;
  height: auto;
  display: block;
}


/* Highly recommended global fix for "100% + border" overflow issues */
*, *::before, *::after { box-sizing: border-box; }

.travel_list{
  list-style: none;     /* remove bullets */
  padding: 0;           /* remove left indent */
  margin: 0 0 1.25rem;  /* spacing after list */
  text-align: center;   /* keep list lines centered */
}
.travel_list a {
  text-decoration: none;
  color: darkslateblue;
  font-weight: bold;
}

.travel_list a:hover {
  text-decoration: underline;
}

div.travel_places{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  gap: 1rem;
  padding: 1rem;

  border: thick solid black;
  border-radius: 15px;

  background: #D5D7E0;
  color: black;
  margin: 0 auto;
}

figure.place{
  flex: 0 1 300px;
  margin: 0;
}

figure.place.wide{
  flex: 0 1 500px;
}

figure.place figcaption{
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  text-align: center;
}

figure.place img{
  width: 100%;
  height: auto;
  display: block;

  border: thick solid darkblue;
  border-radius: 15px;
}



footer{
border-style:solid;
border-color:black;
border-width:thick;
border-radius:15px;
background:white;
color:black;
width:90%;
margin:auto;
padding:1em;
}
body.methods{
background:#967BB6;
font-size:larger;
}
body.about{
background:purple; 
color:white;
font-size:larger;
}
p.about{
border-style:solid;
border-color:black;
border-radius:15px;
margin:auto;
width:80%;
padding:1em;
}
div.power{
border-style:solid;
border-color:orange;
border-radius:10px;
border-width:10px;    
}
div.svg{
border-style:solid;
border-color:white;
border-radius:10px;
border-width:10px; 
}

@media (max-width: 600px) {
    .party-grid {
        grid-template-columns: 1fr;  /* stack vertically */
    }
}