html { height: 100%; }
body { height: 100%; background-color: #777; }
.repo-link { margin: 20px; border-width: 3px; border-style: inset; list-style: none; height: 40%; overflow: auto; width: 10%; }
.repo-link:hover { background-color: #999; }
.repo-list { display: flex; flex-wrap: wrap; flex-direction: row; height: 100%; }
.project-panel { height: 100%; }
.single-repo-container { display: flex; justify-content: center; }
.single-repo { display: flex; flex-direction: column; margin: 20px; list-style-type: none; }
.single-repo.files { background-color: #f00; }
.directory-tree { min-height: 0; flex: 1; list-style-type: none; }
.file-contents { overflow-y: auto; height: 50%; }
.toolbar { flex: 1; min-height: 0; display: flex; width: 100%; flex-direction: row; }
.commits { flex-basis: 33%; }
.branches { list-style: none; height: 3em; }
.selected-branch { background-color: #999; }
.branch:hover { background-color: #999; }
.icon > svg { width: 50px; height: 20px; }
.browser { list-style: none; }
code { counter-reset: step; counter-increment: step 0; }
code .line::before { content: counter(step); counter-increment: step; width: 1rem; margin-right: 1.5rem; display: inline-block; text-align: right; color: rgba(115,138,148,.4); }
.selected-line-highlighted { background-color: #00FFFF; }
.selected-line-unhighlighted { background-color: #000000; transition: background-color 1000ms linear; }