/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
html, body {
  margin: 0;
  padding: 0;
}

html {
  background-image: url('Bg imgs/26-03-18 bsw bg img.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}


body {
  color: black;
  font-family: Courier New;
  margin: 85px 300px 120px 200px; /* top right bottom left */
}

.sidebar {
  position: fixed;
  right: 0;
  top: 50;
  width: 300px; /* adjust to your liking */
  height: 150vh;
  background-image: url("Bg imgs/26-03-16 blues world plant 1.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 90% auto; /* or a percentage */
}

.bottombar {
  position: fixed;
  bottom: -5px;
  left: 0;
  width: 100%; /* spans full width */
  height: 100px; /* adjust as needed */
  margin: 0;
  padding: 0;
  background-image: url("Bg imgs/26-03-17 b'sw bottom bush.jpg");
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 90%;
  z-index: 100;
}




.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 85px;
  background-color: white;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 20px;
  z-index: 100;
}

.navbar a img {
  height: 50px; /* adjust to fit your navbar height */
  width: auto;
}


.button-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns, equal width */
  gap: 15px;
}

.button-grid a {
  display: block;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  background-color: white;
  color: black;
  border: 2px solid black;
  font-family: Courier New;
}

.button-grid a:hover {
  background-color: black;
  color: white;
}





.collapsible {
  position: relative;
}

.content {
  max-height: 100px; /* how much text to show before cutting off */
  overflow: hidden;
  transition: max-height 0.8s ease;
  position: relative;
}

.content.open {
  max-height: 2000px; /* large enough to fit any content */
}

.fade {
  position: absolute;
  bottom: 0; /* now anchors to bot of .content, not .collapsible */
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(transparent, white); 
  pointer-events: none; /* so it doesn't block clicks */
  transition: opacity 0.8s ease;
}

.fade.hidden {
  opacity: 0;
}

.show-more {
  background: none;
  border: none;
  font-family: Courier New;
  font-size: 1em;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}