body {background-color: black; color: white; font-family: Verdana, sans-serif; text-align: center; margin: 0;}

h1 {font-size: 2.5rem; margin: 1rem 0 1rem 0;}
h2 {font-size: 2rem; margin: 1rem 0 1rem 0;}
h3 {font-size: 1.5rem; margin: 1rem 0 0 0;}
h4 {font-size: 1.3rem; margin: 1rem 0 1rem 0;}
h5 {font-size: 1rem; margin: 0; font-style: italic;}
p {font-size: 1.3rem; margin: 0 1rem;}

a:link {color: white; text-decoration: underline dotted;}
a:visited {color: white; text-decoration: underline dotted;}
a:hover {color: white; text-decoration: underline dotted;}
a:active {color: white; text-decoration: underline dotted;}

img {width: 85%; height: auto; margin-top: 5%; margin-bottom: 5%;}

.imageGrid { 
  display: grid; 
  grid-template-columns: 1fr; 
  margin: 0 auto;
}
.imageGrid > div {
  grid-area: 1 / 1; 
  background-color: black; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  overflow: hidden; 
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}
.imageGrid > div.active {
  opacity: 1;
  pointer-events: auto;
}
.imageGrid img {
  object-fit: contain;
}