#navigationBar { align-items: center; background-color: #00000000; display: flex; gap: 1rem; justify-content: center; left: 50vw; padding: 1rem; position: absolute; top: 0; transform: translateX(-50%); user-select: none; width: 100vw; z-index: 1; body.about & { --foregroundColour: #FFFFFF; } body.benoit & { --foregroundColour: #FFFFFF; } body.bowshock & { --foregroundColour: #FFFFFF; } body.bzipper & { --foregroundColour: #B4202D; } body.eas & { --foregroundColour: #00291B; } body.luma & { --foregroundColour: #FFFFFF; } body.pollex & { --foregroundColour: #FFFFFF; } a { color: var(--foregroundColour); font-weight: bold; text-decoration-color: #00000000; transition: text-decoration-color 0.125s; &:hover { cursor: pointer; } &:hover { text-decoration-color: var(--foregroundColour); transition: text-decoration-color 0.125s; } } .separator { background-color: var(--foregroundColour); border-radius: 0.25rem; height: 0.25rem; width: 1rem; } }