footer { width: 100%; display: grid; color: white; position: sticky; overflow: hidden; align-items: stretch; height: var(--running-size); grid-template-rows: var(--running-size); background-color: var(--color-accent); grid-template-columns: repeat(2, 1fr); } /* ### Nav */ footer nav { display: flex; align-items: center; padding: var(--padding); justify-content: baseline; } footer nav:last-of-type { justify-content: end; gap: calc(var(--padding) / 2); } /* ### Spacer */ footer nav > div { width: 2px; height: 80%; margin: 0 var(--padding); background-color: rgba(0, 0, 0, .07); } /* ### Buttons */ footer button.inline:not(.solid):hover, footer button.inline { fill: white; color: white; } footer button.inline.solid { color: var(--color-accent); background-color: white; }