.syne-tactile-regular {
  font-family: "Syne Tactile", system-ui;
  font-weight: 400;
  font-style: normal;
}


#top {
  background-color: #256796;
  padding-top: 20px;
	padding-bottom: 25px
}

.text {
  padding-top: 40px;
  padding-bottom: 40px;
}

.pics {
  background-color: #256796;
  padding-top: 40px;
  padding-bottom: 40px;

}

body {
  background-color: #092238;
}

h1 {
	  font-family: "Syne Tactile", system-ui;
  color: #ADD8FF;
  text-align: left;
}

h2 {
	  font-family: "Syne Tactile", system-ui;
  color: #ADD8FF;
  text-align: center;
}

h3 {
	font-family: "Syne Tactile", system-ui;
  color: #114674;
  text-align: center;
}

p {
  font-family: "Kumbh Sans", sans-serif;
  color: white;
  padding-left: 200px;
  padding-right: 100px;
}

ul {
  font-family: "Kumbh Sans", sans-serif;
  color: white;
  padding-left: 0px;
  padding-right: 100px;
}


 /* unvisited link */
a:link {
  color: cornflowerblue;
}

/* visited link */
a:visited {
  color: mediumpurple;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: greenyellow;
} 

/* 1em = whatever the body text is...
   2em = twice the size of the body text...*/


.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: center; 
	padding-left: 0px;
	padding-right: 0px
	
}

.grid-container img {
    max-width: 50%;
    height: auto;
    display: block;
	  padding-left: 200px;
  padding-right: 0px;
	padding-top: 100px;
	padding-bottom: 50px;
}

.container {
    position: relative; /* Essential for positioning the overlay text relative to the image */
    display: block; /* Allows the container to wrap snugly around the image */
}

.overlay-text {
    position: absolute; /* Position the text over the image */
    bottom: 0; /* Adjust position as needed (e.g., top, bottom, center) */
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0); /* Semi-transparent background */
    color: white;
    padding: 0px;
    visibility: hidden; /* Hide the text by default */
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s; /* Smooth transition */
}

.container:hover .overlay-text {
    visibility: visible; /* Show the text when hovering over the container */
    opacity: 1;
}