html {
      scroll-behavior: smooth;
    }

    body, html {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
        box-sizing: border-box;
  background-color: black;
    }

canvas {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  position: sticky;
  top: 0;
  left: 0;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

/* Navigation styles */
nav a.active {
  color: #1e1e1e;
  background-color: white;
}

.contentText {
  position: relative;
  z-index: -1;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0.5;
  color: white; /* Text color */
}

#main-nav {
  background-color: #1e1e1e;
  padding: 10px;
  text-align: center;
  height: auto;
  width: 100%;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  height: 30px;
  z-index: 5;
}

nav a {
  color: white;
  text-decoration: none;
  margin: 5px 5px;
}

#main-nav.sticky {
  position: fixed;
  top: 0;
}

nav a.active {
  color: #1e1e1e;
  background: white;
}

nav a:hover {
  text-decoration: underline;
}



    /* Content styles */

#initial_content,
#lighting_controls,
#emergency_services,
#biotechnology,
#end_content,
.title_block {
  height: auto;;
  display: flex;
  flex-direction: column;
  justify-content: top;
  background-color: black;
  color: white;
  font-family: sans-serif;
  padding-left: 25%;
  padding-right: 25%;
  padding-top: 0%;
  z-index:100;
}

.text_content{
  font-size: 2rem;
}

#fade_text{
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

h1 {
  font-weight: bold;
  color: #fff;
  font-size: 5rem;
}

    .row>.column {
      padding: 0 8px;
    }

    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    .column {
      float: left;
      width: 25%;
    }

.button {
  background-color: darkslateblue;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
}

.button-like {
            display: inline-block;
            padding: 10px 20px;
            background-color: darkslateblue;
            color: #fff; /* Text color */
            text-decoration: none; /* Remove underline */
            border: none; /* Remove border */
            border-radius: 5px; /* Optional: Add rounded corners */
            cursor: pointer;
        }

.button:hover {
  background-color: darkslateblue;
}

#bar {
  /* Your default styles here */
  color: white; /* Default text color */
  font-family: sans-serif;
}

    /* Add loading styles for progress bar */
    #loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: black;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 999;
      opacity: 1;
      transition: opacity 1s ease-in-out;
    }

    #loader.fadeOut {
      opacity: 0;
      visibility: hidden;
    }

    #bar {
      width: 0;
      height: 20px;
      background-color: darkslateblue;
      padding-left:10px;
      border-radius: 10px;
      min-width:100px; /* Adjust the percentage as needed */
    }
@media only screen and (max-width: 600px) {
    /* Styles for screens up to 600px wide */
    #bar {
        min-width: 100%; /* Adjust as needed */
    }
}


@media only screen and (max-width: 600px) {
  /* Styles for screens up to 600px wide (Mobile) */

  #initial_content,
  #lighting_controls,
  #emergency_services,
  #biotechnology,
  #end_content,
  .title_block {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5%;
    min-height: 100vh; /* Ensures the container takes at least the full viewport height */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Aligns items to the top and bottom */
  }

  .text_content {
    font-size: 1.1rem;
    flex-grow: 1; /* Allows the text to take up remaining space in the container */
  }

  h1 {
    font-size: 1.5rem;
  }

  .column {
    width: 100%;
  }

  .modal,
  .modal2,
  .modal3 {
    padding-top: 50px;
  }

  .close {
    font-size: 40px;
  }

  .prev,
  .next {
    top: 50%;
    padding: 8px;
    margin-top: -30px;
    font-size: 20px;
  }

  .button,
  .button-like {
    font-size: 14px;
  }

  #bar {
    width: 20%;
    width: auto;   /* Allow the bar to shrink to fit its content */
    min-width: 0;
  }
  }
   #fade_text {
    opacity: 1;
    /*transition: opacity 0.5s ease-in-out;*/
  }
  
/* Navigation styles */
nav a.active {
  color: #1e1e1e;
  background-color: white;
}

.contentText {
  position: relative;
  z-index: -1;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0.5;
  color: white; /* Text color */
}

#main-nav {
  background-color: #1e1e1e;
  padding: 10px;
  text-align: center;
  height: auto;
  width: 100%;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  height: 30px;
  z-index: 5;
}

nav a {
  color: white;
  text-decoration: none;
  margin: 5px 5px;
}

#main-nav.sticky {
  position: fixed;
  top: 0;
}

nav a.active {
  color: #1e1e1e;
  background: white;
}

nav a:hover {
  text-decoration: underline;
}

  
}