@charset "UTF-8";
html {
  font-size: 12px;
}

article {
  width: 780px;
  margin-left: 40px;
}

/* キーボード入力を強調 */
kbd:not(:has(kbd)) {
  border: 1px solid #333;
  padding-inline: 2px;
  border-radius: 2px;
}

/* 文章中のcodeタグは色を変える。 */
p > code,
ul code,
table code {
  color: rgb(184, 45, 45);
}

/* 図1-1などを太字にして[]で囲む */
.figure {
  font-weight: bold;
}

.figure::before {
  content: "[";
}

.figure::after {
  content: "]";
}

/* サイドバーにGithubへのリンクを追加 */
.sidebar {
  position: fixed;
  box-shadow: 1px 1px 2px;
  left: 0;
  padding-inline: 7px;
  border-radius: 0 0 10px 0;
  background-color: #fff;
}

.sidebar ul {
  list-style: none;
  padding-left: 0;
}

.sidebar li {
  text-align: center;
}

.sidebar li a {
  text-decoration: none;
  color: #333;
}

.sidebar li:hover a {
  color: rgb(184, 45, 45);
}

.sidebar .unview {
  display: none;
}
.sidebar:hover .view {
  display: none;
}
.sidebar:hover .unview {
  display: block;
}

/* 備考欄 */

.note::before {
  content: "Note: ";
  font-weight: bold;
}

/* 変数名 */
.variable-list span::before {
  content: "・・・";
}

pre[data-filename] {
  margin: 0;
}

pre[data-filename] code {
  padding-top: 2em;
}

pre[data-filename]::before {
  content: attr(data-filename);
  background-color: #333;
  padding-inline: 1em;
  padding-block: 2px;
  color: #fff;
  position: relative;
  bottom: -18px;
  left: 1em;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.card {
  width: 400px;
  border: solid 1px #333;
  margin-top: 1em;
}

.card h2 {
  text-align: center;
}

.card p {
  margin: 1em;
}

.tag {
  display: flex;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.tag li {
  padding-inline: 5px;
  margin-left: 3px;
  border: solid 1px cadetblue;
  border-radius: 5px;
}

.tag a {
  text-decoration: none;
  color: #333;
}

.tag a:hover {
  color: #f33;
}