body{
  height:100%;
  width:100%;
  --light: rgb(41, 41, 41);
  --dark: rgb(36, 36, 36);
  background: linear-gradient(
    -33.6deg,
    var(--light) 0% 9%,
    var(--dark) 11% 19%,
    var(--light) 21% 29%,
    var(--dark) 31% 39%,
    var(--light) 41% 49%,
    var(--dark) 51% 59%,
    var(--light) 61% 69%,
    var(--dark) 71% 79%,
    var(--light) 81% 89%,
    var(--dark) 91% 100%
  );
  background-repeat: repeat;
  background-size: 200px 200px;
  color:white;
  margin-top: 100px;
  justify-content: center;
  text-align: center;
   font-family: "Alan Sans", sans-serif;
}
/*AI*/
.banner {
    width: 100%;
    height: auto; /* default on smaller screens */
    box-shadow:0 0 10px darkslategray, 0 0 15px rgb(0, 40, 170);
    margin-top:25px;
    border: ridge 3px darkslategray;
}

@media (min-width: 992px) {
    .banner {
        height: 400px; /* crop top/bottom on desktops */
        object-fit: cover;
        object-position: center;   
    }
}
.menu-icon {
  font-size: 30px;
  padding: 10px;
  cursor: pointer;
  background-color:rgb(0, 17, 75);
  color: white;
  border-radius: 5px;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
}

/* Sidebar */
.sidebar {
  position: fixed;
  left: -200px; /* Initially hidden off-screen */
  top: 0;
  width: 200px;
  height: 100%;
  background-color: rgb(0, 17, 75);
  transition: left 0.5s ease-in-out; /* Smooth transition */
  z-index: 500;
}

/* Sidebar visible when 'open' class is applied */
.sidebar.open {
  left: 0; /* Sidebar slides in */
}

.sidebar ul {
  list-style: none;
  padding: 20px 0;
}

.sidebar ul li {
  padding: 15px;
  text-align: center;
}

.sidebar ul li a {
  color: white;
  text-decoration: none;
  display: block;
}

.sidebar ul li a:hover {
  background-color: rgb(0, 23, 100);
}

/* Title styling */
.title {
  text-align: center;
  margin-bottom: 20px;
  font-size: xx-large;
}
/* Responsive layout */
@media screen and (max-width: 768px) {
  /* Stack the content vertically on mobile */
  .main-container {
    flex-direction: column;
  }

  /* Sidebar takes full width on mobile */
  .sidebar {
    left: -100%; /* Initially hidden off-screen on mobile */
    width: 100%; /* Full width for mobile */
  }

  .sidebar.open {
    left: 0; /* Visible when 'open' class is added */
  }

}

nav-text{
  color:rgb(240, 240, 240);
}

.isAMap{
  width:100%;
  height:450px;
  border:0;
}

.boxInfo{
  height:450px;
  border:solid rgb(20, 20, 20) 2px;
  background-color: rgb(10, 42, 145);
  box-shadow:0 0 10px rgb(20, 20, 20);
  border-radius: 5px;
}
.infoHistory{
  font-size:20px;
}
.backBlue{
  background-color: rgb(0, 0, 185);
  width:100%;
  padding:0 !important;
  margin:0 !important;
}

.infoTabOpen{
  background-image: url(imgs/campus_photo.jpg);
    background-position:center;
    background-size:cover;
}

.tabBTN{
width:500px;
height:auto;
background-color:rgb(0, 0, 185);
color:whitesmoke;
}

.textBG{
  background-color:rgba(102, 102, 102, 0.9);
}