:root {
  --bg-color: #eee;
  --text-color: #444;
  --link-color: #337099;
  --link-hover-color: white;
}
@media (prefers-color-scheme: light) {
  img.closed {
    filter: invert(0.5) sepia(1) saturate(25) hue-rotate(-30deg) brightness(0.9);
  }
  img.merged {
    filter: invert(0.5) sepia(1) saturate(5) hue-rotate(250deg) brightness(0.6);
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: black;
    --text-color: #ccc;
    --link-color: #5bf;
    --link-hover-color: black;
  }
  img.closed {
    filter: invert(0.5) sepia(1) saturate(5) hue-rotate(-10deg);
  }
  img.merged {
    filter: invert(0.5) sepia(1) saturate(5) hue-rotate(270deg);
  }
}
body {
  margin-top: 15px;
}
h1 {
  text-align: center;
}
h1,
h2,
h3 {
  line-height: 1.2;
}
h2 {
  position: relative;
  cursor: pointer;
}
h2:hover .anchor-link {
  display: inline;
}
.anchor-link {
  display: none;
  position: absolute;
  left: -20px;
  text-decoration: none;
}

#table-of-contents {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
}
#table-of-contents li {
  padding-left: 5px;
}
#table-of-contents li:not(:last-child)::after {
  content: " | ";
}

canvas,
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    avenir next,
    avenir,
    segoe ui,
    helvetica neue,
    helvetica,
    Cantarell,
    Ubuntu,
    roboto,
    noto,
    arial,
    sans-serif;
  /*font-size: 18px;*/
  line-height: 1.6;
  /*margin:40px auto;*/
  /*max-width: 650px;*/
  padding: 0 10px;
}
pre {
  text-align: left;
}
footer {
  text-align: center;
}
.wrapper {
  display: grid;
  grid-template-columns: 1fr 8fr 1fr;
  grid-gap: 10px;
  grid-auto-rows: minmax(40px, auto);
}
a {
  color: var(--link-color);
  text-decoration: none;
}
a:hover,
a:hover div,
a:hover span {
  color: var(--link-hover-color);
  background-color: var(--link-color);
  outline: 0.05em solid var(--link-color);
}

#summary ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

#summary li {
  border: 2px solid white;
  padding: 20px;
  text-align: center;
  font-size: 1.2em;
}

#summary li span {
  display: block;
  font-size: 2em;
  margin-top: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  border: 1px solid #ddd;
  padding: 8px;
}
td {
  text-align: center;
}
td.created,
td.updated {
  white-space: nowrap;
}

@media screen and (max-width: 600px) {
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }
  tr {
    border: 1px solid #ccc;
    margin-bottom: 5px;
  }
  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
  }
  td:before {
    content: attr(data-label);
    font-weight: bold;
    left: 10px;
    position: absolute;
  }
}
img {
  width: 16px;
}

.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out;
}
@keyframes octocat-wave {
  0%,
  100% {
    transform: rotate(0);
  }
  20%,
  60% {
    transform: rotate(-25deg);
  }
  40%,
  80% {
    transform: rotate(10deg);
  }
}
@media (max-width: 500px) {
  .github-corner:hover .octo-arm {
    animation: none;
  }
  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
  }
}