@import "_colours";

.article {
  p,
  li {
    a {
      font-weight: normal;
      text-decoration: underline;
      word-wrap: break-word;
    }

    code {
      color: #a5d6ff;
    }
  }

  picture img,
  p img {
    max-width: 100%;
    display: block;
  }

  code,
  pre {
    font-family: "Source Code Pro";
  }

  pre {
    padding: 10px;
    overflow: auto;

    mark {
      display: block;
      background-color: rgba(254, 252, 232, 0.9);
    }

    table {
      width: 100%;
      border-collapse: collapse;

      td {
        padding: 0;
      }

      td:nth-of-type(2) {
        padding-left: 15px;
      }

      td:nth-of-type(1) {
        text-align: right;
        user-select: none;
        padding-right: 10px;
        border-right: 3px solid #c0c5ce;
      }
    }
  }

  .header-link {
    display: inline-block;
  }

  h1 {
    display: flex;
    justify-content: space-between;

    @media screen and (max-width: 450px) {
      display: block;

      .home-link {
        display: block;
      }
    }

    .home-link {
      font-size: 0.5em;
      color: $body-color;
    }
  }

  .note {
    line-height: inherit;
    margin: 1.25em 0;
    padding: 6px 12px;
    display: flex;
    gap: 12px;
    border-left: 1px solid $heading-color;

    .icon svg {
      height: 1.3em;
      display: flex;
      align-items: center;
      color: $heading-color;
    }

    p {
      margin-top: 0;
    }

    p:last-child {
      margin-bottom: 0;
    }
  }
}