*{
   margin:0;
   padding:0;
}

body{
   font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}

#top-flexbox {
  display: flex;
  flex-flow: row;
  justify-content: space-around;
  padding: 20px;
  margin-top: 0px;
  background-color: DodgerBlue;
}
.reunion-grabber img {
  flex: 2;
  align-content: center;
  width: 350px;
  height: auto;
  border-radius: 50%;
  background-color: rgb(231, 164, 18);
}

.election-grabber img {
  flex: 2;
  align-content: center;
  width: 350px;
  height: auto;
  border-radius: 50%;
  background-color: rgb(231, 164, 18);
}

.separator {
  display: flex;
  font-size: 20px;
  font-weight: bold;
  width: 100px;
  border-style: groove;
  border-width: 5px;
  border-radius: 20px;
  border-color: rgb(231, 164, 18);
  background-color: gold;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.center-link {
  width: 150px;
  height: 100px;
}

#welcome-flexbox {
  display: flex;
  justify-content: space-around;
  background-color: aqua;
}

#welcome {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.2;
}

#statement {
  font-size: 1.5rem;
  color: midnightblue;
  font-weight: bold;
  line-height: 1.2;
}

.item {
  text-align: center;
  padding: 2rem 1rem;
  margin: 0.375rem;
  width: 15rem;
}

.item-1 {
  flex-grow: 1;
  border: 1px solid #ddd;
  border-radius: 15px;
  padding: 5px;
  background-image: url(../images/slideshow/brooklyn-navy-yard_orig.jpg);
  background-size: 100%;
  background-position: center;
}
.item-2 {
  padding: 2rem 1rem;
  border: 5px solid #51aaa3;
  border-radius: 15px;
  flex-grow: 3;
  color: white;
  background-image: url(../images/1926083797.jpg);
}
.item-3 {
  flex-grow: 1;
  background-image: url(../images/slideshow/con010_orig.jpg);
  border: 1px solid #ddd;
  border-radius: 15px;
  padding: 5px;
  background-size: 100%;
  background-position: center;
}

.bottom-row {
  display: flex;
  background-color: aqua;
  justify-content: center;
  align-items: center;
}

.flexbox-container {
  max-width: 1000px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  margin: 0, auto;
  background-size: cover;
}

:root { --overlay: rgba(0,0,0,.55); --radius: 14px; --shadow: 0 12px 32px rgba(0,0,0,.28); }

.modal-backdrop {
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center; padding: 1rem;
  background: var(--overlay); z-index: 9999;
}
.modal-backdrop[aria-hidden="false"] { display: flex; }

.modal {
  width: min(520px, 100%); max-height: 85svh; overflow: auto;
  background: #fff; color: #111; border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.25rem 1.25rem 1rem;
}
.modal h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.modal p { margin: 0 0 1rem; line-height: 1.5; }

.actions { display: flex; gap: .5rem; justify-content: flex-end; }
.btn { border: 0; border-radius: 999px; padding: .6rem 1rem; cursor: pointer; background:#111; color:#fff; }
.btn.secondary { background:#e6e6e6; color:#111; }

/* Prevent background scroll when modal is open */
.body-lock { overflow: hidden; }