@use './cms/navbar';
@use './cms/footer';
@use './cms/blog';
@use './cms/cards';

body.for-cms {
  background: var(--cms-bg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  display: flex;
  min-height: 100vh;
  flex-direction: column;

  > noscript,
  > .cms-main {
    flex: 1;
  }
}

body.for-cms .footer,
.cms-navbar,
.cms-main {
  margin: 0 auto;
  padding: var(--gutter);
  width: var(--content-max-width);
  max-width: 100%;
}

.cms-main {
  padding-top: 0;

  a:hover {
    text-decoration: none;
  }

  h2 {
    padding-bottom: 0.3rem;
    padding-top: 1.5rem;
    margin-top: 2rem;
  }

  blockquote {
    background: var(--syntax-hl-base-bg);
    color: var(--syntax-hl-base);
    font-style: italic;
    margin: var(--gutter) 0;
    padding: var(--gutter-small);
    position: relative;
    quotes: "\201C""\201D""\2018""\2019";

    &:before {
      content: open-quote;
      font-size: 3em;
      position: absolute;
    }

    p {
      margin: var(--gutter-small) 0 0 2rem;
    }
  }

  code {
    background: var(--syntax-hl-base-bg);
    padding: 2px 4px;
  }

  img {
    border-radius: 2px;
    box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2);
  }
}

.toc a {
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}
