div.nav-selector {
	padding: 10px;
	width: calc(100%-20px);

	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

div.nav-selector button {
	position: relative;
	border: none;
	background: none;
	font-size: 15px;
	transition: 0.3s;
	margin: 5px;

	font-family: 'Michroma', sans-serif;

	--slider-pos-top: 0px;
	--slider-pos-left: 0px;

	--slider-width: 0px;

	text-decoration: underline 2px #b8db1d00;
}

div.nav-selector button:hover {
	transition: 0.3s;
	text-decoration: underline 2px #b8db1dff;
}

div.nav-selector button.select-nav:hover {
	transition: 0.3s;
	text-decoration: underline 2px #b8db1d00;
}

div.nav-selector button::before {
	content: "";
	position: absolute;
	top: var(--slider-pos-top);
	left: var(--slider-pos-left);
	width: var(--slider-width);
	height: 100%;
	background: transparent;
	z-index: -1;

	border-radius: 7px;
}

div.nav-selector button.select-nav::before {
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background:
		repeating-linear-gradient(0.17turn, transparent, transparent 10px, #82af3355 10px, #82af3355 16px),
		linear-gradient(0.25turn, #b8db1d, #8bbd33);
	z-index: -1;

	border-radius: 7px;

	animation: 0.4s linear 0s move_slider;
}

@keyframes move_slider {

	from { 
		top: var(--slider-pos-top);
		left: var(--slider-pos-left);
		width: var(--slider-width);
		opacity: 1;
	}

	50% {
		width: 110%;
	}

	to {
		top: 0px;
		left: 0px;
		height: 100%;
		width: 100%;
		opacity: 1;
	} 
}

div.nav-selector button.select-nav {
	transition: 0.3s;
	color: white;
}

div.main-panel {
	position: relative;
	--id-pointer: 0%;

	overflow: hidden;
}

div.main-panel img {
	position: absolute;
	height: 100%;
	width: 100%;

	transform: translateX( calc( var(--id-pointer) - var(--slide) ) );

	object-fit: scale-down;

	transition: 0.7s;
}