#navbar {
	display: flex;

	margin-bottom: 20px;

	justify-content: space-between;
	gap: 15px;

	font-size: 30px;
}

#navbar > span {
	position: relative;

	padding: 10px;

	z-index: 0;
	text-align: center;

	flex-grow: 1;

	cursor: pointer;
	user-select: none;

	transition: color .1s;
	transition: scale .1s;
}

#navbar > span:nth-of-type(1) {
	--clippo: polygon(0px 7px, calc(100% - 1px) 0%, calc(100% - 8px) 100%, 5px calc(100% - 8px));
}
#navbar > span:nth-of-type(2) {
	--clippo: polygon(5.7px 4px, calc(100% - 5px) 10px, 100% calc(100% - 6.5px), 0px calc(100% - 4px));
}
#navbar > span:nth-of-type(3) {
	--clippo: polygon(0px 5px, 100% 1px, calc(100% - 5px) calc(100% - 2px), 6px calc(100% - 6px));
}

#navbar > span:before, #navbar > span:after {
	content: "";

	display: block;
	position: absolute;

	height: 100%;
	width: 100%;
	top: 0;
	left: 0;

	z-index: -1;

	opacity: 0.55;

	clip-path: var(--clippo);

	transition: opacity .1s;
}
/* Inner */
#navbar > span:after {
	box-shadow: inset 0px 0px 15px black;
	background-color: #3a6c80;
}
/* Border */
#navbar > span:before {
	height: calc(100% + 10px);
	width : calc(100% + 10px);
	top : -5px;
	left: -5px;

	background: linear-gradient(180deg, #84b0bf, #3d7b9a);
}

#navbar > span.navbar_selected {
	color: #edd955;
	cursor: default;
}
#navbar > span.navbar_selected:before, #navbar > span.navbar_selected:after {
	opacity: 1;
}


#navbar > span:not(.navbar_selected):hover, #navbar > span:not(.navbar_selected):focus-visible {
	transform: scale(1.03);
	color: #edd955;

	transition: color .1s;
	transition: scale .1s;
}
#navbar > span:not(.navbar_selected):hover:before,         #navbar > span:not(.navbar_selected):hover:after,
#navbar > span:not(.navbar_selected):focus-visible:before, #navbar > span:not(.navbar_selected):focus-visible:after {
	opacity: 0.8;

	transition: opacity .1s;
}
#navbar > span:not(.navbar_selected):active {
	transform: scale(1.06);

	transition: scale .1s;
}
#navbar > span:not(.navbar_selected):active:before, #navbar > span:not(.navbar_selected):active:after {
	opacity: 0.9;

	transition: opacity .1s;
}