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 .trivia { z-index: 1900; }
#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 .graph-view { font-size: 100%; font-family: monospace; }
#git-tutorial td.cell-contents, #git-tutorial th.cell-contents { font-family: monospace; }
article#git-tutorial p, article#git-tutorial h1, article#git-tutorial h2, article#git-tutorial h3 { 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, #git-tutorial .graph-view { 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, #git-tutorial .graph-view { 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, #git-tutorial .graph-view { 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: 30.6em; }
    article#git-tutorial { left:0.5em; right:6em; max-width: 63rem; }
    article#git-tutorial table, #git-tutorial pre.log, #git-tutorial .graph-view { 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; padding-left: 0.3em; padding-right: 0.3em; }
#git-tutorial .plain-hash-or-ref { display: inline-block; margin: 0.5px 0; padding-top: 0.5em; padding-bottom: 0.5em; }
/* On mobile devices (and devices with a coarse pointing device like a wiimote), the single-line hashes are too small to be clicked.
   The default of 0.5em should help with that, but if we can detect a coarse device or lack of hover capability, we increase
   the padding. */
@media (pointer:coarse) {
    #git-tutorial .plain-hash-or-ref { padding-top: 1em; padding-bottom: 1em; }
}
@media (hover:none) {
    #git-tutorial .plain-hash-or-ref { padding-top: 1em; padding-bottom: 1em; }
}
#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: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, #git-tutorial h2, #git-tutorial h3 { display: inline-block; }
#git-tutorial h1 + p, #git-tutorial h2 + p, #git-tutorial h3 + p { clear: both; }
#git-tutorial .permalink, #git-tutorial .permalink *, #git-tutorial .permalink:after { text-decoration: none; color: black; }
#git-tutorial .permalink:after { content: '🔗'; opacity: 0.5; clear: both; padding: 1.2em 1.2em 0 0.5em;
                           font-size: small; text-decoration: none; color: gray; }
#git-tutorial .permalink:hover:after { opacity: 1; }
#git-tutorial .permalink:hover h1, #git-tutorial .permalink:hover h2, #git-tutorial .permalink:hover h3 { text-decoration: underline; }
#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 { 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, #git-tutorial .trivia .graph-view { min-width: 90%; max-width: 90%; width: 90%; margin-left: auto; margin-right: auto; }
#git-tutorial .trivia td.cell-contents, #git-tutorial .trivia th.cell-contents { width: 26.6em; }

@media (max-width: 72em) {
    #git-tutorial .trivia table, #git-tutorial .trivia .graph-view { min-width: 100%; max-width: 100%; width: 100%; }
}
/*#git-tutorial .trivia table td.cell-contents, #git-tutorial .trivia table th.cell-contents { width: 30%; }*/

/* Graph view */

#git-tutorial .dimmed_previous:hover [stroke] { stroke: black; }
#git-tutorial .dimmed_previous:hover [fill="#808080"] { fill: black; }
#git-tutorial .legend .dimmed_previous:hover [fill="#80c5c5"] { fill: darkcyan; }
#git-tutorial .dimmed_previous_directory:hover [stroke] { stroke: darkcyan; }
#git-tutorial .dimmed_previous_directory:hover [fill="#80c5c5"] { fill: darkcyan; }
#git-tutorial .graph-view { text-align: center; }
#git-tutorial .graph-view-tooltips { white-space: nowrap; margin: 1em 0.3em; background: #f8f8f8; border: thin solid #444; text-align: left; }
#git-tutorial .graph-view-tooltips > * { display: inline-block; white-space: normal; width: 100%; margin-right: -100%; vertical-align: middle; }
#git-tutorial .graph-view-tooltips table { margin-left: auto; width: 100%; border: none }
#git-tutorial .graph-view-tooltips tr { border: none; }
#git-tutorial .graph-view-tooltips tr th { opacity: 1; border: none; border-bottom:thin solid #444; text-align: left; }
#git-tutorial .graph-view-tooltips tr td { opacity: 1; border: none; border-top: thin solid #444; }
#git-tutorial .graph-view-tooltips > .graph-view-tooltips-default { color: #444; text-align: center; }
#git-tutorial .graph-view .legend { padding: 0.8em 0.3em 0.3em; }

/* Section counters */
#git-tutorial { counter-reset: h1counter h2counter h3counter h4counter; }
#git-tutorial > section { counter-reset: h3counter;}
#git-tutorial > section > h2 { counter-increment: h2counter; }
#git-tutorial > section > h2::before { content: counter(h2counter) ". " }
#git-tutorial > section > section { counter-reset: h4counter; }
#git-tutorial > section > section > h3 { counter-increment: h3counter; }
#git-tutorial > section > section > h3::before { content: counter(h2counter) "." counter(h3counter) ". " }
#git-tutorial > section > section.exercise > h3::before { content: "Exercise " counter(h2counter) "." counter(h3counter) ". " }

#git-tutorial .exercise-task { border: thin solid #80c5c5; background: #f1faff; padding: 1em }
#git-tutorial .exercise-reason { border: thin solid #80c5c5; background: #f8fdff; padding: 1em }
#git-tutorial .exercise-reason:before { content: "Rationale "; margin-bottom: 0.7em; font-weight: bold; display: block; }
#git-tutorial .log-alert { color: red; font-weight: 500; }
#git-tutorial input[type='button'] { display: inline-block; margin-top: 0.2em; }

#git-tutorial .dep-license { display: none; font-size: 80%; width: 100%; overflow-x: auto; }
#git-tutorial .article-metadata { color: #333; font-style: italic; }

#git-tutorial .filename { font-family: monospace; }