, *:before, *:after {
  box-sizing: border-box;
}
  html {font-size: 120%;}

body {
  background-color: Lavender;font-size: 1.3rem;padding: 0.8rem;font: 100%/1.3 Verdana, Arial, Helvetica, sans-serif;
}
.container {display: flex; flex-wrap: wrap; overflow-y: scroll; margin: 0 auto 0 auto; width: 90%; max-width: 65rem;}
header, main, footer, nav {width: 100%;display: flex;justify-content:space-between;}
header, nav ul{margin: 0;}
header {background-color: lightsteelblue;width: 100%;color:dodgerblue;}
.callout {font:Arial, Helvetica, sans-serif;padding: 1rem;}

.imgleft{float:left;}
.imgright{float: right;}
article {margin: auto; padding: 1.5rem;}
nav {background-color: dodgerblue; color: white;}
nav ul {padding: 0.4rem;display:flex;}
nav ul li {list-style-type: none; display: inline-block;}
nav ul a {padding: 0.5rem; color: white;font-size: 1rem; text-decoration: none;}
main{padding: 0.5rem;flex-wrap:wrap; background-color: lightsteelblue;}
.content{width: 70%; margin: 1rem; padding: 0.5rem;}
aside {display: block; flex-basis: 1; text-align: left; padding: 0.5rem; margin: 0.5rem;background-color: lightsteelblue;}
footer {background-color: dodgerblue;color: white;}
.imgleft, ul li {margin: 0.7rem;}
.imgright {margin: 0.5rem;}
div {margin: 0.3rem; padding: 0.3rem;}


@media (min-width:200px) and (max-width:1500px) {
  html {
    font-size: 100%;
  }
header{font-size: 0.5rem;height: auto;}

  .imgleft {max-width: 100%;}
  .imgright { max-width: 100%; }
body{font-size: 0.8rem;}
div {margin: 0rem; padding: 0rem;}
  .callout {
    font-size: 0.5rem;
    padding: 0.2rem;
  }
  nav {text-align: center; width: 100%; padding: 0.1rem;}

  nav ul {
    padding: 0rem;
  }
  nav ul a {padding: 0rem; color: white;font-size: 0.6rem; text-decoration: none;}
  nav ul li {list-style-type: none; display: inline-block;}
  .content{width: 100%; }
aside {
width: 100%;
font-size: 0.8rem;
margin: 0.3rem;
padding: 0.5rem;
}

  nav a:link, nav a:hover, nav a:active, nav a:focus {
    color: white;
  }

  main {width: 100%;
    flex: 1;
    padding: 0rem;
    margin: 0rem;border: 0.3rem;
  }

  main p {width: 100%;
    font-size: 1rem;
    line-height: 1.4;
  }
  footer {font-size: 0.5rem;margin: 0.3;padding: 0.3rem;}
  }