body, html {
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
}

.article-container {
    flex-grow: 15;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
	position: relative;
	z-index: 1;
}

.nav-panel {
	position: relative;
	flex-grow: 1;
	width: 14rem;
	max-width: 17rem;
	flex-shrink: 0;
}

body {
	flex-direction: column;
}
.nav-panel {
	max-width: none;
	width: 100%;
	/* height: 3rem; */
	flex-grow: 0;
	z-index: 5;
}
/*
@media only screen and (max-width: 760px) {
    body {
		flex-direction: column;
	}
	.nav-panel {
		max-width: none;
		width: 100%;
		height: 3rem;
		flex-grow: 0;
		z-index: 5;
	}
} */

/* body, html {
    margin: 0;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.article-container {
    flex-grow: 4;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
	margin-left: 15rem;
}

.nav-panel {
	width: 15rem;
	position: fixed;
	height: 100vh;
}

@media only screen and (max-width: 720px) {
	.nav-panel {
		position: relative;
		height: 3rem;
		width: 100%;
	}
	.article-container {
		margin-left: 0;
	}
} */