html {scroll-behavior:smooth; padding:2px;}
body {font-family: Verdana, Tahoma, sans-serif; background-color:#444; color:#DDD; margin:0;}

a {text-decoration:none; color:#CCC;}

nav {display:flex; background-color:#000a; color:#444; font-size:1.25rem; transform:translateY(0); opacity:1; transition:.5s all;}
nav div.brand {flex: 0 1 auto;}
nav div.brand div.logo {padding:1.5rem;}
nav div.brand div.logo img {}
nav div.brand div.toggle {padding:1.5rem; display:none;}
nav ul.navlist {flex: 1 1 auto; list-style:none; padding:0; margin:0; text-align:right;}
nav ul.navlist li {display:inline-block; margin-left:1.2rem;}
nav ul.navlist li a {display:block; padding:1.5rem;}

div#container {height:1200px; padding:4rem 0;}

@media screen and (min-width:650px) {
	nav {flex-direction:row; padding:0 2rem;}
}
@media screen and (max-width:649px) {
	nav {flex-direction:column; padding:0;}
	nav div.brand {display:flex; flex-direction:row;}
	nav div.brand div.logo {display:block; flex: 1 1 auto; /*text-align:center;*/}
	nav div.brand div.toggle {display:inline-block; flex: 0 1 auto; text-align:center;}
	nav ul.navlist {display:block; text-align:center; height:0; overflow-y:hidden;}
	nav.active ul.navlist {height:auto;}
	nav ul.navlist li {display:block; margin:0;}
}

body.orig nav {transform:translateY(-100%); opacity:0;}