.nav-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--box-bg-color);
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--nav-border-color); 
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  
  .nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
  }
  
  .nav-links li a {
    text-decoration: none;
    color: var(--text-color);
    font-size: 20px;
    transition: color 0.3s;
  }
  
  .nav-links li a:hover {
    color: #b39292;
  }

  .button-wrapper {
    display: flex;
    justify-content: center;      
    height: 100px;        
    gap: 1.5rem;  
  }

  .nav-links li:not(:last-child) a::after {
    content: "|"; 
    color: var(--text-color);
    text-decoration: none; 
    font-size: 20px; 
    padding-left: 1.5rem;
    display: inline-block; 
  }

    .button-19 {
      align-items: center;
      appearance: none;
      background-color: var(--bg-color);
      border-radius: 24px;
      border-style: none;
      box-sizing: border-box;
      color: var(--text-color);
      cursor: pointer;
      fill: currentcolor;
      font-family: "Google Sans",Roboto,Arial,sans-serif;
      font-size: 11px;
      font-weight: 500;
      height: 48px;
      letter-spacing: .25px;
      line-height: normal;
      max-width: 100%;
      overflow: visible;
      padding: 2px 18px;
      text-transform: none;
      transition: transform 270ms cubic-bezier(0, 0, .2, 1) 0ms;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      width: auto;
      will-change: transform,opacity;
      z-index: 0;
      border: 2px solid var(--nav-button-border-color);
    }

    .button-19:hover {
      background-color: var(--button-bg-color);
      color: var(--button-text-color);
      border: 1px var(--nav-button-border-color);
    }
    
    .button-19:active {
      outline: none;
    }
    
    .button-19:focus {
      outline: none;
      border: 2px solid var(--nav-button-border-color);
    }