/* Three-column stylesheet */

body {
	background-image: url('../picture_library/OM-Title-Background.jpg');
    repeat;
    height: 737px;
    margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
    }	

.text-box1 {
    width: 40%;
    height: auto;
    color: white;
    background-color: rgb(22, 20, 165);
    text-align: center;
    margin: auto;
    padding: 5px;
    border: 3px double white;
    margin-bottom: 0.5em;
    margin-top: .5em;
    }

.text-box2 {
    width: 65%;
    color: navy;
    background-color: white;
    text-align: center;
    margin: 0.5em auto;
    padding: 0.4em 0.6em;
    border: 3px double navy;
    box-sizing: border-box;
}

.text-box2 h2 {
    margin: 0; /* remove extra top/bottom space */
    line-height: 1.2; /* keep lines tight but readable */
    margin-bottom: 0; /* no gap below */
   }

.container {
	max-width: 950px; /* Or your desired maximum width */
	margin: auto;
    }

/* container2 is for footer */
.container2 {
	max-width: 65%; /* Or your desired maximum width */
	margin: auto;
    background-color: rgb(235, 235, 235);
    border: 3px double navy;
    }

header {
    text-align: center;
    }

h1 {
	font-size: .5em;
	text-align: center;
    color: transparent
    }

h2 {
	font-size: 1.2em;
	text-align: center;
    line-height: .5em;
	}
	
h3 {
	font-size: 1em;
	line-height: .8em;
	margin-bottom: -.6em;
	font-weight: bold;
	font-style: italic;
	text-align: center;
	color: #0000FF;
	}

h4 {
	font-size: .8em;
	line-height: 1.2em;
	font-weight: bold;
	text-align: center;
	color: black;
	}

.map-caption {
	font-size: .8em;
	margin-top: .2em;
	margin-bottom: .5em;
	text-align: center;
	font-weight: bold;
	}

.style1 {
	color: #9b9898;
	font-size: x-small;;
	}

.style5 {
	color: #FF0000;
	font-weight: bold;
	}

.style6 {
    font-size: 20px; 
    font-weight: bold;
    text-decoration: underline; 
    color: #000066;
    padding: 0px 00px 0em 20px;
    margin-top: 5px;
    margin-bottom: 0px;
    }

.style9 {
    font-size: 20
    }

ul.a {list-style-type: disc;
    font-size: 16px; 
    color: #000066;
    padding: 0px 10px 0em 20px;
    margin-top: 5px;
    margin-bottom: 1em;
    }

/* ul.b changes line height */
ul.b {list-style-type: disc;
    font-size: 16px; 
    line-height: 1.3; 
    color: #000066;
    padding: 0px 10px 0em 20px;
    margin-top: 5px;
    margin-bottom: 1em;
    }

.grid-container {
    margin-top: 0; /* no gap above */
    display: grid;
	gap: 1px;
	width: 75%;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: white;
    text-align: left;
    margin: auto;
    padding: 0px;
    border: 3px double navy;
    margin-bottom: 0em;
    }

.text-box2, 
.grid-container {
    width: 75%;
    margin: 0 auto;
    box-sizing: border-box;
    }

.columns {
  	background-color: white;
  	padding: 1px;
	border-left: 1px double black;
	border-right: 1px solid black;
  	border-top: 1px solid black;
	border-bottom: 1px solid black;
	font-size: .9em;
  	}

/* Stack text and images on small screens */
@media (max-width: 600px) {
 .grid-container {
 grid-template-columns: 1fr;
 }

 .grid-container > div:last-child {
 justify-self: center; /* centers the picture column */
 text-align: center; /* optional: centers inline content like links/images */
 }
}

/* Make the images responsive */
.grid-container img {
 max-width: 100%;
 height: auto;
 display: block;
}

.banner-img {
 display: block;
 max-width: 80%;
 justify-self: center;
 height: auto;
}