@waymark-primary: rgba(180, 39, 20, 1); //#b42714
@waymark-grey-light: #eee;
@waymark-grey-dark: rgba(51, 51, 51, 1); //#333
@waymark-text: #333;
@waymark-link: #1e98bb;
@waymark-highlight: #54a322;

body {
  padding: 10px;
  // background: #0d1117;
  // color: @waymark-grey-light;
  font-family: "Noto Sans", Helvetica, Arial, sans-serif;
  font-size: 18px;

  /* Global Styles */
  img {
    max-width: 100%;
    max-height: 100%;
  }

  /* Header */
  header {
    border-bottom: 1px solid #ddd;
    background: #0d1117;

    span {
      color: @waymark-primary;
    }

    select {
      padding: 5px 10px;
      border: 1px solid @waymark-grey-light;
      border-radius: 3px;
      background: @waymark-grey-dark;
      color: @waymark-grey-light;
      font-size: 16px;

      option {
        background: @waymark-grey-dark;

        &:hover {
          background: @waymark-grey-light;
        }
      }
    }
  }

  /* Main */
  main {
    padding-top: 80px;

    .markdown-body {
      font-size: inherit;

      > p:first-child {
        font-size: 24px;
        line-height: 1.2em;
      }

      h1,
      h2,
      h3,
      h4 {
        margin: 0 0 10px 0;
        padding: 5px 0;
        border-bottom: 3px solid @waymark-grey-light;
        color: @waymark-primary;

        &:first-child {
          margin-top: 0;
          padding-top: 0;
        }

        a {
          color: @waymark-primary !important;

          text-decoration: none;
          border-bottom: none;
        }
      }

      h1:not(:first-child),
      h2:not(:first-child),
      h3:not(:first-child) {
        padding-top: 100px !important;
      }

      h3 {
        margin-bottom: 15px;
        // padding: 7px 0;
        border-bottom-width: 2px;
      }
      h4 {
        margin-bottom: 15px 0;
        padding: 5px 0;
        border-bottom-width: 1px;
      }
    }

    a {
      color: @waymark-link !important;
      border-bottom: 1px dotted @waymark-link;

      &:visited {
        color: darken(@waymark-link, 30%);
        border-bottom: none;
      }
    }

    p,
    td {
      code {
        display: inline-block;
        border: 1px dashed #ddd;
      }
    }

    blockquote {
      margin-top: 20px !important;
      // margin: 0 !important;
      padding: 20px !important;
      border-left: 4px solid @waymark-highlight !important;
      background: @waymark-grey-light;
      color: @waymark-text;
      p {
        overflow: hidden;
        font-size: 18px !important;

        span {
          margin-left: -5px;
          display: block;
          font-weight: bold;
        }
      }
    }

    pre {
      &.shiki.github-dark {
        font-size: 12px;

        code {
          span {
            margin-bottom: 2px;
          }
        }
      }
    }
  }

  /* Footer */
  footer {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #ddd;
    font-size: 14px;

    a {
      color: @waymark-text;
      text-decoration: none;
    }

    > div {
      display: flex;
      align-items: center;

      &.middle {
        justify-content: center;

        .waymark-icon-github {
          margin: 0 10px;
        }
      }
    }
  }
}

/* Mobile */
@media (max-width: 768px) {
  main {
    table {
      td {
        font-size: 12px;

        code {
          word-break: break-all;
        }
      }
    }
  }

  footer {
    .right {
      display: none;
    }
  }
}
