@media (max-width: 699px) {
        div.page { 
                display: flex;
                flex-direction: column;
		width: auto;
		margin: 0 6px;
        }
	hgroup {
		width: auto;
	}
	hgroup img.logo {
		width: 80px;
		height: 80px;
	}
	header.main h1 {
		margin: 0  0 0 100px;
		font-size: 200%;
	}
	header.main h2 {
		margin: 0  0 0 100px;
		font-size: 120%;
	}

        section.main {
                width: auto;
                margin: 0;
        }
        section.main nav {
		margin: 0 0 1em;
		height: 2em;
	}

        section.sidebar {
                width: auto; 
                margin: 0;
                order: 99; 
        }    

	article.post {
		padding: 8px;
	}	

	section.comments {
		padding: 2px;
	}	

	section.comments img.avatar-60 {
		height: 20px;
		width: 20px;	
	}	

	div.comment {
		margin-left: 30px;
		padding-left: 10px;
	}


	article.post {
		width: auto;
		margin: 10px 0;
	}
}