body,
html {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
}

.navbar {
  position: fixed;
  top: 0;
  background-color: #3a931d;
  padding: 10px;
  z-index: 1000;
}

.nav-button {
  background: none;
  border: none;
  color: black;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
}

.nav-button:hover {
  color: red;
}

.content {
  margin-top: 30px;
  padding: 10px;
}

.navbar-toggler-icon {
  display: block;
  width: 25px;
  height: 3px;
  background-color: black;
  border-radius: 1px;
  position: relative;
  transition: transform 0.3s ease-in-out;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: "";
  display: block;
  width: 25px;
  height: 3px;
  background-color: black;
  border-radius: 1px;
  position: absolute;
  transition: transform 0.3s ease-in-out;
}

.navbar-toggler-icon::before {
  top: -8px;
}

.navbar-toggler-icon::after {
  top: 8px;
}

.navbar-toggler.collapsed .navbar-toggler-icon {
  background-color: transparent;
}

.navbar-toggler.collapsed .navbar-toggler-icon::before {
  transform: rotate(45deg) translate(5px, 5px);
}

.navbar-toggler.collapsed .navbar-toggler-icon::after {
  transform: rotate(-45deg) translate(5px, -5px);
}