.navbar { display: grid; grid-template-columns: 1fr auto; margin: 0 auto; max-width: 48rem; padding: 1rem; } .navbar-list { display: flex; align-items: center; gap: 1rem; list-style: none; padding-left: 0; padding-right: 1rem; } .navbar-list-item { margin: 0; font-size: 2rem; &.home { margin-right: auto; } a { color: var(--color-green); text-decoration: none; } } .navbar-actions { display: flex; align-items: center; border-left: 1px solid var(--color-black); padding-left: 1rem; } button.navbar-theme-switcher { background-color: transparent; border-radius: 2px; border: 1px solid var(--color-white); padding: 0.5em; cursor: pointer; color: var(--color-white); &:hover { color: var(--color-green); border-color: var(--color-green); } }