/* normal regular */
@font-face {
  font-family: "NotoSansCJKjp-Jxck";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local("Noto Sans CJK JP Regular"),
    url("/assets/font/NotoSansCJKjp-Regular-Jxck-20200407.woff2") format("woff2");
}
/* normal bold */
@font-face {
  font-family: "NotoSansCJKjp-Jxck";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    local("Noto Sans CJK JP Bold"),
    url("/assets/font/NotoSansCJKjp-Bold-Jxck-20200407.woff2") format("woff2");
}


/* mono regular */
@font-face {
  font-family: "NotoSansMonoCJKjp-Jxck";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local("Noto Sans Mono CJK JP Regular"),
    url("/assets/font/NotoSansMonoCJKjp-Regular-Jxck-20200407.woff2") format("woff2");
}
/* mono bold */
@font-face {
  font-family: "NotoSansMonoCJKjp-Jxck";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    local("Noto Sans Mono CJK JP Bold"),
    url("/assets/font/NotoSansMonoCJKjp-Bold-Jxck-20200407.woff2") format("woff2");
}

/* Light Mode Theme */
:root {
  --background-color: #fefefe;
  --font-color: #222;
  --header-color: #222;

  --anchor-color: RoyalBlue;
  --anchor-visited-color: Brown;

  --code-block: #efefef;
  --code-block-font: #222;

  --block-quote: #ddd;
  --table-border: #222;

  --regular-font: "Noto Sans", "Noto Sans CJK JP", "NotoSansCJKjp-Jxck", "Hiragino Sans", 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;
  --mono-font: "NotoSansMonoCJKjp-Jxck";
  --code-font: Menlo, Consolas, Liberation, Mono, Courier, "NotoSansMonoCJKjp-Jxck";

  --icon-size: 30px;

  --width: 80vw;
  --grid: 1rem;

  --radius: 4px;
}


/* Mobile Theme */
@media screen and (max-device-width: 800px) {
  :root {
    --width: 94vw;
  }

  audio {
    width: 100%;
  }
}

/* Dark Mode Theme */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #010101;
    --font-color: #eee;

    --anchor-color: CornflowerBlue;
    --anchor-visited-color: RosyBrown;

    --code-block: #efefef;

    --table-border: #eee;
  }

  article img {
    filter: grayscale(50%);
  }
  article img[src*=svg] {
    filter: invert(100%) grayscale(50%);
  }
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--regular-font);
  background-color: var(--background-color);
  color: var(--font-color);
  font-feature-settings: "palt";
  margin: 0;
  padding: 0;
}

code {
  font-family: var(--mono-font);
}

img {
  max-width: 100%;
  height: auto;
}

hr {
  margin: 0;
  padding: 0;
}

iframe {
  display: block;
  max-width: 100%;
  margin: var(--grid) 0;
}