path: root/css/navigationBar.scss

#navigationBar {
	align-items:             center;
	backdrop-filter:         blur(1rem);
	background-color:        $textColour;
	background-color:        color-mix(in srgb, $textColour, transparent 75%);
	border-top-left-radius:  1rem;
	border-top-right-radius: 1rem;
	color:                   $backgroundColour;
	display:                 flex;
	gap:                     0.25rem;
	justify-content:         center;
	left:                    50vw;
	padding:                 1rem;
	position:                fixed;
	top:                     100vh;
	transform:               translate(-50%, -1rem);
	transition:              0.25s;
	z-index:                 1;

	&:hover {
		background-color: $textColour;
		transition:       0.25s;
		transform:        translate(-50%, -100%);
	}

	a {
		font-weight:     bold;
		text-decoration: none;

		&, &:visited {
			color: $backgroundColour;

			&:first-of-type {
				color: $achernarColour;
			}
		}
	}

	.groupSeparator {
		background-color: $backgroundColour;
		border-radius:    0.25rem;
		height:           0.25rem;
		width:            0.75rem;
	}

	.elementSeparator {
		background-color: $backgroundColour;
		border-radius:    100%;
		height:           0.25rem;
		width:            0.25rem;
	}
}