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