body {
  background: #e8fff8;
  color: #053a68;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0; }
  body header.menu {
    display: flex;
    flex-direction: row;
    background: #004548;
    color: white;
    padding: 5px; }
    body header.menu a.link {
      padding: 10px;
      display: block;
      color: white;
      transition: all .5s ease;
      border-radius: 10px; }
      body header.menu a.link:hover {
        background: #00767b; }
  body main {
    flex: 2 0; }
    body main aside {
      float: left;
      width: 20%;
      min-width: 300px;
      margin-right: 20px;
      border: #004548 2px solid;
      background: #b0ccb0;
      color: #053a68; }
      @media (max-width: 600px) {
        body main aside {
          margin-right: unset;
          min-width: unset;
          width: calc(100% - 4px);
          float: unset; } }
    body main figure {
      display: inline-block;
      border: 1px #cccccc solid;
      padding: 4px;
      width: fit-content; }
      body main figure figcaption {
        background-color: black;
        color: white;
        font-style: italic;
        padding: 2px;
        text-align: center; }
  body footer.foot {
    display: flex;
    flex-direction: row;
    background: #004548;
    color: white; }