/* Define the style for the nav element */
nav {
  background-color: #130313; /* Set the background color to dark gray */
  height: 30px; /* Set the height of the nav element */
  display: flex; /* Use flexbox layout for the nav element */
  align-items: center; /* Align the items vertically in the nav element */
	
  justify-content: space-between; /* Align the items horizontally in the nav element */
  position: sticky;
  top: 0;
	z-index: 2;
}

/* Define the style for the nav logo */
nav .logo {
  color: white; /* Set the text color to white */
  font-size: 24px; /* Set the font size to 24px */
  font-weight: bold; /* Set the font weight to bold */
  margin-left: 20px; /* Add some margin to the left of the logo */
}

/* Define the style for the nav links */
nav .links {
  list-style: none; /* Remove the default list style */
  margin-right: 20px; /* Add some margin to the right of the links */
}

/* Define the style for the nav link items */
nav .links li {
  display: inline-block; /* Display the link items as inline blocks */
  margin-left: 10px; /* Add some margin to the left of each link item */
  font-size: 
}

/* Define the style for the nav link anchors */
nav .links a {
  color: white; /* Set the text color to white */
  text-decoration: none; /* Remove the default text decoration */
  padding: 10px; /* Add some padding to the link anchors */
}

/* Define the style for the nav link anchors when hovered */
nav .links a:hover {
  background-color: plum; /* Set the background color to lighter gray */
}

/* Define the style for the nav toggle button */
nav .toggle {
  display: none; /* Hide the toggle button by default */
}

/* Define the style for the nav toggle button when checked */
nav .toggle:checked ~ .links {
  display: block; /* Show the links when the toggle button is checked */
}

/* Define the style for the nav toggle button icon */
nav .toggle-icon {
  display: none; /* Hide the toggle button icon by default */
}

/* Define the style for the nav toggle button icon when hovered */
nav .toggle-icon:hover {
  cursor: pointer; /* Change the cursor to pointer when hovered */
}

/* Use media query to change the style for smaller screens */
@media screen and (max-width: 700px) {
  /* Change the style for the nav element */
  nav {
    height: auto; /* Set the height of the nav element to auto */
    flex-direction: column; /* Change the flex direction to column */
  }

  /* Change the style for the nav links */
  nav .links {
    display: none; /* Hide the links by default */
    width: 100%; /* Set the width of the links to 100% */
  }

  /* Change the style for the nav link items */
  nav .links li {
    display: block; /* Display the link items as blocks */
    margin: 0; /* Remove the margin of the link items */
  }

  /* Change the style for the nav link anchors */
  nav .links a {
    display: block; /* Display the link anchors as blocks */
    text-align: center; /* Center the text of the link anchors */
  }

  /* Change the style for the nav toggle button */
  nav .toggle {
    display: block; /* Show the toggle button */
    position: absolute; /* Position the toggle button absolutely */
    top: 10px; /* Set the top position of the toggle button to 10px */
    right: 20px; /* Set the right position of the toggle button to 20px */
    width: 30px; /* Set the width of the toggle button to 30px */
    height: 30px; /* Set the height of the toggle button to 30px */
    opacity: 0; /* Set the opacity of the toggle button to 0 */
    z-index: 2; /* Set the z-index of the toggle button to 2 */
  }

  /* Change the style for the nav toggle button icon */
  nav .toggle-icon {
    display: block; /* Show the toggle button icon */
    position: absolute; /* Position the toggle button icon absolutely */
    top: 10px; /* Set the top position of the toggle button icon to 10px */
    right: 20px; /* Set the right position of the toggle button icon to 20px */
    width: 30px; /* Set the width of the toggle button icon to 30px */
    height: 30px; /* Set the height of the toggle button icon to 30px */
    background-color: plum; /* Set the background color of the toggle button icon to dark gray */
    border-radius: 50%; /* Make the toggle button icon round */
    z-index: 1; /* Set the z-index of the toggle button icon to 1 */
  }

  /* Change the style for the nav toggle button icon bars */
  nav .toggle-icon span {
    display: block; /* Display the toggle button icon bars as blocks */
    position: absolute; /* Position the toggle button icon bars absolutely */
    width: 18px; /* Set the width of the toggle button icon bars to 18px */
    height: 2px; /* Set the height of the toggle button icon bars to 2px */
    background-color: white; /* Set the background color of the toggle button icon bars to white */
    border-radius: 2px; /* Make the toggle button icon bars round */
    left: 6px; /* Set the left position of the toggle button icon bars to 6px */
    transition: 0.3s; /* Add some transition effect to the toggle button icon bars */
  }

  /* Change the style for the nav toggle button icon bar 1 */
  nav .toggle-icon span:nth-child(1) {
    top: 6px; /* Set the top position of the toggle button icon bar 1 to 6px */
  }

  /* Change the style for the nav toggle button icon bar 2 */
  nav .toggle-icon span:nth-child(2) {
    top: 13px; /* Set the top position of the toggle button icon bar 2 to 13px */
  }

  /* Change the style for the nav toggle button icon bar 3 */
  nav .toggle-icon span:nth-child(3) {
    top: 20px; /* Set the top position of the toggle button icon bar 3 to 20px */
  }

  /* Change the style for the nav toggle button icon bars when checked */
  nav .toggle:checked ~ .toggle-icon span {
    background-color: #555; /* Set the background color of the toggle button icon bars to lighter gray */
  }

  /* Change the style for the nav toggle button icon bar 1 when checked */
  nav .toggle:checked ~ .toggle-icon span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 5px); /* Rotate and translate the toggle button icon bar 1 when checked */
  }

  /* Change the style for the nav toggle button icon bar 2 when checked */
  nav .toggle:checked ~ .toggle-icon span:nth-child(2) {
    opacity: 0; /* Set the opacity of the toggle button icon bar 2 to 0 when checked */
  }

  /* Change the style for the nav toggle button icon bar 3 when checked */
  nav .toggle:checked ~ .toggle-icon span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -5px); /* Rotate and translate the toggle button icon bar 3 when checked */
  }
}