* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
}

main {
  /* padding: min(5em, 7%); */
  padding-top: 0;
  h1 {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

nav {
  position: fixed; /* Keep it fixed */
  top: 0;
  /* max-width: 1200px; */
  width: 100%;
  background: var(--navbg);
  color: var(--nav-text);
  /* box-shadow: 0 4px 15px var(--text-color); */
  backdrop-filter: blur(5px);
  transition: transform 350ms ease-in-out;
  z-index: 1000;
  ul {
    list-style: none;
    display: flex;
  }
  li {
    display: flex;
    /* cursor: pointer; */
  }

  .home-li {
    margin-right: auto;
  }
  a {
    display: flex;
    text-decoration: none;
    font-size: clamp(0.9rem, 0.85rem + 0.5vw, 1.4rem);
    font-weight: 600;
    color: var(--nav-text);
    transition: background-color 150ms ease;
    /* margin: 5px; */
    padding: 1.5em 1em;
    text-align: center;
    cursor: pointer;
    &:hover {
      color: var(--hover-color);
      text-shadow: 1px 1px 1px var(--text-color);
    }
    &.active-link {
      border-bottom: 2px solid var(--text-color);
    }
    &.accent-link {
      background-color: var(--link-color);
    }
  }
}

#whitec,
#blackc {
  margin-left: 10px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

#blackc {
  display: var(--nmode);
}

#whitec {
  display: var(--dmode);
}

button#open-sidebar {
  position: fixed;
  display: none;
  top: 0;
  right: 0;
  border: none;
  padding: 1em;
  margin-left: auto;
  cursor: pointer;
  transition: transform 300ms ease-in-out;
}

.hidden {
  transform: translateY(-110%); /* Move upward out of the viewport */
}

#close-sidebar {
  display: none;
  /* background: none; */
  border: none;
  padding: 1em;
  cursor: pointer;
}

#overlay {
  background-color: var(--overlay);
  position: fixed;
  inset: 0;
  z-index: 9;
  display: none;
}

/* Styling for the SVG */
.hamburger {
  display: block;
  width: 40px; /* Adjust the size */
  height: 40px;
  cursor: pointer;
  background-color: transparent !important; /* Default line styling */
  .line {
    stroke-width: 3; /* Line thickness */
    stroke-linecap: round; /* Rounded line edges */
    /* Individual line colors */
    &.top {
      stroke: var(--hbtop);
    }
    &.middle {
      stroke: var(--hbmid);
    }
    &.bottom {
      stroke: var(--hbbot);
    }
  }
}

/* Example hover effect */
.hamburger:hover .line {
  stroke: var(--hbhov); /* All lines turn yellow on hover */
}

/*Example active state (e.g., for open menu)
.hamburger.active .line.top {
  stroke: #e91e63; /* Pink for top line 
}

.hamburger.active .line.middle {
  stroke: #9c27b0; /* Purple for middle line 
}

.hamburger.active .line.bottom {
  stroke: #3f51b5; /* Indigo for bottom line 
}*/

button#open-sidebar,
button#close-sidebar {
  background-color: transparent;
}

/* Styling for the "X" icon */
.x-icon {
  width: 40px; /* Same size as hamburger */
  height: 40px;
  cursor: pointer;
  .line {
    stroke-width: 3; /* Same thickness as hamburger lines */
    stroke-linecap: round; /* Rounded edges */
    stroke: var(--hbtop);
  }
}

/* Example hover effect */
.x-icon:hover .line {
  stroke: var(--hbhov);
}

.scrollregion {
  height: 1000px;
}

@media screen and (max-width: 600px) {
  body {
    -webkit-overflow-scrolling: touch;
    /* Hide vertical scrollbar on iOS and Android */
    ::-webkit-scrollbar {
      display: none;
    }
    /* Hide scrollbar for Firefox */
    scrollbar-width: none;
  }

  main {
    h1 {
      margin-top: 0;
    }
  }

  button#open-sidebar {
    display: block;
  }

  #close-sidebar {
    display: block;
  }

  nav {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: min(15em, 100%);
    z-index: 10;
    border-left: 1px solid var(--hover-color);
    transition: right 300ms ease-out;
    ul {
      width: 100%;
      flex-direction: column;
    }
    a {
      width: 100%;
      padding: 0.5rem 1.5em;
      font-size: 1.4rem;
    }
    &.show {
      right: 0;
      ~ #overlay {
        display: block;
      }
    }
  }

  #whitec,
  #blackc {
    position: absolute;

    top: 35px;
    right: 10px;
  }
}