@import url(https://fonts.googleapis.com/css?family=Noto+Serif);:root{--logo-size:100px;--title-size:2em}body{color:#212121;background-color:#fafafa;font-family:Noto Serif,Serif}main{display:grid;align-content:center;justify-content:center;grid-template-rows:auto auto 1fr auto;grid-template-areas:"header" "navigation" "content" "footer";border:10px solid #000;min-height:calc(95vh - 10px)}header{grid-area:header}nav{grid-area:navigation}footer{grid-area:footer}.content{grid-area:content}footer ul,header,nav ul{display:-webkit-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;justify-content:center;vertical-align:center;flex-direction:row;list-style:none}#menu-item{display:none}header h1{font-size:2em;font-size:var(--title-size)}.box{flex:0 1 100px;flex:0 1 var(--logo-size);margin:5px}.logo{width:100px;width:var(--logo-size)}footer{align-content:center}.navigation-item,.navigation-list{padding:0 5px}.navigation{list-style:none}@media screen and (min-width:400px){#menu-item{display:inline}nav ul{flex-direction:row}.menu-button{display:none}}.menu-button{padding:10px}