body {
  background: #e8fff8;
  color: #053a68;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0; }
  body header.menu {
    height: calc(50px - 10px);
    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;
    max-height: calc(100vh - 100px);
    max-width: 100vw;
    overflow: auto; }
    body main div.submain {
      margin: 20px;
      height: fit-content; }
      body main div.submain:has(> aside) {
        margin: 0px; }
        body main div.submain:has(> aside) aside {
          padding-left: 20px;
          height: 100%; }
  body footer.foot {
    display: flex;
    flex-direction: row;
    background: #004548;
    color: white;
    height: 50px !important; }
    body footer.foot a.link {
      padding: 10px;
      display: block;
      color: white;
      transition: all .5s ease;
      border-radius: 10px; }
      body footer.foot a.link:hover {
        background: #00767b; }
  body aside {
    float: left;
    width: 600px;
    background: #00d8e1;
    margin-right: 20px; }
    body aside div.inside {
      position: sticky;
      top: 0px; }
    @media screen and (max-width: 600px) {
      body aside {
        width: 100%;
        margin: 0;
        float: unset; } }
  body .imgAsideAside img {
    max-width: calc(95vw - 600px);
    max-height: 600px;
    width: auto;
    height: auto; }
  body figure {
    float: left;
    margin: 0;
    width: min-content; }
    body figure figcaption {
      width: 100%;
      background: black;
      color: white;
      text-align: center; }