/*
hsl(223.5 100% 65.7%);
*/
:root {
  --nori-bg-1: hsl(223.5, 52%, 10%);
  --nori-bg-2: hsl(223, 52%, 20%);
  --nori-bg-3: hsl(223, 52%, 30%);
  --nori-fg-1: hsl(223.5, 52%, 100%);
  --nori-ac-1: hsl(223, 100%, 66%);
  --nori-ac-2: hsl(223, 100%, 56%);
  --nori-link: hsl(206, 100%, 69%);
  --nori-font-sans:
    ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", "Noto Sans",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Source Han Sans JP",
    "Noto Sans JP", "Source Han Sans", "Noto Sans CJK JP", "Yu Gothic",
    "BIZ UDPGothic", "Meiryo", sans-serif, "Apple Color Emoji",
    "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --nori-font-mono:
    ui-monospace, Consolas, monaco, "Ubuntu Mono", "Liberation Mono",
    "Courier New", Courier, "Noto Sans Mono", monospace;
}

.right {
  text-align: end;
}

html {
  background-color: var(--nori-bg-1);
  color: var(--nori-fg-1);
  font-family: var(--nori-font-sans);
}

body {
  padding: 0.5rem;
  margin: 16px auto;
  max-width: 800px;
  word-break: break-word;
  overflow-wrap: break-word;
  font-size: 1.03rem;
  line-height: 1.5;
}

header {
  background-color: var(--nori-bg-2);
  border-block-end: 1px solid var(--nori-bg-3);
  padding: 1rem;
  margin: -2rem calc(0px - (50vw - 50%)) 2rem;
  padding-inline-start: calc(50vw - 50%);
  padding-inline-end: calc(50vw - 50%);
}

header h1,
h2,
h3,
h4,
h5,
h6,
a {
  padding: 0;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  padding-top: 1rem;
}

section {
  margin-block-end: 1rem;
}

.path {
  font-size: small;
}
code,
kbd,
pre,
samp {
  font-family: var(--nori-font-mono);
  background-color: var(--nori-bg-2);
  padding: 2px 4px;
  border-radius: 5px;
  border: 1px solid var(--nori-bg-3);
}

kbd {
  position: relative;
  top: 0px;
  border-bottom: 4px solid var(--nori-bg-3);
  transition: all 0.5s;
}
kbd:hover {
  position: relative;
  top: 4px;
  border-bottom: 1px solid var(--nori-bg-3);
}

blockquote {
  font-family: var(--nori-font-mono);
  background-color: var(--nori-bg-2);
  padding: 2px 4px;
  border-radius: 5px;
  border-left: 4px solid var(--nori-bg-3);
}

a {
  color: var(--nori-link);
}

input,
textarea,
select {
  color: var(--nori-fg-1);
  background: var(--nori-bg-2);
  border-radius: 5px;
  border: 1px solid var(--nori-bg-3);
  padding: 6px 12px;
  margin-bottom: 0.5rem;
  box-shadow: none;
}

button {
  color: var(--nori-fg-1);
  background: var(--nori-bg-3);
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-weight: bold;
  transition: background 0.2s;
}

button:hover {
  background: var(--nori-bg-2);
}

hr {
  border: 0;
  border-bottom: 2px solid var(--nori-bg-3);
  margin: 1rem auto;
}

table caption {
  font-weight: bold;
  margin-bottom: 0.25rem;
}

table {
  border-collapse: collapse;
  width: 100%;
}
thead {
  border-bottom: 2px solid var(--nori-bg-3);
}
tfoot {
  border-top: 2px solid var(--nori-bg-3);
}
td,
th {
  text-align: left;
  padding: 0.5rem;
}

th {
}

tr:nth-child(even) {
  background: var(--nori-bg-2);
}

.card_list {
  display: grid;
  gap: 16px;
}

.card_item {
  border: 1px solid var(--nori-bg-3);
  border-radius: 8px;
  padding: 16px;
  background: var(--nori-bg-2);
}

.card_title {
  font-size: 1.1rem;
  margin: 0 0 6px;
}

.card_desc {
  margin: 0 0 12px;
  color: #888;
  font-size: 0.9rem;
}

.card_meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.card_license {
  font-size: 0.85rem;
  color: #fff;
}