.hamburger {
  position: absolute;
  top: 50%;
  /* Centers it vertically within navbar */
  left: 20px;
  /* Ensures it's not touching the screen edge */
  transform: translateY(-50%);
  /* Perfect vertical centering */
  font-size: 24px;
  /* Adjust size */
  cursor: pointer;
  background: none;
  border: none;
  z-index: 1001;
  /* Ensures it's above other elements */
}


#hamburgerButton {
  display: none;
  /* Initially hide the hamburger menu */
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}



.navbar {
  position: relative;
  height: 80px;
  padding: 0 20px;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
}

.homebuttonlogo {
  position: absolute;
  top: 15px;
  left: 10px; /* ← Adjust this to move it further left */
  z-index: 1001;
}

.homebuttonlogo img {
  width: 120px; /* ← smaller size */
  height: auto;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.homebuttonlogo img:hover {
  transform: scale(1.05);
}







/* Ensure Navbar is Always Visible */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  /* Adjust height as needed */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.8);
  /* Dark semi-transparent background */
  z-index: 1000;
  /* Ensures it's always above content */
}



/* Hamburger Menu Styling */
.hamburger {
  background: none;
  border: none;
  font-size: 30px;
  color: white;
  cursor: pointer;
}

/* Navigation Links - Initially Hidden for Mobile */
#navLinks {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.9);
  text-align: center;
  z-index: 9999;
  /*puts hamburger menu above main content so context stack is right*/
}



.getStarted {
  background-color: #ff9800;
  border: none;
  padding: 12px 24px;
  color: white;
  font-size: 18px;
  cursor: pointer;
  border-radius: 5px;
}

.getStarted:hover {
  background-color: #e68900;
}


/* Background Image with Blur */
.background {
  position: fixed;
  /* Ensures full-screen background */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("background.jpg") no-repeat center center/cover;
  filter: blur(10px);
  /* Blurs ONLY the background */
  z-index: -1;
  /* Keeps it behind content */
}

.background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  /* Dark overlay */
}


div.content {
  width: 100vh;
  max-width: 100vh;
  height: auto;
  position: relative;
  top: -100px;  /* change height of div.content element*/ 
  min-height: 80vh;         /* Shorter height */
  margin: 0px auto 20vh;    /* Top margin = 80px to bring it higher */
  padding: 200px;
  background: rgba(17,10,14,0.72);
  border-radius: 12px;
  box-sizing: border-box;
}


/* Reset default margin and padding 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}
  */


/* Register Link */
.registerLink {
  margin-top: 15px;
  font-size: 14px;
}

.registerLink a {
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}

.registerLink a:hover {
  text-decoration: underline;
}



/* Style input groups */
.inputGroup {
  text-align: left;
  margin-bottom: 15px;
}

.inputGroup label {
  font-size: 14px;
  color: #555;
  display: block;
  margin-bottom: 5px;
}

.inputGroup input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
}

/* Register button styling */
#registerBtn {
  width: 100%;
  padding: 12px;
  background-color: #4A90E2;
  border: none;
  color: white;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;

}

#registerBtn:hover {
  background: #357ABD;
}

input {
  text-align: left;
  margin-bottom: 15px;
}


.input-group input {
  font-size: 14px;
}


.registerContainer {
  background: #fff;
  background: #7d7777;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 400px;
  text-align: center;
}

/* Form Title */
.registerContainer h2 {
  margin-bottom: 20px;
  color: #333;
}











/* Form Layout */
.inputGroup {
  text-align: left;
  margin-bottom: 15px;
}

.inputGroup label {
  font-size: 14px;
  color: #555;
  display: block;
  margin-bottom: 5px;
}

/* Input Group */
.inputGroup {
  position: relative;
  margin-bottom: 15px;
  width: 100%;
}

/* Modern Input Fields */
.inputGroup input {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #ddd;
  border-radius: 6px;
  /* Subtle rounded corners */
  font-size: 16px;
  text-align: left;
  background: #fff;
  outline: none;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  /* Soft shadow */
}

/* Focus Effect */
.inputGroup input:focus {
  border-color: #2575fc;
  background: #f8faff;
  /* Slight blue tint */
  box-shadow: 0 0 8px rgba(37, 117, 252, 0.2);
  /* Elegant glow */
}

/* Placeholder Styling */
.inputGroup input::placeholder {
  color: #999;
  font-size: 14px;
}

/* Sticky Navbar */
.navbar {
  position: fixed;
  /* Stays on top */
  top: 0;
  left: 0;
  width: 100%;
  background: #333;
  /* Dark background */
  color: white;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  /* Ensures it stays on top */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}



/* Show nav on click */
#navLinks.show {
  display: block;
}

/* Navigation Links Styling */
#navLinks li {
  padding: 10px 0;
}

#navLinks a {
  text-decoration: none;
  color: white;
  font-size: 18px;
  display: block;
}



/*
#navLinks {
  display: flex;
  gap: 20px;
  list-style: none;
}

#navLinks li {
  display: inline-block;
}
*/


#navLinks {
  display: flex;
  gap: 20px;
  list-style: none;
  position: absolute;
  top: 50%;
  /* Keeps it aligned */
  right: 20px;
  /* Push to the right */
  transform: translateY(-50%);
  /* Center vertically */
}

.pageContainer {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Change from center to flex-start for desktop */
  align-items: center;
  min-height: 100vh;
  text-align: center;
  position: relative;
  /* Ensure proper stacking of elements */
}

/*
#mainMenu {
  position: fixed;
  top: 50%;
  /* Stick to the top 
  left: 50%;
  /* Shift it to the center horizontally 
  transform: translateX(-50%);
  /* Offset the left position by 50% of its own width to truly center it 
  width: auto;
  /* Let the menu width be based on its content 
  z-index: 10;
  /* Keep it above other elements 
  display: flex;
  justify-content: center;
  /* Center the menu items inside 
  padding: 20px;
  /* Add some padding 
}
*/ 

/* MAIN CONTENT BOX ON HOME PAGE */
#mainMenu {
  position: fixed;
  top: 300px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  z-index: 10;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}




/* If the mobile page container is too high, 
you need to ensure it's fully centered regardless of screen size.
 Here’s how to force center it properly. Best Fix: Use flexbox with vh (viewport height) */



/*
.pageContainer {
  border: 2px solid red;
}
*/

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Login Container */
.loginContainer {
  background: none;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 400px;
  text-align: center;
}


/* Login Button */
.loginButton {
  width: 100%;
  background: #007bff;
  color: white;
  border: none;
  padding: 12px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.loginButton:hover {
  background: #0056b3;
}



#loginContainer,
#loginForm {
  position: relative;
  width: 90%;
  max-width: 400px;
  /* Adjust as needed */
  margin: 0 auto;
  text-align: center;
}

#login input {
  width: 700px;
  /* or whatever fixed width they originally had */
  box-sizing: border-box;
}

/* Show Navigation Menu When Active */
#navLinks.show {
  display: flex;
}

.menu-open {
  display: none;
  /* Hidden by default */
}

.menu-open.active {
  display: flex;
  /* Shown when active */
  height: 300px;

}

/* Mobile navigation menu: top-right corner */
#navLinks {
  position: absolute;
  top: 60px;             /* Distance from the top */
  right: 0;              /* Align to the right edge */
  padding-left: 60%; 
  background-color: #fff;
  width: 0;
  height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  transition: width 0.3s ease, height 0.3s ease;
  z-index: 1000;
}


canvas {
  width: 100%;
  max-width: 500px;
  height: 300px;
  /* Ensure it has height */
}

body {
  margin: 0;
  padding: 0;
  background: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: Arial, sans-serif;
}

#chartContainer {
  position: relative;
  width: 80%;
  max-width: 600px;
  z-index: 10;
  /* Set a higher z-index for chart container */

}

#myChart {
  width: 100%;
  /* 100% width of the container */
  height: 400px;
  /* Fixed height for the chart */
}

#myChart {
  z-index: 999;
}











@media screen and (max-width: 768px) {
  .pageContainer {
    padding: 30px;
    /* Adjust padding on smaller screens */
    justify-content: center;
    /* Ensure vertical centering on smaller screens */
  }

  #navLinks {
    position: fixed;
    top: 0;
    left: 0;
    width: 80%;
    /* Use width to control the menu size */
    max-width: 300px;
    /* Limit width */
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
}

/* Desktop override */
@media screen and (min-width: 768px) {
  #navLinks {
    position: static;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row;
    background: none;
    box-shadow: none;
    overflow: visible;
  }

  .hamburger {
    display: none;
  }
}


/* When menu is open */
#navLinks.show {
  width: 250px;
  /* Expand menu */
  height: 300px;
  /* Adjust height */
}

/* Style hamburger button when active */
#hamburgerButton.active {
  transform: scale(1.2);
  /* Slightly enlarge button */
}

/* Highlight on hover */
#navLinks a:hover {
  background-color: #555555;
  color: #000;
}

/* Highlight when touched (clicked) */
#navLinks a:active {
  background-color: #555555;
  /* Slightly darker when tapped */
  color: #000;
}

/* Add touch feedback for mobile devices */
@media (max-width: 768px) {
  #navLinks a {
    padding: 20px;
    font-size: 20px;
  }


  /* Touch highlight effect */
  #navLinks a:active {
    background-color: #555555;
    /* Even darker on mobile */
  }
}

@media (max-width: 480px) {

  /* change hamburger menu size and position on mobile */
  #navLinks.show {
    width: 70%;
    height: 70vh;
    top: 325%;
  }
}




/* Responsive: Show Menu on Desktop */
@media (min-width: 768px) {
  #navLinks {
    display: flex;
    position: static;
    flex-direction: row;
    background: none;
  }

  #navLinks li {
    padding: 10px;
  }



  .hamburger {
    display: none;
    /* Hide hamburger menu on large screens */
  }
}


@media (max-width: 480px) {

  /* Adjust for mobile screens */
  label {
    display: block;
    /* Makes label take full width */
    text-align: center;
    /* Centers text */
    font-weight: bold;
    /* Makes text bold */
    font-size: 18px;
    /* Adjust text size */
    color: rgb(227, 222, 222);
    /* Style the color */
    margin-bottom: 5px;
    /* Space between label and input */
    margin-left: -17%;
  }
}

@media screen and (max-width: 480px) {
  .menu-open #hamburgerButton {
    position: relative;
    width: 60%;
    height: 100%;
    object-fit: contain;
  }
}


@media screen and (max-width: 480px) {
  #loginForm {
    position: relative;
    width: 90%;
    height: auto;
    object-fit: contain;
  }
}

@media screen and (max-width: 480px) {
  .loginContainer {
    position: relative;
    width: 90%;
    height: auto;
    object-fit: contain;
  }
}






@media screen and (max-width: 480px) {
  body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* or center if you want vertical centering */
    min-height: 100vh;
    background: #f4f4f4;
    box-sizing: border-box;
  }

  #registerContainer  {
    width: 90vw;
    max-width: 400px;
    margin: 200px auto; /* center horizontally and add spacing from top */
    margin-right: 400px; 
    padding: 1.5rem;
    box-sizing: border-box;
    background: #7d7777;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  #registerContainer input {
    width: 100%;
    font-size: 1rem;
    padding: 0.75rem;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 1rem;
  }
}










@media (max-width: 768px) {
  .pageContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centers vertically */
    align-items: center;
    /* Centers horizontally */
    min-height: 100vh;
    /* Ensures it takes full height */
    padding: 20px;
    /* Prevents content from being too close to edges */
  }
}




@media (min-width: 768px) {
  .homebuttonlogo {
    position: absolute;
    top: 20px;
    left: 110px;
    right: auto;
  }
}

@media (max-width: 480px) {
  .homebuttonlogo {
    position: fixed;
    top: 5vh;
    /* 5% from the top of the viewport, allows same position on different mobile screen sizes. */
    right: 6vw;
    /* 6% from the right of the viewport allows same position on different mobile screen sizes. */
    left: 290px;
    height: auto;
    z-index: 1000;
  }
}

@media (max-width: 768px) {
  #hamburger {
    left: 15px;
    /* Adjust for better alignment */
    font-size: 22px;
    /* Slightly smaller for mobile */
  }
}

/* Responsive for Mobile: Move Logo to Right */
@media (max-width: 768px) {
  #navLinks {
    justify-content: flex-start;
    /* Aligns items to the left */
  }

  .hamburger {
    order: 1;
    /* Keep the hamburger on the left */
  }

  .homebuttonlogo {
    margin-left: auto;
    /* Pushes the logo to the right */
    order: 2;
    /* Moves logo to right */
  }
}

/* Desktop and Tablet: Navbar visible */
@media (min-width: 769px) {
  #navLinks {
    display: flex;
    /* Show navbar on desktop and tablet */
  }
}

/* Mobile: Hide Navbar on Register and Login Pages */
@media (max-width: 768px) {
  #navLinks {
    display: none;
    /* Hide navbar on mobile */
  }
}

/* Hide navbar on specific pages for mobile */
@media (max-width: 768px) {

  .login #navLinks,
  .registerPage #navLinks {
    display: none;
  }
}

/* Responsive Navbar */
@media (min-width: 768px) {
  #navLinks {
    display: flex;
    position: static;
    background: none;
    width: auto;
    margin-left: auto;
  }

  #navLinks li {
    padding: 0 15px;
  }

  .hamburger {
    display: none;
    /* Hide hamburger on larger screens */
  }
}


/* Responsive Styling */
@media (max-width: 480px) {
  .inputGroup input {
    font-size: 14px;
    padding: 10px;
  }
}

/*
  body {
    background: linear-gradient(135deg, #007bff, #00c6ff);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }
  */

/* Hide menu on small screens */
@media (max-width: 1024px) {
  #navLinks {
    display: none;
    flex-direction: column;
    background-color: #444;
    position: absolute;
    top: 60px;
    right: 0;
    width: 200px;
    padding: 10px;
    border-radius: 5px;
  }
}

/* Hide menu and show hamburger on smaller screens */
@media (max-width: 1024px) {

  #hamburgerButton {
    display: flex;
  }

  /* Show hamburger menu on tablet screen sizes */
  @media (max-width: 1024px) {
    #hamburgerButton {
      display: flex;
      /* Make the menu visible */
    }
  }


  @media (max-width: 768px) {
    .pageContainer {
      position: relative;
      /* Reset positioning for smaller screens */
      top: 0;
      left: 0;
      transform: none;
      /* Remove centering translation */
      width: 100%;
      /* Make button take full width */
      font-size: 14px;
      /* Adjust font size for smaller screens */
      padding: 12px;
      /* Add extra padding for touch-friendliness */
      margin: 10px 0;
      /* Add margin for spacing */
      /* background-color: red; to check if media querie is working correctly on smaller screen*/
    }
  }

  @media (min-width: 768px) {
    .pageContainer {
      width: 80%;
      max-width: 1000px;
    }
  }



  .pageContainer {
    padding: clamp(10px, 5%, 40px);
    /*Minimum 10px, scales up with screen size, max 40px */
  }

  header,
  section,
  footer {
    padding: clamp(15px, 6%, 50px);
    /*Dynamically adjusts section padding */
  }


  /*always putt css media queries at bottom of css code */
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .pageContainer {
      position: relative;
      /* Reset positioning for smaller screens */
      top: 0;
      left: 0;
      transform: none;
      /* Remove centering translation */
      width: 100%;
      height: 100%;
      /* Make button take full width */
      font-size: 14px;
      /* Adjust font size for smaller screens */
      padding: 12px;
      /* Add extra padding for touch-friendliness */
      margin: 10px 0;

    }
  }

  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    body {
      background-size: cover;
      background-position: top center;
      background-attachment: scroll;
    }
  }

 
  


  @media screen and (min-device-width: 481px) and (max-device-width: 768px) {
    /* STYLES HERE */
  }

  @media screen and (min-device-width: 769px) and (max-device-width: 1024px) {
    /* STYLES HERE */
  }

  @media screen and (min-device-width: 1025px) and (max-device-width: 1200px) {
    /* STYLES HERE */
  }

  @media screen and (min-device-width: 1201px) {
    /* STYLES HERE */
  }
}