.navbar {
    background: rgba(3, 2, 7, 1);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 1000;
    padding: 0.5rem 0;
}

.navbar ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 0rem;
    margin: 0;
    padding: 0;
    margin-top: 0.25rem;
}

.navbar li {
    display: inline;
    margin: 0 1rem;
}

.navbar a {
    color: rgb(220, 220, 220);
    text-decoration: none;
    font-family: 'Space Mono';
    font-size: 1rem;
    transition: color 0.2s;
    position: relative;
}

.navbar li:first-child {
    margin-right: auto;
}

.navbar li:not(:first-child) {
    margin-left: 0rem;
    text-align: left;
}

.navbar a:hover,
.navbar a:focus {
    color: #d3af37;
}

/* Mobile layout: title on left in two lines; right links stacked and aligned with each line */
@media (max-width: 600px) {
  .navbar ul {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
    align-items: start;
    column-gap: 0.75rem;
    row-gap: 0.15rem;
    width: 100%;
  }

  .navbar li:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-width: 0;
    margin-left: 1rem;   /* keep left margin */
  }

  .navbar li:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin-right: 1rem;  /* match left margin of first li */
  }

  .navbar li:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    margin-right: 1rem;  /* match left margin of first li */
  }

  .navbar li:nth-child(2) a,
  .navbar li:nth-child(3) a {
    white-space: nowrap;
    text-align: right;
  }
}

@media (max-width: 600px) {
  .navbar li:first-child .break {
    display: block;   /* forces line break */
  }
}