nav.main_bar {
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    position: sticky;
    background-color: var(--nav-bg-color);
    z-index: 3;
}

nav.main_bar ul {
    margin: 0 auto;
    padding: 0;
    max-width: var(--bar-max-width);
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
}

nav.main_bar li {
    flex: 1 1 auto;
    text-align: center;
    padding: 16px;
}

nav.main_bar a {
    color: var(--nav-txt-color);
    font-weight: bold;
    text-decoration: none;
    font-size: 1em;
}

img.nav_icon {
    width: 32px;
    height: 32px;
}

@media (min-width: 600px){
    nav.main_bar ul {
	--underline-width: 30px;
	max-width: 600px;
    }
    nav.main_bar li {
	padding-bottom: 12px;
    }
    nav.main_bar a {
	margin: 8px 0;
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
    }

    nav.main_bar li:first-child {
	padding: 0;
    }

    nav.main_bar li:first-child a {
	margin: 0;
    }

    nav.main_bar li:first-child img.nav_icon {
	width: 56px;
	height: 56px;
    }

    nav.main_bar li::after {
	content: " ";
	display: block;
	width: 0px;
	height: 1px;
	margin: 0 auto;
	background-color: var(--nav-txt-color);
	position: relative;
	top: 2px;
    }

    nav.main_bar li:not(li:first-child):hover::after {
	width: var(--underline-width);
	animation-duration: 0.3s;
	animation-name: souligne;
	animation-direction: alternate;
    }
    @keyframes souligne {
	from {
	    width: 0px;
	}
	to {
	    width: var(--underline-width);
	}
    }

    nav.main_bar a > * {
	flex: 0 1 auto;
    }
}