/* Global styles */
:root {
  --linen: #f5ebe0;
  --umber: #6c584c;
  --champagnePink: #e3d5ca;
  --timberwolf: #d6ccc2;
  --isabelline: #edede9;
}

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

body {
  line-height: 1.5;
  background-color: var(--linen);
  font-family: "Ubuntu", sans-serif;
  min-height: 100vh;
  padding-top: 4rem; /* Adjust this value to match your navbar's height */
  padding-bottom: 1rem;
}

/* Navigation bar styling */
nav {
  z-index: 1000;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  border: 1px solid var(--umber);
  background-color: var(--linen);
}

ul.navBar {
  list-style-type: none;
  display: flex;
  align-items: center; /* Vertically centers items in the nav bar */
}

.navBar li {
  padding: 0.8rem 1rem;
  font-size: 1.5rem;
}

.navBar li:hover {
  background-color: var(--umber);
}

.navBar li a {
  text-decoration: none;
  color: black;
}

.navBar li:hover a {
  color: white;
}

#navBarName {
  margin-left: auto; /* Pushes this item to the far right */
  font-weight: bold;
}

/* Responsive design */
@media (max-width: 768px) {
  body {
    padding-top: 2rem; /* Adjusted padding for mobile */
  }

  .navBar li {
    font-size: 1rem;
    padding: 0.2rem 0.5rem;
  }

  #navBarName {
    font-size: 1rem;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .navBar li {
    font-size: 1.5rem;
    padding: 0.5rem 0.8rem;
  }

  #navBarName {
    font-size: 1.5rem;
  }
}