@import './fonts.css';
@import './colors.css';
@import './code_snippets/index.css';

:root {
  --default-font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
  margin: 0;

  background-color: var(--dark-blue);
  color: var(--gray-300);

  font-family: var(--default-font), sans-serif;
  font-size: 1rem;

  line-height: 1.5rem;
  letter-spacing: 0.0625em;

  .body-main-content {
    box-sizing: border-box;
    padding: 0 1rem;
  }

  .body-full-screen-width {
    /*height: 100dvh;*/
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--forest-green);
  }

  a {
    color: var(--teal);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
  }

  a:hover,
  a:focus {
    color: var(--primary);
  }

  .image-caption {
    color: var(--primary);
  }

  .page-timestamp {
    color: var(--primary);
    font-weight: 700;

    .updated-at {
      color: var(--gray-300);
      font-size: 0.875rem;
      font-weight: 500;
    }
  }

  blockquote {
    background-color: var(--forest-green);
    border-radius: 4px;
    font-size: 0.875rem;
    padding: 2px 5px;

    p {
      margin: 0;
    }
  }
}