body	{
	background-color: #CCCC66;
	color: #000000;
	}

div.box	{ 
	background: url("/content/flight1.jpg");
	border: solid; 
	border-width: 0; 
	width: 100%;
	color: #000000;
        text-align: center;
	}

div.box2 { 
   text-align: center;
   position: absolute;
   background: #CCCC99; 
   border: none; 
   border-width: thin; 
   left: 40%;
   width: 20%;
   color: #000000;
}

.modified       {
        color: #666633;
        }
.http_host	{
        color: #666633;
        }

#button ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#button ul li { 
	display: inline; 
}

#button ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #000;
background-color: #CCCC66;
}

#button ul li a:hover
{
color: #fff;
background-color: #CCCC99;
}
.image-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Adjust the number as needed */
  gap: 2px; /* Adjust the gap between images */
}

.image-item {
  width: 100%;
  height: auto;
  text-align: center;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  width: 100%;
  border: 40px solid transparent;
  padding: 40px;
}
.text-overlay {
    display: none; /* Initially hide the text */
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 5px;
    text-align: center;
}
.grid-container:hover .text-overlay {
    display: block; /* Show the text when hovering over the container */
}

.image-box {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid transparent;
  padding: 10px;
}

.image-box img {
  max-width: 100%;
  max-height: 100%;
}