* {
  box-sizing:border-box; 
}
body {
  min-height:100vh;
  min-width:400px;
  max-width:1350px;
  margin:0 auto;
  font-size:19px;
  font-family:-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  line-height:1.5em;
}
article, nav, aside{
  padding:5px 20px;
}
h2{
  font-size:120%;
}
header>h1{
  padding:1em 20px;
  color:red;
  font-size:150%;
  line-height:1.1em;
}
header>img{
  margin:5px;
  height:100%;max-height:10em;
  width:auto;
}
aside>h2{
  color:red;
}
img.right{
  float:right;
}
img.small{
  width:128px;margin-right:15px;
}
p.alert{
  padding:0.5em;
  background-color:#ff5f5b;
}

@media all and (min-width:800px){
  body{
    display:flex;
    flex-direction:column;
  }
  header, footer{
    height:9em;
  }
  header>h1{
    font-size:2em;
  }
  main {
    display:flex;
    flex:1;
  }
  main > article {
    flex:1;
  }
  main > aside {
    flex:0 0 360px;
  }
}