

nav{
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    box-shadow: 0 4px 16px 0 rgba(0,0,0,.15);
	z-index: 1;
}

.nav-block-prime{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.navlist-menu {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-grow: 1;
	justify-content: space-between;
}
.navtoggle{
	display: none;
}

.nav-subbar{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 2.3em;
    font-weight: bold;
    height: 3em;
    background-color: #F9E4C0;
    color: #157B62;
    padding-left: 2.6em;
}

.nav-subbar a {
	color: var(--accent-green);
	
    text-decoration: none;
    transition: 0.2s background-color;

    font-size: 0.8em;
    font-weight: lighter;
    
	padding: 0.5em;
}

.nav-subbar-header{
	color: var(--accent-green);
	border-bottom: solid 2px var(--accent-green); 
	padding-right: 2em;
	min-width: 8em;
	margin-bottom: 0.4em;
	padding-bottom: 0.4em;
	padding-left: 0.1em;

	font-weight: bold;
}

.navlist {
    display: flex;
    flex-direction: row;
    padding: 0;
    
    height: 4em;
    align-items: center;
    
    list-style: none;
    line-height: 2em;
    gap: 0.9em;
    
}
.navlist li {
    margin: 0em 0.9em 0em 0.2em;
    
}

.navlist a {
    text-decoration: none;
    transition: 0.2s background-color;

    font-size: 1.2em;
    font-weight: lighter;
    
	padding: 0.5em;
}

.nav-active{
	background-color: var(--back-accent);
	padding: 0.5em;

	border-radius: 0.3em;
}
.nav-selector-icon{
	width:20px;
	height:2px;
	box-shadow:inset 0 0 0 32px,0 -6px,0 6px;
	margin:16px 7px
}

.nav-selector{
	width:24px;
	height:24px;
    margin: 2px 2px;
}

.navlist-host {
	display: flex;
	flex-direction: column;
}

.navtitle {
    font-size: 2.2em;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.nav-user-name{
	border: 2px solid #157B62;
	border-radius: 1.8em;
	text-align: center;
	white-space: nowrap;
}


@media only screen and (max-width: 412px) {
	nav{
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 0;
		box-shadow: 0 4px 16px 0 rgba(0,0,0,.15);
		z-index: 1;
	}
	
	.nav-block-prime {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.side-image {
		display: none;
	}

	.navtitle {
		padding: 0.2em;
	}
    
	.navtoggle{
		display: flex;
		cursor: pointer;
		margin-left: auto;
		margin-right: 0.5em;
	}

	.navlist-menu {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-grow: 1;
		justify-content: space-between;
	}

	.navlist-host {
		display: none;
		width: 100%;
		
		margin: 0;
	}

	.navlist {    
		padding: 0;
		margin: 0;
		width: 100%;
		
		list-style: none;

		display: contents;
    
		padding: 0;
		
		height: 4em;
		align-items: center;
		
		list-style: none;
		line-height: 2em;
		gap: 0.9em;
	}
	
	.nav-user-name {
		border: 0;
		border-radius: 0;
		text-align: center;
		white-space: nowrap;
	}
	
	.nav-selector-icon{
		width:20px;
		height:2px;
		box-shadow:inset 0 0 0 32px,0 -6px,0 6px;
		margin:16px 7px
	}
    
	.active {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

    /*
	.navlist {
		display: flex;
		flex-direction: row;
		padding: 0;
		margin: 0;
		
        height: 4em;
		width: 100%;
		
		list-style: none;
		line-height: 2em;
		
	}
	.navlist li {
		margin: 0em 0.9em 0em 0.2em;
		height: 100%;
	}
	.navlist li:last-child {
	    border-bottom: none;
	    margin-left: auto;
	   
	}
    .navlist a {
        text-decoration: none;
        transition: 0.2s background-color;
        
        display: block;
		width: 100%;
    }
    
}


@media only screen and (min-width: 1800px) {
	
	.navtitle {
		display: block;
	}
    
	.navlist {
		flex-direction: column;
	}
	.navlist li {
		margin: 0;
	}
    .navlist a {
		padding-left: 2em;
		padding-right: 2em;
		width: inherit;

		white-space: nowrap;
    }

	.navlist li:last-child {
		margin: 0;
	}
    */
}