:root {
	--header: #FBFADA;
	--body: #BFBFBF;
	--bodyalt: #808080;
	--background: #020100;
	--backgroundt: #3033320f;
	--background-content: #02020280;
	--accent: #000302;
	--grid: #171813;
	--grid-width: 2px;
	--grid-size: 60px;
	--grid-speed: 5s;
	--slow-grid-speed: 9s;
}

body {
	background-color: #101010; 
	scrollbar-gutter: stable;
	color: #ddd;
	font-family: Consolas, monospace;
	line-height: 1.45;
	padding: 1rem;
	max-width: 120ch;
	width: 100%;
	margin: auto;
}

h1, h2, h3, h4, h5, h6, th, b {
	font-size: 1em;
	font-weight: normal;
	margin: 0;
	color: var(--header);
}

h1 a {
	color: var(--header);
	text-decoration: none;
}

img, h1, h2 {
	vertical-align: middle;
}

a { color: var(--body); }
a:hover { color: var(--background); background-color: white; }
a:target { color: var(--background); background-color: var(--header); }

a.d,
a.h,
a.i,
a.line {
	text-decoration: none;
}

a.line {
	user-select: none;
}

#blob a:hover {
	color: #111;
	text-decoration: none;
}

table#index, 
table#log,
table#files {
	width: 100%;
}

div#content {
	background-color: var(--background-content);
	padding: 1ch;
	overflow: auto;
}

table thead td {
	font-weight: bold;
}

table td {
	padding: 0 0.4em;
}

#index td:nth-child(3) {
	display: none;
}

#log td:nth-child(1),
#log th:nth-child(1) {
	width: 18ch;
}

#files td:nth-child(1),
#files td:nth-child(1) {
	width: 12ch;
}

#content table td {
	vertical-align: top;
	white-space: nowrap;
}

#index tr td:nth-child(2),
#tags tr td:nth-child(3),
#branches tr td:nth-child(3),
#log tr td:nth-child(2) {
	white-space: normal;
}

td.num {
	text-align: right;
}

.desc {
	color: #fff;
}

hr  {
	border: 0;
	display: none;
}

pre {
	font-family: Consolas, monospace;
	max-width: 86ch;
	overflow-x: auto;
}

pre a.h {
	color: #30a;
}

.A,
span.i,
pre a.i {
	color: #073;
}

.D,
span.d,
pre a.d {
	color: #e03;
}

pre a.h:hover { background-color: #30a; color: #fff }
pre a.i:hover { background-color: #073; color: #fff }
pre a.d:hover { background-color: #e03 ; color: #fff }

html::before {
  content: '';
  z-index: -1;
  width: calc(100% + var(--grid-size));
  height: calc(100% + var(--grid-size));
  top: calc(-1 * var(--grid-size));
  left: calc(-1 * var(--grid-size));
  pointer-events: none;
  position: fixed;
  background-size: var(--grid-size) var(--grid-size);
  background-image:
    linear-gradient(to right, var(--grid) var(--grid-width), transparent var(--grid-width)),
    linear-gradient(to bottom, var(--grid) var(--grid-width), var(--background) var(--grid-width));
  animation: bg-scroll var(--slow-grid-speed) linear infinite;
  will-change: background-position;

}

.slowbg {
  animation: bg-scroll var(--slow-grid-speed) linear infinite;
}

@keyframes bg-scroll {
  to {
    transform: translate(var(--grid-size), var(--grid-size));  
  }
}