// modified from the typora default themes

// nerdfonts
@import "https://www.nerdfonts.com/assets/css/webfont.css";

body {
  @bg: #f3f2ee;
  @fg: #1f0909;
  font-size: 16px;
  background-color: @bg;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif Segoe UI, SegoeUI, Arial, sans-serif;
  color: @fg;
  line-height: 1.5em;

  ol,
  ul {
    list-style: none;
  }

  blockquote,
  q {
    quotes: none;
  }

  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: '';
    content: none;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

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

  h1 {
    font-size: 1.875em;
    line-height: 1.6em;
    margin-top: 2em;
  }

  h2 {
    font-size: 1.5125em;
    line-height: 1.15;
    margin-top: 1.15em;
    margin-bottom: 1.15em;
  }

  h3 {
    font-size: 1.3125em;
    line-height: 1.15;
    margin-top: 2.285714em;
    margin-bottom: 1.15em;
  }

  h2,h3 {
    font-weight: normal;
  }

  h4 {
    font-size: 1.125em;
    margin-top: 2.67em;
  }

  h5,
  h6 {
    font-size: 1em;
  }

  h1 {
    border-bottom: 1px solid;
    margin-bottom: 1.875em;
    padding-bottom: 0.7125em;
  }

  h2 {
    border-bottom: 1px solid;
    margin-bottom: 1.875em;
    padding-bottom: 0.4082em;
  }

  a:hover,
  a:active {
    text-decoration: none;
  }

  p,
  blockquote,
  .md-fences {
    margin-bottom: 1.5em;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 1.5em;
  }

  blockquote {
    font-style: italic;
    border-left: 5px solid;
    margin-left: 2em;
    padding-left: 1em;
  }

  ul,
  ol {
    margin: 0 0 1 -0.7em;
  }

  ol li {
    list-style-type: decimal;
    list-style-position: outside;
  }

  ul li {
    list-style-type:square;
    list-style-position: outside;
  }

  li > p {
    margin-top: 0;
    margin-bottom: 0;
  }

  .md-meta,
  .md-before,
  .md-after {
    color: #999;
  }

  table {
    margin-bottom: 1.5em;
    font-size: 1em;
  }

  thead th,
  tfoot th {
    padding: 0.25em 0.25em 0.25em 0.4em;
    text-transform: uppercase;
  }

  th {
    text-align: left;
  }

  td {
    vertical-align: top;
    padding: 0.25em 0.25em 0.25em 0.4em;
  }

  code,
  .md-fences {
    color: inherit;
    background-color: #dadada;
    padding-left: 1ch;
    padding-right: 1ch;
  }

  pre code {
    background-color: inherit;
  }

  .md-fences {
    margin-left: 2em;
    margin-bottom: 3em;
  }

  .md-fences .CodeMirror.CodeMirror-wrap {
    top: -0.8em;
  }

  pre,
  code,
  tt {
    font-size: 0.875em;
    line-height: 1.714285em;
  }

  // begin modifications...

  h1 {
    line-height: 1.3em;
    font-weight: normal;
    margin-bottom: 0.5em;
  }

  p + ul,
  p + ol {
    margin-top: -1em;
  }

  h3 + ul,
  h4 + ul,
  h5 + ul,
  h6 + ul,
  h3 + ol,
  h4 + ol,
  h5 + ol,
  h6 + ol {
    margin-top: 0.5em;
  }

  li > ul,
  li > ol {
    margin-top: inherit;
  }

  h2,
  h3 {
    margin-bottom: 0.75em;
  }

  hr {
    border-top: none;
    border-right: none;
    border-bottom: 1px solid;
    border-left: none;
  }

  h1,h2 {
    border-color: #c5c5c5;
  }

  blockquote {
    border-color: #656565;
    color: #656565;
    background-color: contrast(@bg, lighten(@bg, 8%), darken(@bg, 6%));
  }

  thead.md-table-edit {
    background-color: transparent;
  }

  thead {
    background-color: #dadada;
  }

  tr:nth-child(even) {
    background: #e8e7e7;
  }

  hr {
    border-color: #c5c5c5;
  }

  .task-list {
    padding-left: 1rem;
  }

  .task-list-item {
    list-style-type: none;
    margin-left: -1.8em;

    .task-list-item-checkbox {
      margin-right: 0.8em;
    }
  }

  .task-list-item input:before {
    content: '\221A';
    display: inline-block;
    width: 1.25rem;
    height: 1.5rem;
    vertical-align: middle;
    text-align: center;
    color: #ddd;
    background-color: #f3f2ee;
  }

  .task-list-item input:checked:before,
  .task-list-item input[checked]:before {
    color: inherit;
  }

  img {
    max-width: 100%;
  }

  kbd {
    color: @fg;
  }

  .wrapper {
    background-color: @bg;
    overflow: hidden;
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: baseline;
  }
  .post-list-heading {
    color: #424242;
    margin-top: -24px;
  }
  .post-link {
    display:contents;
    color: #424242;
  }
  .post-link:hover {
    text-decoration: none;
    color: black;
  }
  .post-list > li {
    list-style-type: none;
  }
  .u-email {
    color: #424242;
  }:hover{
    text-decoration: none;
  }
  .contact-list > li {
    list-style-type:none;
  }
  .post-header {
    margin-top: -28px;
  }

  .page-top-btn {
    all: unset;
    position:fixed;

    bottom: 35px;
    right: 180px;
    height: 40px;
    width: 40px;

    background-color: #424242;
    color: #c5c5c5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 100%;
    border-style: solid;
    border-width: 0.1em;
    border-color: #424242;
    z-index: 1;
  }
  .page-top-btn:hover {
    background-color: black;
    border-color: black;
    bottom: 37px;
    right: 180px;
    height: 42px;
    width: 42px;
  }

  li > a {
    color: #424242;
  }
  li > a:hover {
    text-decoration: none;
    color: black;
  }
  li > a, li > a:visited {
    color: #424242;
  }
  li > h3 {
    margin-top: 1.15em;
  }

  p > a, p > a:visited {
    color: #065588;
  }

  .sticky-header {
    background-color: @bg;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .home-btn {
    font-size: 2.71em;
    color: #424242;
    float: left;
    text-align: center;
    margin-right: 80px;
    margin-top: 3px;
  }
  .home-btn:hover {
    color: black;
  }
  @media screen and (max-width: 680px) {
    .home-btn {
      margin-right: 30px;
    }
  }

  .anim1 {
    float:left;
    font-size: 40px;
    margin-top: 2px;
    color: #424242;

    -webkit-animation:spin 3.8s linear infinite;
    -moz-animation:spin 3.8s linear infinite;
    animation:spin 3.8s linear infinite;

    @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
    @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
    @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(-360deg); } }

  }

  .github-btn {
    margin-left: 20px;
    float: left;
    font-size:3em;
    color: #424242;
    cursor: pointer;

  }
  .github-btn:hover {
      color: black;
  }
  @media screen and (max-width: 550px) {
    .container1 {
      display: inline;
      float: right;
    }
  }

  .search-box {
    float: right;
    width: 40%;
  }
  @media screen and (max-width: 550px) {
    .search-box {
      margin-top: 4px;
      width: 100%;
    }
  }
  #search-input {
    background-color: @bg;
    font-size: 20px;
    border-radius: 8px;
    border-style: solid;
    border-color: #c5c5c5;
    border-width: thin;

    width: 100%;
    padding: 10px;
  }
  #search-input[type="search"]:focus {
    outline: none;
  }

  #HHHH {
    display: block;
  }
  #result-container {
    display: none;
    height: 200px;
    overflow-y: auto;
  }
  pre[id='fiscii'] {
    border: none;
    background-color: @bg;
    color: #424242;
    font-size: 10px;
    font-weight: bold;
    font-family: 'Consolas', 'Courier', 'Courier New';
    line-height: 10px;
    overflow: auto;
    text-align: center;
    margin-left: -40px;
    margin-bottom: -10px;
  }

  .about {
    color: #424242;
  }
  .about:hover {
    text-decoration: none;
    color: black;
  }

  mjx-container {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .pagination {
    display: block;
  }
  .pagination > a, .pagination > span, .pagination > b {
    color: #424242;
    padding: 5px 10px 5px 10px;
    cursor: pointer;
  }
  .pagination > a:hover, .pagination > span:hover, .pagination > b, .pagination > b:hover {
    color: @bg;
    background-color: #424242;
  }

  input {
    border-radius: 0;
  }
  input[type="search"] {
    -webkit-appearance: none; // normalize rounded corners on iOS
    appearance: none;
  }

  .post > {
    h1, h2, h3 {
      scroll-margin-top: 7em;
    }
  }

  .quark424242ff {
    height: 42px;
    width: 50px;
    background-image: url(/assets/img/quark424242ff.svg);
    display: inline-block;
  }
}