body { font-size: 1.2rem; text-align:justify; }
article#git-tutorial { max-width: 63rem; position: absolute; right:18.4em; top:0; left:0.5em; transition: right, 0.2s; }
#git-tutorial #toc { position: fixed; top: 0; bottom: 0; right:0; width: 17.4em; text-align: left; overflow: scroll;
                     background: white; border: 1px solid gray; transition: border-width 0.2s, right 0.2s; z-index: 1000; }
#git-tutorial #toc:hover { right: 0; transition: border-width 0.4s, right 0.4s; z-index: 3000; }
#git-tutorial #lines { position: absolute; z-index: 2000; }
#git-tutorial textarea, #git-tutorial .CodeMirror { width: 100%; font-size: 1.2rem; border: thin solid black; }
#git-tutorial table { table-layout: fixed; width: 100%; font-size: 100%; font-family: monospace; min-width: 41em; }

/* td.cell-path { } */
#git-tutorial td.cell-contents { font-family: monospace; width: 36em; }

#git-tutorial td { padding-left: 0.3em; padding-right: 0.3em; }

@media (max-width: 72em) {
    #git-tutorial td { padding-left: 0; padding-right: 0; }
    #git-tutorial td.cell-contents { width: 34em; }
    article#git-tutorial { right: 7em; }
    #git-tutorial #toc { right: -11em; }
    #git-tutorial #toc:hover { border-left: 5px solid gray; }
}

@media (max-width: 63em) {
    #git-tutorial td { padding-left: 0; padding-right: 0; }
    #git-tutorial td.cell-contents { width: 30em; }
    article#git-tutorial { right:6em; }
    #git-tutorial #toc { right: -12em; }
    #git-tutorial #toc:hover { border-left: 5px solid gray; }
}

#git-tutorial textarea { display:block; height: 18rem; }
#git-tutorial .CodeMirror { height: max-content; }
#git-tutorial input { display: inline-block; margin-right: 1em; font-size: 1.2rem; }
#git-tutorial table, #git-tutorial td, #git-tutorial th { border:thin solid black; border-collapse: collapse; }
#git-tutorial .specialchar { color: red; word-wrap: normal; }
#git-tutorial .hex-prefix { color: lightgrey; }
#git-tutorial .hex { color: brown; }
#git-tutorial .hex-hash { display: block; width: max-content; }
#git-tutorial .hex-hash, #git-tutorial .plain-hash-or-ref { border: thin solid brown; }
#git-tutorial .plain-hash-or-ref { display: inline-block; margin: 0.5px 0; }
#git-tutorial .hex-hash.hilite-src, #git-tutorial .plain-hash-or-ref.hilite-src { background: lightyellow; border-color: red; }
#git-tutorial .object-hash.hilite-dest { background: lightyellow; border-color: red; }
#git-tutorial .object-hash { border: thin solid transparent; }
#git-tutorial .space { text-decoration: underline; color: brown; opacity: 0.5; white-space: pre; }
#git-tutorial .deflate-toggle { cursor: pointer; }
#git-tutorial .deflated { color: red; }
#git-tutorial .directory { color: darkcyan; }
#git-tutorial .error { color: orangered; }
#git-tutorial .newline:after { content: ''; display:inline-block; width:100%; height:0; }
#git-tutorial code { word-wrap: break-word; }
article#git-tutorial .onlytoc { display: none; }
/* #toc .onlytoc { } */
#git-tutorial #toc .tocsmall { font-size: smaller; }
#git-tutorial #toc .notoc { display: none; }
#git-tutorial h1 { display: inline-block; }
#git-tutorial h1 + p { clear: both; }
#git-tutorial .permalink { opacity: 0.5; clear: both; padding: 1.2em 1.2em 0 0.5em;
                           font-size: small; text-decoration: none; color: gray; }
#git-tutorial h1:hover + .permalink, #git-tutorial .permalink:hover { opacity: 1; }
#git-tutorial #toc ul { list-style-type: none; padding: 0 !important; /*list-style-type: disc;*/ }
#git-tutorial #toc a { color: #666; }
#git-tutorial #toc a:hover { color: #333; }
#git-tutorial .CodeMirror .scrolled-to-line { background: lightcyan; }
#git-tutorial #toc > ol { padding-left: 0.7em; }
#git-tutorial #toc ol > li > a { text-decoration: none; }
#git-tutorial #toc li { padding-top: 0.4em; }
#git-tutorial #toc ol, #git-tutorial #toc ul { padding-left: 2.3em; }