@import url("slackwise.css");

:root {
  --backdrop-color: #444;
  --box-shadow: 0 0 20px 2px rgba(0,0,0,.5);
  --box-border: 1px solid #DDD;
  --sidebar-margin-top: calc(var(--us-letter-margin) * 2);
  --max-sidebar-width: 260px;
  /* --max-sidebar-width: calc(var(--us-letter-width) / 2); */
  --max-sidebar-height: calc(100dvh - var(--us-letter-margin) * 2);
}

body { 
  background-color: var(--backdrop-color);
  margin: 0;
  display: grid;
  grid-template-areas:
    "...   ......  ....    .....   ..."
    "...   header  main    aside   ..."
    "...   ......  main    .....   ..."
    "...   ......  footer  .....   ...";
  grid-template-columns: 1fr minmax(auto, var(--max-sidebar-width)) auto auto 1fr;
  grid-template-rows: var(--us-letter-margin) var(--max-sidebar-height) 1fr max-content;
  column-gap: var(--content-padding);

  > header {
    grid-area: header;
    position: sticky; 
    top: var(--sidebar-margin-top);
    height: var(--max-sidebar-height);
    display: flex;
    justify-items: right;
    flex-direction: column;
    margin-top: var(--us-letter-margin);
    color: var(--background-color);
    > div#logo {
      text-align: right;
      align-self: top;
      display: flex;
      justify-content: right;
      align-items: center;
      gap: 0.5em;
      > img {
        height: 35px;
        width: 35px;
      }
      h1 {
        font-size: 120%;
      }
      p {
        font-size: 80%;
        color: #BBB !important; /* MAKE RELATIVE via darken() */
      }
    }
    > nav {
      align-self: top;
      text-align: right;
      > h2 {
        display: none;
      }
      > ul {
        list-style-type: none;
        display: flex;
        flex-direction: column;
        gap: var(--content-padding);
        font-size: var(--title-font-size);
        font-family: var(--title-font);
      }
      & a {
        color: var(--background-color);
      }
      & a:visited {
        color: var(--background-color);
      }
    }
    > section#thesis {
      order: 99;
      align-self: flex-end;
      margin-top: auto;
      color: #BBB;
      > p {
        font-size: 80%;
        max-width: var(--max-sidebar-width);
      }
    }
  }
  > main {
    grid-area: main;
    background-color: var(--background-color);
    box-shadow: 6px 6px 10px rgba(0,0,0,0.2), -6px 6px 10px rgba(0,0,0,0.2);
    > article:first-of-type {
      /* margin-top: 0; */
    }
  }
  > aside {
    grid-area: aside;
    position: sticky; 
    top: var(--sidebar-margin-top);
    height: var(--max-sidebar-height);
    justify-self: left;
    align-self: top;
    color: var(--background-color);
    > :first-child {
      /* margin-top: var(--us-letter-margin); */
    }
  }
  > footer {
    grid-area: footer;
    margin-top: var(--content-padding);
    margin-left: var(--us-letter-margin);
    margin-bottom: calc(var(--us-letter-margin) / 2);
    color: var(--subtitle-color);
    a {
      color: var(--subtitle-color);
    }
    a:visited {
      color: var(--subtitle-color);
    }
  }
}