1@charset "UTF-8";
  2/**
  3 * Dracula Dark theme for reveal.js.
  4 * Based on https://draculatheme.com
  5 */
  6/**
  7 * Dracula colors by Zeno Rocha
  8 * https://draculatheme.com/contribute
  9 */
 10html * {
 11  color-profile: sRGB;
 12  rendering-intent: auto;
 13}
 14
 15section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
 16  color: #282A36;
 17}
 18
 19/*********************************************
 20 * GLOBAL STYLES
 21 *********************************************/
 22:root {
 23  --r-background-color: #282A36;
 24  --r-main-font: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
 25  --r-main-font-size: 40px;
 26  --r-main-color: #F8F8F2;
 27  --r-block-margin: 20px;
 28  --r-heading-margin: 0 0 20px 0;
 29  --r-heading-font: League Gothic, Impact, sans-serif;
 30  --r-heading-color: #BD93F9;
 31  --r-heading-line-height: 1.2;
 32  --r-heading-letter-spacing: normal;
 33  --r-heading-text-transform: none;
 34  --r-heading-text-shadow: none;
 35  --r-heading-font-weight: normal;
 36  --r-heading1-text-shadow: none;
 37  --r-heading1-size: 3.77em;
 38  --r-heading2-size: 2.11em;
 39  --r-heading3-size: 1.55em;
 40  --r-heading4-size: 1em;
 41  --r-code-font: Fira Code, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
 42  --r-link-color: #FF79C6;
 43  --r-link-color-dark: #ff2da5;
 44  --r-link-color-hover: #8BE9FD;
 45  --r-selection-background-color: #44475A;
 46  --r-selection-color: #fff;
 47}
 48
 49.reveal-viewport {
 50  background: #282A36;
 51  background-color: var(--r-background-color);
 52}
 53
 54.reveal {
 55  font-family: var(--r-main-font);
 56  font-size: var(--r-main-font-size);
 57  font-weight: normal;
 58  color: var(--r-main-color);
 59}
 60
 61.reveal ::selection {
 62  color: var(--r-selection-color);
 63  background: var(--r-selection-background-color);
 64  text-shadow: none;
 65}
 66
 67.reveal ::-moz-selection {
 68  color: var(--r-selection-color);
 69  background: var(--r-selection-background-color);
 70  text-shadow: none;
 71}
 72
 73.reveal .slides section,
 74.reveal .slides section > section {
 75  line-height: 1.3;
 76  font-weight: inherit;
 77}
 78
 79/*********************************************
 80 * HEADERS
 81 *********************************************/
 82.reveal h1,
 83.reveal h2,
 84.reveal h3,
 85.reveal h4,
 86.reveal h5,
 87.reveal h6 {
 88  margin: var(--r-heading-margin);
 89  color: var(--r-heading-color);
 90  font-family: var(--r-heading-font);
 91  font-weight: var(--r-heading-font-weight);
 92  line-height: var(--r-heading-line-height);
 93  letter-spacing: var(--r-heading-letter-spacing);
 94  text-transform: var(--r-heading-text-transform);
 95  text-shadow: var(--r-heading-text-shadow);
 96  word-wrap: break-word;
 97}
 98
 99.reveal h1 {
100  font-size: var(--r-heading1-size);
101}
102
103.reveal h2 {
104  font-size: var(--r-heading2-size);
105}
106
107.reveal h3 {
108  font-size: var(--r-heading3-size);
109}
110
111.reveal h4 {
112  font-size: var(--r-heading4-size);
113}
114
115.reveal h1 {
116  text-shadow: var(--r-heading1-text-shadow);
117}
118
119/*********************************************
120 * OTHER
121 *********************************************/
122.reveal p {
123  margin: var(--r-block-margin) 0;
124  line-height: 1.3;
125}
126
127/* Remove trailing margins after titles */
128.reveal h1:last-child,
129.reveal h2:last-child,
130.reveal h3:last-child,
131.reveal h4:last-child,
132.reveal h5:last-child,
133.reveal h6:last-child {
134  margin-bottom: 0;
135}
136
137/* Ensure certain elements are never larger than the slide itself */
138.reveal img,
139.reveal video,
140.reveal iframe {
141  max-width: 95%;
142  max-height: 95%;
143}
144
145.reveal strong,
146.reveal b {
147  font-weight: bold;
148}
149
150.reveal em {
151  font-style: italic;
152}
153
154.reveal ol,
155.reveal dl,
156.reveal ul {
157  display: inline-block;
158  text-align: left;
159  margin: 0 0 0 1em;
160}
161
162.reveal ol {
163  list-style-type: decimal;
164}
165
166.reveal ul {
167  list-style-type: disc;
168}
169
170.reveal ul ul {
171  list-style-type: square;
172}
173
174.reveal ul ul ul {
175  list-style-type: circle;
176}
177
178.reveal ul ul,
179.reveal ul ol,
180.reveal ol ol,
181.reveal ol ul {
182  display: block;
183  margin-left: 40px;
184}
185
186.reveal dt {
187  font-weight: bold;
188}
189
190.reveal dd {
191  margin-left: 40px;
192}
193
194.reveal blockquote {
195  display: block;
196  position: relative;
197  width: 70%;
198  margin: var(--r-block-margin) auto;
199  padding: 5px;
200  font-style: italic;
201  background: rgba(255, 255, 255, 0.05);
202  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
203}
204
205.reveal blockquote p:first-child,
206.reveal blockquote p:last-child {
207  display: inline-block;
208}
209
210.reveal q {
211  font-style: italic;
212}
213
214.reveal pre {
215  display: block;
216  position: relative;
217  width: 90%;
218  margin: var(--r-block-margin) auto;
219  text-align: left;
220  font-size: 0.55em;
221  font-family: var(--r-code-font);
222  line-height: 1.2em;
223  word-wrap: break-word;
224  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
225}
226
227.reveal code {
228  font-family: var(--r-code-font);
229  text-transform: none;
230  tab-size: 2;
231}
232
233.reveal pre code {
234  display: block;
235  padding: 5px;
236  overflow: auto;
237  max-height: 400px;
238  word-wrap: normal;
239}
240
241.reveal .code-wrapper {
242  white-space: normal;
243}
244
245.reveal .code-wrapper code {
246  white-space: pre;
247}
248
249.reveal table {
250  margin: auto;
251  border-collapse: collapse;
252  border-spacing: 0;
253}
254
255.reveal table th {
256  font-weight: bold;
257}
258
259.reveal table th,
260.reveal table td {
261  text-align: left;
262  padding: 0.2em 0.5em 0.2em 0.5em;
263  border-bottom: 1px solid;
264}
265
266.reveal table th[align=center],
267.reveal table td[align=center] {
268  text-align: center;
269}
270
271.reveal table th[align=right],
272.reveal table td[align=right] {
273  text-align: right;
274}
275
276.reveal table tbody tr:last-child th,
277.reveal table tbody tr:last-child td {
278  border-bottom: none;
279}
280
281.reveal sup {
282  vertical-align: super;
283  font-size: smaller;
284}
285
286.reveal sub {
287  vertical-align: sub;
288  font-size: smaller;
289}
290
291.reveal small {
292  display: inline-block;
293  font-size: 0.6em;
294  line-height: 1.2em;
295  vertical-align: top;
296}
297
298.reveal small * {
299  vertical-align: top;
300}
301
302.reveal img {
303  margin: var(--r-block-margin) 0;
304}
305
306/*********************************************
307 * LINKS
308 *********************************************/
309.reveal a {
310  color: var(--r-link-color);
311  text-decoration: none;
312  transition: color 0.15s ease;
313}
314
315.reveal a:hover {
316  color: var(--r-link-color-hover);
317  text-shadow: none;
318  border: none;
319}
320
321.reveal .roll span:after {
322  color: #fff;
323  background: var(--r-link-color-dark);
324}
325
326/*********************************************
327 * Frame helper
328 *********************************************/
329.reveal .r-frame {
330  border: 4px solid var(--r-main-color);
331  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
332}
333
334.reveal a .r-frame {
335  transition: all 0.15s linear;
336}
337
338.reveal a:hover .r-frame {
339  border-color: var(--r-link-color);
340  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
341}
342
343/*********************************************
344 * NAVIGATION CONTROLS
345 *********************************************/
346.reveal .controls {
347  color: var(--r-link-color);
348}
349
350/*********************************************
351 * PROGRESS BAR
352 *********************************************/
353.reveal .progress {
354  background: rgba(0, 0, 0, 0.2);
355  color: var(--r-link-color);
356}
357
358/*********************************************
359 * PRINT BACKGROUND
360 *********************************************/
361@media print {
362  .backgrounds {
363    background-color: var(--r-background-color);
364  }
365}
366:root {
367  --r-bold-color: #FFB86C;
368  --r-italic-color: #F1FA8C;
369  --r-inline-code-color: #50FA7B;
370  --r-list-bullet-color: #8BE9FD;
371}
372
373.reveal strong, .reveal b {
374  color: var(--r-bold-color);
375}
376
377.reveal em, .reveal i, .reveal blockquote {
378  color: var(--r-italic-color);
379}
380
381.reveal code {
382  color: var(--r-inline-code-color);
383}
384
385.reveal ul {
386  list-style: none;
387}
388
389.reveal ul li::before {
390  content: "•";
391  color: var(--r-list-bullet-color);
392  display: inline-block;
393  width: 1em;
394  margin-left: -1em;
395}
396
397.reveal ol {
398  list-style: none;
399  counter-reset: li;
400}
401
402.reveal ol li::before {
403  content: counter(li) ".";
404  color: var(--r-list-bullet-color);
405  display: inline-block;
406  width: 2em;
407  margin-left: -2.5em;
408  margin-right: 0.5em;
409  text-align: right;
410}
411
412.reveal ol li {
413  counter-increment: li;
414}