#markdown-content li {
  text-transform: none;
}

html {
  --link-color:rgb(0, 112, 201);
  --main-background-color:#FFF;
  --footer-color:#FFF;
  --main-text-color:#000;
  --post-title-color:#282828;
  --message-border-color:#000;
  --author-color:#212529;
  --text:#000;

  &[data-theme="light"] {
    --link-color:rgb(0, 112, 201);
    --main-background-color:#FFF;
    --footer-color:#FFF;
    --main-text-color:#000;
    --post-title-color:#282828;
    --message-border-color:#000;
    --author-color:#212529;
    --text:#000;
  }

  &[data-theme="dark"] {
    --link-color:rgb(100, 210, 255);
    --main-background-color:#171717;
    --footer-color:#282828;
    --main-text-color:#FFF;
    --post-title-color:#FFF;
    --message-border-color:#282828;
    --author-color:#FFF;
    --text:#e3e3e3;
  }
}

@media (prefers-color-scheme: dark) {
  html {
    --link-color:rgb(0, 112, 201);
    --main-background-color:#FFF;
    --footer-color:#FFF;
    --main-text-color:#000;
    --post-title-color:#282828;
    --message-border-color:#000;
    --author-color:#212529;
    --text:#000;
    --rect-color:#ECECFF;

    &[data-theme="light"] {
      --link-color:rgb(0, 112, 201);
      --main-background-color:#FFF;
      --footer-color:#FFF;
      --main-text-color:#000;
      --post-title-color:#282828;
      --message-border-color:#000;
      --author-color:#212529;
      --text:#000;
      --rect-color:#ECECFF;
    }

    &[data-theme="dark"] {
      --link-color:rgb(100, 210, 255);
      --main-background-color:#171717;
      --footer-color:#282828;
      --main-text-color:#FFF;
      --post-title-color:#FFF;
      --message-border-color:#282828;
      --author-color:#FFF;
      --text:#e3e3e3;
      --rect-color:#282828;
    }
  }
}

/* override mermaid: */

.messageText {
  fill: var(--text) !important;
  stroke: none !important;
}

tspan {
  fill: var(--post-title-color) !important;
}

rect.actor {
  fill: var(--rect-color) !important;
}

line {
  stroke: var(--text) !important;
}

.noteText tspan, .labelText {
  fill: #000 !important;
}

g text {
  fill: var(--post-title-color) !important;
}

path {
  stroke: var(--text) !important;
}

/* override mermaid: */

div .highlight {
  background: var(--color-background-color);
}

.MathJax_CHTML, #markdown-content h1, h2, h3, h4, h5, h6, .container,.home-message__ttl h1, h2, h3, h4, h5, h6 {
  color: var(--main-text-color) !important;
}

#markdown-content p, th, td, center, li {
  color: var(--text);
  font-family: Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, "PingFang SC", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Meiryo, sans-serif;
}

.banner .banner-text {
  font-family: AmarilloUSAF !important;
  text-align: center;
}

h1.banner-text {
  font-size: 3rem;
}

p.banner-text {
  font-size: 1.5rem;
}

.banner img {
  &.banner-image {
    object-fit: cover;
    margin-left: 0px;
  }

  &.warning-image {
    filter: invert(38%) sepia(73%) saturate(3208%) hue-rotate(310deg) brightness(96%) contrast(90%);
  }
}

p {
  color: var(--text);
  margin-top: 1rem;
  margin-bottom: 0;
}

.meta, .fa {
  color: var(--main-text-color);
}

.toc {
  padding-left: 10px !important;

  /* text-transform: inherit !important; */

  li {
    a {
      color: var(--link-color);
      text-transform: none;
    }

    margin-left: 10px;
  }
}

#markdown-content li {
  margin-left: 50px;
}

/*.section-nav is the embedded toc, .sidebar_catelog is the toc in sidebar.*/
@media screen and (max-width: 1000px) {
  .sidebar_catelog {
    visibility: hidden;
  }
}

.sidebar_catelog {
  /*float: left;*/
  width: auto;

  /*margin-right: -200px;*/
  padding-right: -200px;

  a {
    color: black;

    &:hover {
      background: black;
      color: white;
    }
  }

  .list-click {
    background: black;
    color: white;
  }
}

.list_click {
  color: white !important;
  background: black;
  transition: all 0.4s;
}

.tag {
  border: 1px var(--main-text-color) solid;
  border-radius: 3px;
  padding: 0 11px;
  color: var(--main-text-color);
  transition: all 0.4s;

  &:hover {
    border: 1px var(--main-text-color) solid;
    border-radius: 3px;
    padding: 0 11px;
    color: var(--main-background-color);
    background: var(--main-text-color);
  }
}

.edit-button {
  color: black;
  font-size: 1rem;
}

@media screen and (max-width: 768px) {
  img {
    width: 100%;
  }
}

img {
  border: 0;
  max-width: 650px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  display: block;

  /*width:expression(this.width > 650  ? 650 : "auto");*/
  /*width:auto;*/
}

table {
  margin-bottom: 5px;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  border: 1px solid grey;
}

th {
  background-color: lighten grey;
  border: 1px solid darken grey;
  border-bottom-color: darken grey;
}

td {
  border: 1px solid grey;
}

/* CSS FOR ARCHIVE */

.tag-button--all {
  padding: 2px;
  border: 1px var(--main-text-color) solid;
  border-radius: 3px;
  padding: 0 11px;
  color: var(--main-text-color);
  margin: 10px;
  text-decoration: none;

  &:hover {
    margin: 10px;
    border: 1px var(--main-text-color) solid;
    border-radius: 3px;
    padding: 0 11px;
    color: var(--main-background-color);
    background: var(--main-text-color);
  }
}

#tag_cloud .tag-button {
  padding: 2px;
  margin: 10px;
  border: 1px var(--main-text-color) solid;
  border-radius: 3px;
  padding: 0 11px;
  color: var(--main-text-color);

  &:hover {
    margin: 10px;
    border: 1px var(--main-text-color) solid;
    border-radius: 3px;
    padding: 0 11px;
    color: var(--main-background-color);
    background: var(--main-text-color);
  }
}

.post-subtitle {
  font-size: 18px;
  color: var(--text) !important;
  line-height: 1.75;
}

.post-title {
  /* color: #282828; */
  font-size: 20px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.tag-text {
  font-size: 22px;
  color: black;
  float: center;
}

.focus {
  color: var(--main-background-color) !important;
  background: var(--main-text-color);
}

.emoji {
  display: inline;
  width: auto;
}

blockquote {
  border-left: 10px solid var(--text);
  border-bottom: 2px solid var(--text);
  margin: 1.5em 10px;
  color: var(--text) !important;
  padding: 0.5em 10px;
  quotes: "“" "”" "‘" "’";
  margin-left: 20px !important;
  margin-right: 20px !important;

  &:before {
    color: var(--post-title-color);
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
  }

  p {
    display: inline;
  }
}

.MathJax_Display {
  color: var(--text) !important;
}