/* Colours and darkmode */
@charset "UTF-8";
:root {
  --base00: #fff;
  --base01: #e7e7e7;
  --base02: #d2d2d2;
  --base03: #a6a6a6;
  --base04: #616161;
  --base05: #3c3c3c;
  --base06: #2a2a2a;
  --base07: #181818;
  --base08: #ff2600;
  --base09: #ff8d00;
  --base0a: #ffbf00;
  --base0b: #00bf39;
  --base0c: #009cff;
  --base0d: #003997;
  --base0e: #a200a1;
  --base0f: #b64f00;
  color-scheme: light dark;
}

:root.dark-theme {
  --base00: #000;
  --base01: #181818;
  --base02: #2d2d2d;
  --base03: #595959;
  --base04: #9e9e9e;
  --base05: #c3c3c3;
  --base06: #d5d5d5;
  --base07: #e7e7e7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --base00: #000;
    --base01: #181818;
    --base02: #2d2d2d;
    --base03: #595959;
    --base04: #9e9e9e;
    --base05: #c3c3c3;
    --base06: #d5d5d5;
    --base07: #e7e7e7;
  }

  :root.light-theme {
    --base00: #fff;
    --base01: #e7e7e7;
    --base02: #d2d2d2;
    --base03: #a6a6a6;
    --base04: #616161;
    --base05: #3c3c3c;
    --base06: #2a2a2a;
    --base07: #181818;
  }
}

/* Site wide */

body {
  font-family: 'Mplus 1p', 'Montserrat', 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', '游ゴシック' , '游ゴシック体' , YuGothic , 'Yu Gothic', 'ＭＳ ゴシック' , 'MS Gothic', sans-serif;
  background: var(--base00);
  color: var(--base05);
}

nav,
main {
  margin: auto;
  max-width: 50rem;
}

/* Navbar */

nav {
  padding-bottom: 1rem;
}

nav a {
  font-size: 1.3rem;
  color: var(--base45);
  text-decoration: none;
}

nav a:hover {
  color: var(--base0b);
}

nav a:not(:first-child) {
  margin-left: 0.5rem;
}

.nav-current {
  font-weight: bold;
  color: var(--base07);
  border-bottom: 0.1rem solid var(--base0b);
}

.nav-logo svg {
  height: 2.5rem;
  vertical-align: middle;
}

.toggle-theme svg {
  fill: var(--base09);
}

.toggle-theme svg:hover {
  fill: var(--base0a);
  cursor: pointer;
}

.align-right {
  float: right;
}

nav .align-right span:not(:last-child) {
  margin-right: 0.5rem;
}

/* Content */

article a {
  color: var(--base0f);
}

article a:visited {
  color: var(--base0e);
}

article a:hover {
  color: var(--base09);
}

article img {
  max-width: 100%;
}

/* Metadata */

article .meta {
  color: var(--base04);
}

article .meta a {
  text-decoration: none;
  color: var(--base04);
}

.meta a:hover {
  text-decoration: underline;
  text-decoration-color: var(--base0f);
}

/* Footer */
 
footer {
  text-align: center;
}