@use "@/styles/variables";

.background {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100vh;
  background-image: url("/gradient-bg.webp");
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;
}

.container {
  @include variables.container(variables.$md);

  padding-bottom: 4rem;
}

.header {
  padding: 2rem 0;
  border-bottom: 1px solid var(--cmm-color-gray-2);

  h1 {
    font-weight: var(--cmm-font-weight-extrabold);
    font-size: var(--cmm-font-size-5xl);
  }

  .updatedAt {
    font-size: var(--cmm-font-size-sm);
    margin-top: 0.5rem;
  }
}

.content {
  margin-top: 2rem;

  *:where(h1, h2, h3, h4, table, code, img) {
    margin-top: 1.5em;
  }

  *:where(table, code, img) {
    margin-bottom: 2rem;
  }

  *:where(p, ul, ol) {
    margin-top: 1rem;
  }

  h1 {
    font-weight: var(--cmm-font-weight-bold);
    font-size: var(--cmm-font-size-4xl);
  }

  h2 {
    font-weight: var(--cmm-font-weight-bold);
    font-size: var(--cmm-font-size-3xl);
  }

  h3 {
    font-weight: var(--cmm-font-weight-bold);
    font-size: var(--cmm-font-size-2xl);
  }

  h4 {
    font-weight: var(--cmm-font-weight-bold);
    font-size: var(--cmm-font-size-xl);
  }

  .title {
    font-weight: var(--cmm-font-weight-extrabold);
    font-size: var(--cmm-font-size-5xl);
  }

  a {
    color: var(--cmm-color-primary-6);
    font-weight: var(--cmm-font-weight-medium);

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

  code {
    background-color: var(--cmm-color-gray-2);
    padding: 0.2em 0.3em;
    border-radius: var(--cmm-radius-md);
    font-family: var(--cmm-font-family-code);
    font-weight: var(--cmm-font-weight-semibold);
    font-size: var(--cmm-font-size-sm);
  }

  pre {
    code {
      display: block;
      background-color: black;
      color: white;
      padding: 1rem;
      border-radius: var(--cmm-radius-lg);
      font-weight: var(--cmm-font-weight-normal);
    }
  }

  blockquote {
    border-left: 0.2rem solid var(--cmm-color-gray-3);
    padding-left: 1em;
  }

  ul,
  ol {
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  ul {
    list-style: disc;
  }

  ol {
    list-style: decimal;
  }

  p {
    line-height: 1.7em;
  }
}
