:root {
  --background: #F1EDED;
  --body-background: #F9F7F7;
  --body-foreground: #37363E;
  --text-area-foreground: #1F232C;
  --text-area-background: #F1EDED;
  --body-border: #249CCC;
  --link-foreground: #171E26;
  --selection-background: #1C9ACF;
  --selection-foreground: #E8E6EC;
}

@font-face {
  /* (c) https://azukifont.com */
  font-family: azuki;
  src: url("/fonts/azuki_font.ttf");
}

html {
  background-color: var(--background);
  background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23249CCC' fill-opacity='0.1'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

body {
  margin: 2rem auto;
  padding: 2em;
  max-width: 60ch;
  line-height: 1.6;
  font-size: 1.1em;
  font-family: azuki, sans-serif;
  background: var(--body-background);
  color: var(--body-foreground);
  border: var(--body-border) 1px solid;
}

a {
  text-underline-offset: .1em;
  text-decoration-style: dotted;
  color: var(--link-foreground);
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3 {
  margin-bottom: 0;
}

nav a {
  text-decoration: none;
  margin-right: 12px;
  color: var(--body-foreground);
}

img {
  max-height: 400px;
  object-fit: cover;
  max-width: 100%;
  display: block;
  margin: 0 auto 1em;
}

p {
  text-align: justify;
}

ol,
ul {
  margin-top: 0em;
  padding-inline-start: 0;
  list-style: none;
}

li ol,
li ul {
  padding-inline-start: 1em;
}

li ol li:before,
li ul li:before {
  display: inline-block;
  content: "*";
  width: 1em;
  margin-left: -1em;
}

li p {
  display: inline-block;
  margin: 0;
}

blockquote {
  font-style: italic;
}

code {
  padding: .12em .3em;
  color: var(--text-area-foreground);
  background-color: var(--text-area-background);
  font-family: monospace;
}

pre code {
  display: block;
  padding: 1.25em;
  white-space: pre-wrap;
  overflow-x: auto;
  border-radius: 4px;
}

input {
  background-color: var(--text-area-background);
  color: var(--text-area-foreground);
  font-size: 1em;
  font-family: monospace;
}

textarea {
  background-color: var(--text-area-background);
  color: var(--text-area-foreground);
  width: 100%;
}

table,
th,
td {
  border: 0px solid;
  border-collapse: collapse;
  padding: .3em;
}

hr {
  border: none
}

hr::before {
  content: "* * *";
  display: block;
  text-align: center
}

::selection {
  color: var(--selection-foreground);
  background-color: var(--selection-background);
}

@media only screen and (max-width:767px) {
  body {
    max-width: 100vw;
    border: 0px;
    border-radius: 0px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
  --background: #171E26;
  --body-background: #383840;
  --body-foreground: #F1EDED;
  --text-area-foreground: #F2F2F2;
  --text-area-background: #3F3F48;
  --body-border: #249CCC;
  --link-foreground: #989CC3;
  --selection-background: #249CCC;
  --selection-foreground: #F2F2F2;
  }
}