@charset "utf-8";

@layer reset, base, theme, content;

@import url("reset.css");

:root {
  --default-spacing: 1.75rem;
  --background-color: #dee2e6;
  --border-color: #e9ecef;

  @media (prefers-color-scheme: dark) {
    --background-color: #212529;
    --border-color: #495057;
  }
}

/* Base Layer */

@layer base {
  /* Spacing */

  address,
  blockquote,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  img,
  ol,
  p,
  table,
  ul {
    + * {
      margin-top: var(--default-spacing);
      /* border: 1px solid red; */
    }
  }

  address,
  blockquote,
  dd,
  dt,
  ol,
  p,
  ul {
    line-height: 1.5rem;
  }

  dl {
    dd {
      + dt {
        margin-top: calc(var(--default-spacing) / 2);
      }
    }
  }

  hr {
    height: calc(1rem / 20);
    background: var(--border-color);
  }

  /* Lists */

  dl,
  ol,
  ul {
    /* outline: 1px solid red; */
  }

  dl {
    dt {
      font-weight: bolder;
    }
  }

  /* Tables */

  table {
    th,
    td {
      padding: calc(var(--default-spacing) / 4);

      .bordered & {
        padding: calc(var(--default-spacing) / 2);
        border: 0.075rem solid var(--border-color);
      }

      &:first-of-type:not(.bordered &) {
        padding-left: unset;
      }

      &:last-of-type:not(.bordered &) {
        padding-right: unset;
      }
    }
  }

  th {
    font-weight: bolder;
  }
}

/* Theme Layer */

@layer theme {
  body {
    background: var(--background-color);
    font-family: system-ui, sans-serif;
    font-weight: lighter;
  }

  blockquote {
    border-left: 0.25rem solid var(--border-color);
    padding-left: 0.75rem;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: bolder;
  }

  h1 {
    font-size: 2.25rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  header,
  main > section {
    border: 0.075rem solid var(--border-color);
    background: #f8f9fa;
    border-radius: calc(var(--default-spacing) / 1.8);
    margin: var(--default-spacing);
    padding: var(--default-spacing);

    @media (prefers-color-scheme: dark) {
      background: #495057;
    }
  }

  footer {
    font-size: smaller;
    margin: calc(var(--default-spacing) + 0.075rem)
      calc(var(--default-spacing) * 2);
    text-align: center;
  }

  svg {
    path {
      fill: red;
    }
  }
}

/* Content Layer */

@layer content {
  #work {
  }

  #photography {
    div {
      columns: 3 200px;
      gap: 0.1rem; /* calc(var(--default-spacing) / 2); */

      img {
        display: block;
        margin-block-end: 0;
        margin-bottom: 0.1rem;
        margin-top: 0;

        max-width: 100%;
        border-radius: calc(var(--default-spacing) / 8);
      }
    }
  }
}