body {
  font-family : "Roboto";
  font-weight : 400;
  background-color : #deefff;
}
header {
  padding : 20px;
  margin : 4px;
  text-align : center;
  border : 10px white double;
  border-radius : 20px;
  background-color : dodgerblue;
  color : white;
}
main {
  margin : 6px;
  padding : 18px;
  border : solid 5px #abbcee;
  border-radius : 15px;
  background-color : #cddeff;
  color : darkblue;
}
footer {
  font-size : 10pt;
  padding : 30px;
  margin : 24px;
  text-align : center;
  background-color : darkblue;
  color : white;
}
nav {
  text-align : center;
  background-color : #abbcee;
  border-radius : 20px;
  color : white;
  padding : 8px;
  margin-left : 120px;
  margin-right : 120px;
}
nav > a {
  background-color : navy;
  color : white;
  padding : 10px;
  margin : 4px;
  border : solid 3px;
  border-radius : 5px;
}
nav > a:hover{
  background-color : #01021d;
  color : #e1e2ff;
}
section {
  padding : 1em;
  margin : 3px;
  color : navy;
  border-top : 4px solid navy;
  border-bottom : 4px solid navy;
  border-radius : 10px;
  font-weight : 500;
}
article {
  float : left;
  max-width : 70%;
  margin : 4px;
  border-top : 2px dashed;
  border-bottom : 2px dashed;
  color : #0000b0;
}
figure {
  float : right;
  border : solid 5px white;
  background-color : black;
  padding : 6px;
}
figcaption {
  max-width : 200px;
  text-align : center;
  color : white;
  font-weight : 500;
  font-size : 10pt;
}
.clear-fix::after{
  content : "";
  clear : both;
  display : table;
}