#app, html, body {
  min-height: 100vh;
}

#app {
  .navbar {
    box-shadow: 0 0.3em @NvBClr, 0 0 0.3em 0.4em @NvBgClr;
  }

  footer.footer {
    box-shadow: 0 -0.3em @FoBClr, 0 0 0.3em 0.4em @FoBgClr;
  }
}

:focus {
  box-shadow: 0 0 0.4em 0.3em @FClr !important;
}

.flexgroup {
  > * {
    box-shadow: 0 0 0.2em 0.1em @BClr;
    &a, &a:visited {
      box-shadow: 0 0 0.2em 0.1em @LClr;
      &:hover {
        box-shadow: 0 0 0.2em 0.1em @LHClr;
      }
    }
  }
}

.postlist-style-flex, .flexgroup {
  > * {
    box-shadow: 0 0 0.2em 0.1em @BClr;
    &a, &a:visited {
      box-shadow: 0 0 0.2em 0.1em @LClr;
      &:hover {
        box-shadow: 0 0 0.2em 0.1em @LHClr;
      }
    }
  }
}


.sidebar-button {
    cursor: pointer;
}


.sidebar {
  box-shadow: 0 0 @SdBClr, -0.3em 0.1em 0.2em 0.3em @NvBgClr;
}

a.fasvglink, a:visited.fasvglink {
  svg {
    fill: @BtnTClr;
  }

  &.email svg {
    fill: @SEmailClr;
  }

  &.contact svg {
    fill: @SContactClr;
  }

  &.facebook svg {
    fill: @SFacebookClr;
  }

  &.github svg {
    fill: @SGithubClr;
  }

  &.google svg {
    fill: @SGoogleClr;
  }

  &.linkedin svg {
    fill: @SLinkedinClr;
  }

  &.pinterest svg {
    fill: @SPinterestClr;
  }

  &.reddit svg {
    fill: @SRedditClr;
  }

  &.rss svg {
    fill: @SRssClr;
  }

  &.soundcloud svg {
    fill: @SSoundcloudClr;
  }

  &.stackOverflow svg {
    fill: @SStackOverflowClr;
  }

  &.twitter svg {
    fill: @STwitterClr;
  }

  &.mastodon svg {
    fill: @SMastodonClr;
  }

  &.diaspora svg {
    fill: @SDiasporaClr;
  }

  &.youtube svg {
    fill: @SYoutubeClr;
  }

  &:hover {
    -webkit-transform: scale(1.3em);
    transform: scale(1.3em);
    svg {
      fill: @BtnAClr !important;
    }
  }
}

svg.fasvg {
  fill: @TClr;
}

ul.social {
  font-size: 0.9em;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;

  > li {
    margin: 0.5em;
    flex-basis: min-content;
    flex-grow: 0;
    list-style: none;
  }
}

@media print {
  #app {
    .navbar {
      box-shadow: none;
    }

    footer.footer {
      box-shadow: none;
    }
  }
  main.content {
    column-count: 2;
    column-gap: 3em;
    column-rule: solid 0.2em @BClr;
  }
}