2 box-sizing: border-box;
4 background-position: center;
5 background-repeat: no-repeat;
6 background-size: cover;
9 /* min-height: 240px */ body { font-size: 9px; }
10 @media(min-height: 320px) { body { font-size: 12px; } }
11 @media(min-height: 480px) { body { font-size: 19px; } }
12 @media(min-height: 720px) { body { font-size: 28px; } }
13 @media(min-height: 768px) { body { font-size: 30px; } }
14 @media(min-height: 800px) { body { font-size: 32px; } }
15 @media(min-height: 960px) { body { font-size: 38px; } }
16 @media(min-height: 1024px) { body { font-size: 41px; } }
17 @media(min-height: 1080px) { body { font-size: 43px; } }
18 @media(min-height: 2160px) { body { font-size: 86px; } }
21 font-family: sans-serif;
22 padding: 2em 1em 6em 1em;
23 background-color: #555;
36 background-color: #EEE;
41 a.previous, a.next ,a.toplevel {
42 text-decoration: none;
50 padding: .5em 4em .5em 12em;
61 background-color: #EEE;
68 width: 2ex; overflow: hidden;
70 padding-bottom: .25em;
74 body a.toplevel:before {
81 bottom: 0; left: 6.25em;
83 padding-bottom: .125em;
88 /* ==== Overview Screen ==== */
90 div.slide, a.nextslide {
96 display: inline-block;
98 width: 48em; height: 30em;
100 border: 1px solid black;
103 div.slide:after { /* slide number */
109 content: attr(count);
110 padding-left: .125em;
114 div.slide + a { display: none; }
116 display: inline-block;
119 width: 48em; line-height: 30em;
120 color: rgba(0, 0, 0, 0);
123 #div.slide:nth-of-type(1) { margin-right: .5em; }
125 /* ==== Slide Appearance ==== */
128 background: #FFF no-repeat center;
140 div.slide > *:first-child:last-child,
141 div.slide > h2:first-child + :last-child {
143 transform: translate(0, -50%);
146 div.slide h1, div.slide h2 {
148 background-color: #EEE;
153 width: 100%; max-width: 100%;
157 div.slide > h1:first-child:last-child {
175 list-style-type: square;
179 div.slide ul ul, div.slide ul ol,
180 div.slide ol ul, div.slide ol ol {
191 background-color: rgba(192,192,192,128);
194 font-family: monospace;
198 /* ==== Slide Display ==== */
203 top: 0; bottom: 0; left: 0; right: 0;
204 width: auto; height: 100%;
210 /* slide number, footer bar*/
211 div.slide:target:after {
218 content: attr(count) " /";
220 background-color: #EEE;
224 /* back and forth link buttons */
225 div.slide:target + a,
226 div.slide:target + a + a {
233 :target + a:before, :target + a + a:before {
238 padding: 0 1em .25em 1em;
241 :target + a:before { left: 0; }
242 :target + a:before { content: '\22d8'; }
243 :target + a + a:before { right: 0; }
244 :target + a + a:before { content: '\22d9'; }
246 .uncover[type="checkbox"] + * { opacity: .2; }
247 .uncover[type="checkbox"]:checked + * { opacity: 1; }
249 .uncover[type="checkbox"] {
251 top: 0; bottom: 0; left: 0; right: 0;
252 width: 100%; height: 100%;
257 .uncover[type="checkbox"] + * + .uncover[type="checkbox"] { display: none; }
258 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"] { display: inline; }
259 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"]:checked,
260 .uncover[type="checkbox"]:checked { display: none; }