body { font-size: 1.2rem; text-align:justify; }
article#git-tutorial { position: absolute; top:0; left:0.5em; transition: right, 0.2s; }
#git-tutorial #toc { position: fixed; top: 0; bottom: 0; width: 17.4em; text-align: left; overflow: scroll;
                     background: white; border-left: 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; }
#git-tutorial pre.log { border: thin solid gray; padding: 0.3em; font-size: 100%; font-family: monospace; box-sizing: border-box; }
#git-tutorial td.cell-contents, #git-tutorial th.cell-contents { font-family: monospace; }
article#git-tutorial p, article#git-tutorial h1 { max-width: 63rem; }

#git-tutorial td, #git-tutorial th { padding-left: 0.3em; padding-right: 0.3em; }
#git-tutorial td.cell-contents, #git-tutorial th.cell-contents { width: 36em; }
article#git-tutorial { left: calc(50% - ( 17.4em / 2 ) - ( 63rem / 2 ) ); right:18.4em; max-width: 63rem; }
article#git-tutorial table, #git-tutorial pre.log { width: 77rem; margin-left: calc( ( ( 63rem - 77rem ) / 2 ) ); }
#git-tutorial #toc { right:0; }
#git-tutorial #toc:hover { border-left: 1px solid gray; }

@media (max-width: 100em) {
    #git-tutorial td, #git-tutorial th { padding-left: 0.3em; padding-right: 0.3em; }
    #git-tutorial td.cell-contents, #git-tutorial th.cell-contents { width: 36em; }
    article#git-tutorial { left:0.5em; right:18.4em; max-width: 63rem; }
    article#git-tutorial table, #git-tutorial pre.log { width: 100%; margin-left: auto; }
    #git-tutorial #toc { right:0; }
    #git-tutorial #toc:hover { border-left: 1px solid gray; }
}

@media (max-width: 72em) {
    #git-tutorial td, #git-tutorial th { padding-left: 0; padding-right: 0; }
    #git-tutorial td.cell-contents, #git-tutorial th.cell-contents { width: 34em; }
    article#git-tutorial { left:0.5em; right: 7em; max-width: 63rem; }
    article#git-tutorial table, #git-tutorial pre.log { width: 100%; margin-left: auto; }
    #git-tutorial #toc { right: -11em; }
    #git-tutorial #toc:hover { border-left: 5px solid gray; }
}

@media (max-width: 63em) {
    #git-tutorial td, #git-tutorial th { padding-left: 0; padding-right: 0; }
    #git-tutorial td.cell-contents, #git-tutorial th.cell-contents { width: 30em; }
    article#git-tutorial { left:0.5em; right:6em; max-width: 63rem; }
    article#git-tutorial table, #git-tutorial pre.log { width: 100%; margin-left: auto; }
    #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 th { border:thin solid black; border-collapse: collapse; }
#git-tutorial td { opacity: 0.5; border-top:thin solid #aaa; border-left:thin solid #aaa; border-right:thin solid #aaa; border-collapse: collapse; }
#git-tutorial tr:last-child td { border:thin solid #aaa; }
#git-tutorial tr:hover td { opacity: 1; border:thin solid black; }
#git-tutorial tr:last-child.different td, #git-tutorial .different td { border: thin solid black; opacity: 1; background: #f0f6f8; }
#git-tutorial table .empty-filesystem { text-align: center !important; color: #444 !important; opacity: 1 !important; border: thin solid black !important; }
#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 .function { color: #00f; }
#git-tutorial #toc .assignment { color: #00f; }
#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; }

/* Highlight elements when a click on e.g. a hash scrolls to the destination */
#git-tutorial .scroll-destination-hilite, #git-tutorial .scroll-destination-hilite td { transition: background 0.5s linear 0.5s, opacity 0.4s linear 0.5s; background: #ffd3d3 !important; opacity: 1 !important; }
#git-tutorial .scroll-destination-lolite, #git-tutorial .scroll-destination-lolite td { transition: background linear 0.5s, opacity linear 0.5s; }
#git-tutorial .trivia { opacity: 80%; border: thin solid slategrey; margin: 1em; padding: 0.3em; }
#git-tutorial .trivia:before { content: "Trivia"; border-bottom: thin solid slategrey; display: block; text-align: center; }
#git-tutorial .trivia table { min-width: 90%; max-width: 90%; width: 90%; margin-left: auto; margin-right: auto; }
/*#git-tutorial .trivia table td.cell-contents, #git-tutorial .trivia table th.cell-contents { width: 30%; }*/
