/* mystyle.css */

/* Navigation Bar Styles */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  height: 8vh;
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: #fdc672;
}

.bottom_margin {
  height: 2vh; /* same height as nav bar */
  position: fixed;
  bottom: 0;            /* sticks to bottom */
  left: 0;
  background-color: #fdc672; /* match nav bar color */
  width: 100%;
  
}

.nav-bar .nav-links {
  display: flex;             /* make links horizontal */
  gap: 5em;         /* smaller gap for small screens */
  list-style: none;
  margin: 0;
  padding: 1vh 0;
}

.nav-bar .nav-links a {
  min-width: 18em;  /* prevents them getting too wide */
  text-align: center;       /* center text */
  display: block;            /* block to respect padding */
  padding: 1.2vh;     /* padding for clickable area */
  text-decoration: none;
  color: rgb(85, 0, 0);
  border: 2px solid #e7e7e7;
  border-radius: 5px;        /* optional: rounded edges */
  background-color: #e99528;
  box-shadow: 0 4px 6px rgba(148, 67, 0, 0.2);
  transition: all 0.2s ease;
  font-weight: bold;
  font-size: larger;
}

.nav-bar .nav-links a:hover {
  background-color: #ff8ae6;
  cursor: url("gam1538.cur"), auto; /* fallback to default cursor */
}

.logo {
  position: fixed;
  top: 0.5vh;
  left: 8vh;
  width: 190px;   /* set width */
  height: auto;
  z-index: 101; /* above nav bar */
}

/* Layout Styles */

html, body {
  margin: 0;           /* remove default spacing */
  border: 1.5em solid #fdc672;  /* your nav bar color */
  box-sizing: border-box; /* include border in total size */
  overflow: auto;
  scrollbar-width: none;  
  cursor: url("nat1054.cur"), auto; /* fallback to default cursor */
}

.content {
  display: flex;
  overflow: auto;
  min-height: 94vh; /* full viewport height minus nav bar */
  overflow: auto;           /* scrolling enabled */
  background-color: #86c274;
  background-image: url("https://www.transparenttextures.com/patterns/pool-table.png");  
  }

.content::-webkit-scrollbar {
  display: none;   
}

.left-side, .middle-side, .right-side {
  flex: 1;  /* both take equal space */
}

/* On smaller screens, stack them */
@media (max-width: 800px) {

  .nav-bar .nav-links a {
    min-width: 5em;
  }     
  .nav-bar .nav-links {
    gap: 3em;         /* smaller gap for small screens */
  } 

  .logo {
  width: 0px;   /* set width */
  position: fixed;
  }  

  .content {
    flex-direction: column; /* force vertical stacking */
  }

  .left-side, .middle-side, .right-side {
    flex: 1 1 auto;
    width: 100%; /* each fills screen width */
    padding: 3vh; /* preserve padding on small screens */
    box-sizing: border-box; /* ensures padding doesn’t break width */

  }


  }

.left-side {
  padding: 3vh;

}

.middle-side {
  padding-top: 3vh;
}

.right-side {
  padding: 3vh;

}

.gallery-item img {  
  max-width: 100%;          /* responsive width */
  height: auto;        /* keeps aspect ratio */
  display: block;      /* removes bottom space */
  margin: 20px auto;   /* centers image */
  object-fit: cover; /* hm */
}



/* who.html */

.middle { 
    text-align: center; 
    background-image: url("background_flower.png");
    background-repeat: repeat;       /* tiles the image */
    background-position: top left;   /* start from top left */
    background-size: auto;           /* keep original size */
    flex: 1;
    background-size: 75px auto;  /* each flower is now 50x50px */
    opacity: 30%;
    
}

.middle ul {
  list-style: none;       /* removes default bullets */
  padding-left: 0;        /* removes left padding */
  text-align: center;     /* centers the text */
}

.middle ul li {
  margin: 0.5em 0;        /* optional spacing between items */
}