1/**
  2 * A simple theme for reveal.js presentations, similar
  3 * to the default theme. The accent color is darkblue.
  4 * Based on https://github.com/hakimel/reveal.js/blob/master/css/theme/source/simple.scss
  5 *
  6 * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
  7 * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  8 */
  9@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
 10@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
 11section.has-dark-background,
 12section.has-dark-background h1,
 13section.has-dark-background h2,
 14section.has-dark-background h3,
 15section.has-dark-background h4,
 16section.has-dark-background h5,
 17section.has-dark-background h6 {
 18  color: #fff;
 19}
 20
 21/*********************************************
 22  * GLOBAL STYLES
 23  *********************************************/
 24:root {
 25  --r-background-color: #fff;
 26  --r-main-font: Lato, sans-serif;
 27  --r-main-font-size: 40px;
 28  --r-main-color: #000;
 29  --r-block-margin: 20px;
 30  --r-heading-margin: 0 0 20px 0;
 31  --r-heading-font: News Cycle, Impact, sans-serif;
 32  --r-heading-color: #000;
 33  --r-heading-line-height: 1.2;
 34  --r-heading-letter-spacing: normal;
 35  --r-heading-text-transform: none;
 36  --r-heading-text-shadow: none;
 37  --r-heading-font-weight: normal;
 38  --r-heading1-text-shadow: none;
 39  --r-heading1-size: 1.5em;
 40  --r-heading2-size: 1.4em;
 41  --r-heading3-size: 1.3em;
 42  --r-heading4-size: 1em;
 43  --r-text-size: 0.8em;
 44  --r-list-size: 0.7em;
 45  --r-code-font: monospace;
 46  --r-link-color: #00008b;
 47  --r-link-color-dark: #00003f;
 48  --r-link-color-hover: #0000f1;
 49  --r-selection-background-color: rgba(0, 0, 0, 0.99);
 50  --r-selection-color: #fff;
 51}
 52
 53.reveal-viewport {
 54  background: #fff;
 55  background-color: var(--r-background-color);
 56}
 57
 58.reveal {
 59  font-family: var(--r-main-font);
 60  font-size: var(--r-main-font-size);
 61  font-weight: normal;
 62  color: var(--r-main-color);
 63}
 64
 65.reveal ::selection {
 66  color: var(--r-selection-color);
 67  background: var(--r-selection-background-color);
 68  text-shadow: none;
 69}
 70
 71.reveal ::-moz-selection {
 72  color: var(--r-selection-color);
 73  background: var(--r-selection-background-color);
 74  text-shadow: none;
 75}
 76
 77.reveal .slides {
 78  text-align: left;
 79}
 80
 81.reveal .slides section,
 82.reveal .slides section > section {
 83  line-height: 1.3;
 84  font-weight: inherit;
 85}
 86
 87/*********************************************
 88  * HEADERS
 89  *********************************************/
 90.reveal h1,
 91.reveal h2,
 92.reveal h3,
 93.reveal h4,
 94.reveal h5,
 95.reveal h6 {
 96  margin: var(--r-heading-margin);
 97  color: var(--r-heading-color);
 98  font-family: var(--r-heading-font);
 99  font-weight: var(--r-heading-font-weight);
100  line-height: var(--r-heading-line-height);
101  letter-spacing: var(--r-heading-letter-spacing);
102  text-transform: var(--r-heading-text-transform);
103  text-shadow: var(--r-heading-text-shadow);
104  word-wrap: break-word;
105}
106
107.reveal h1 {
108  font-size: var(--r-heading1-size);
109}
110
111.reveal h2 {
112  font-size: var(--r-heading2-size);
113}
114
115.reveal h3 {
116  font-size: var(--r-heading3-size);
117}
118
119.reveal h4 {
120  font-size: var(--r-heading4-size);
121}
122
123.reveal h1 {
124  text-shadow: var(--r-heading1-text-shadow);
125}
126
127/*********************************************
128  * OTHER
129  *********************************************/
130.reveal p {
131  margin: var(--r-block-margin) 0;
132  line-height: 1.3;
133  font-size: var(--r-text-size);
134}
135
136/* Remove trailing margins after titles */
137.reveal h1:last-child,
138.reveal h2:last-child,
139.reveal h3:last-child,
140.reveal h4:last-child,
141.reveal h5:last-child,
142.reveal h6:last-child {
143  margin-bottom: 0;
144}
145
146/* Ensure certain elements are never larger than the slide itself */
147.reveal img,
148.reveal video,
149.reveal iframe {
150  max-width: 95%;
151  max-height: 95%;
152}
153
154.reveal strong,
155.reveal b {
156  font-weight: bold;
157}
158
159.reveal em {
160  font-style: italic;
161}
162
163.reveal ol,
164.reveal dl,
165.reveal ul {
166  display: inline-block;
167  text-align: left;
168  margin: 0 0 0 1em;
169  font-size: var(--r-list-size);
170}
171
172.reveal ol {
173  list-style-type: decimal;
174}
175
176.reveal ul {
177  list-style-type: disc;
178}
179
180.reveal ul ul {
181  list-style-type: square;
182}
183
184.reveal ul ul ul {
185  list-style-type: circle;
186}
187
188.reveal ul ul,
189.reveal ul ol,
190.reveal ol ol,
191.reveal ol ul {
192  display: block;
193  margin-left: 40px;
194}
195
196.reveal dt {
197  font-weight: bold;
198}
199
200.reveal dd {
201  margin-left: 40px;
202}
203
204.reveal blockquote {
205  display: block;
206  position: relative;
207  margin: var(--r-block-margin) 0;
208  padding: 5px;
209  padding-left: 16px;
210  font-style: italic;
211  background: rgba(0, 0, 0, 0.05);
212  font-size: 0.7em;
213  border-left: 8px solid var(--r-main-color);
214  border-radius: 4px;
215}
216
217.reveal blockquote p:first-child,
218.reveal blockquote p:last-child {
219  display: inline-block;
220}
221
222.reveal q {
223  font-style: italic;
224}
225
226.reveal pre {
227  display: block;
228  position: relative;
229  width: 90%;
230  margin: var(--r-block-margin) auto;
231  text-align: left;
232  font-size: 0.55em;
233  font-family: var(--r-code-font);
234  line-height: 1.2em;
235  word-wrap: break-word;
236  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
237}
238
239.reveal code {
240  font-family: var(--r-code-font);
241  text-transform: none;
242  tab-size: 2;
243  background: rgba(0, 0, 0, 0.05);
244  padding-left: 4px;
245  padding-right: 4px;
246}
247
248.reveal pre code {
249  display: block;
250  padding: 5px;
251  overflow: auto;
252  max-height: 400px;
253  word-wrap: normal;
254}
255
256.reveal .code-wrapper {
257  white-space: normal;
258}
259
260.reveal .code-wrapper code {
261  white-space: pre;
262}
263
264.reveal table {
265  margin: auto;
266  border-collapse: collapse;
267  border-spacing: 0;
268}
269
270.reveal table th {
271  font-weight: bold;
272}
273
274.reveal table th,
275.reveal table td {
276  text-align: left;
277  padding: 0.2em 0.5em 0.2em 0.5em;
278  border-bottom: 1px solid;
279}
280
281.reveal table th[align="center"],
282.reveal table td[align="center"] {
283  text-align: center;
284}
285
286.reveal table th[align="right"],
287.reveal table td[align="right"] {
288  text-align: right;
289}
290
291.reveal table tbody tr:last-child th,
292.reveal table tbody tr:last-child td {
293  border-bottom: none;
294}
295
296.reveal sup {
297  vertical-align: super;
298  font-size: smaller;
299}
300
301.reveal sub {
302  vertical-align: sub;
303  font-size: smaller;
304}
305
306.reveal small {
307  display: inline-block;
308  font-size: 0.6em;
309  line-height: 1.2em;
310  vertical-align: top;
311}
312
313.reveal small * {
314  vertical-align: top;
315}
316
317.reveal img {
318  margin: var(--r-block-margin) 0;
319}
320
321.reveal p:has(> img) {
322  text-align: center;
323}
324
325/*********************************************
326  * LINKS
327  *********************************************/
328.reveal a {
329  color: var(--r-link-color);
330  text-decoration: none;
331  transition: color 0.15s ease;
332}
333
334.reveal a:hover {
335  color: var(--r-link-color-hover);
336  text-shadow: none;
337  border: none;
338}
339
340.reveal .roll span:after {
341  color: #fff;
342  background: var(--r-link-color-dark);
343}
344
345/*********************************************
346  * Frame helper
347  *********************************************/
348.reveal .r-frame {
349  border: 4px solid var(--r-main-color);
350  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
351}
352
353.reveal a .r-frame {
354  transition: all 0.15s linear;
355}
356
357.reveal a:hover .r-frame {
358  border-color: var(--r-link-color);
359  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
360}
361
362/*********************************************
363  * NAVIGATION CONTROLS
364  *********************************************/
365.reveal .controls {
366  color: var(--r-link-color);
367}
368
369/*********************************************
370  * PROGRESS BAR
371  *********************************************/
372.reveal .progress {
373  background: rgba(0, 0, 0, 0.2);
374  color: var(--r-link-color);
375}
376
377/*********************************************
378  * PRINT BACKGROUND
379  *********************************************/
380@media print {
381  .backgrounds {
382    background-color: var(--r-background-color);
383  }
384}