body {
  font-family: Calibri, Arial;
  margin: 0;
}

.header {
  padding: 80px; /* some padding */
  text-align: center; /* center the text */
  /* background: #fbff00; /* yellow background */
  color: white; /* white text color */
  text-shadow:            
  -1px -1px 2px #000,  
  1px -1px 2px #000,
  -1px  1px 2px #000,
  1px  1px 2px #000;
  

}

/* Increase the font size of the <h1> element */
.header h1 {
  font-size: 45px;
}

/* adding banner 2/11/25 */
.banner {
  position: relative;
  width: 100%;
  margin-top: 60px;
}

.banner img {
  width: 100%;
  height: auto;
  display: block;
}

.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 3rem;
  text-shadow:            
  -1px -1px 2px #000,  
  1px -1px 2px #000,
  -1px  1px 2px #000,
  1px  1px 2px #000;
  font-weight: bold;
}

.text {
	background-color: #e4e4e4; 
	padding: 20px;
	margin: 50px;
	font-size: 25px;

  display: flex;
  flex-direction: column;
  align-items: center;
 }

 .mainbody {
	display: flex; 
	align-items: center;
	justify-content: center;
  flex-wrap: wrap;

 }

/*end*/

.background-image{
  background-image: url('/images/building.jpg');
  filter: brightness(60%) blur(3px); 
  background-size: cover; /* Scale the image to cover the entire element */
  background-attachment: scroll; /* Fix the image in place during scrolling */
  background-position: 50% 60%; /* Position the image */

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}


.menubutton {
	float: left; /* Make sure that the links stay side-by-side */
	color: white; /* White text color */
	text-align: center; /* Center the text */
	padding: 6px 17px; /* Add some padding */
	background-color: #2d2d2d00; /* Dark background color */
	display: None;
	border-style: None;
	font-size: 30px;
}




/* Style the top navigation bar */
.navbar {
  overflow: hidden; /* Hide overflow */
  background-color: #0f0f0ff5; /* Dark background color */
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

/* Style the navigation bar links */
.navbar a {
  float: left; /* Make sure that the links stay side-by-side */
  display: block; /* Change the display to block, for responsive reasons (see below) */
  color: white; /* White text color */
  text-align: center; /* Center the text */
  padding: 14px 20px; /* Add some padding */
  text-decoration: none; /* Remove underline */
  transition: 0.3s;
}

/* Right-aligned link */
.navbar a.right {
  float: right; /* Float a link to the right */
}

/* Change color on hover/mouse-over */
.navbar a:hover {
  background-color: #ddd; /* Grey background color */
  color: black; /* Black text color */
}

/* Ensure proper sizing */
* {
  box-sizing: border-box;
}




/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {

  .steam-scale {
    transform: scale(0.65); /* Adjust the scale factor as needed */
    width: 646px; /* Original width of the container */
    height: 190px; /* Original height of the container */

  }

  /* new 2/10/25 */
  
  .text {
    width: 90%;
    font-size: 20px;
  }

    /* end */
  
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 420px) {
  .navbar a {
    float: none;
    width: 100%;
  }

  .main {
    font-size: 30px;
  }
  
  .navbar div {
    max-height:0px;
    overflow:hidden;
    transition:0.5s;
  }
  
  .menubutton {
	  display: block;
    padding-top: 10px;
  }
  
  .home {
	  padding-right: 56px !important;
	  margin-bottom: 10px !important;
    padding-top: 17px !important;
    padding-bottom: 10px !important;
  }


  /* new 2/10/25 */

  .banner-text {
    font-size: 2rem;
  }

  .text {
    font-size: 17px;
  }

  .steam-scale {
    transform: scale(0.5); /* Adjust the scale factor as needed */
  }


  /* end */

}