dracula.css

@charset "UTF-8";
/*!
 * Marp Dracula theme.
 * @theme dracula
 * @author Daniel Nicolas Gisolfi
 *
 * @auto-scaling true
 * @size 4:3 960px 720px
 * @size 16:9 1280px 720px
 */
 
@import url("https://fonts.googleapis.com/css?family=Lato:400,900|IBM+Plex+Sans:400,700");

:root {
  --dracula-background: #282a36;
  --dracula-current-line: #44475a;
  --dracula-foreground: #f8f8f2;
  --dracula-comment: #6272a4;
  --dracula-cyan: #8be9fd;
  --dracula-green: #50fa7b;
  --dracula-orange: #ffb86c;
  --dracula-pink: #ff79c6;
  --dracula-purple:#bd93f9;
  --dracula-red: #ff5555;
  --dracula-yellow: #f1fa8c;
}

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: var(--dracula-background);
}

/* Dracula Foreground */
.hljs,
.hljs-subst,
.hljs-typing,
.hljs-variable,
.hljs-template-variable {
    color: var(--dracula-foreground);
}

/* Dracula Comment */
.hljs-comment,
.hljs-quote,
.hljs-deletion {
    color: var(--dracula-comment);
}

/* Dracula Cyan */
.hljs-meta .hljs-doctag,
.hljs-built_in,
.hljs-selector-tag,
.hljs-section,
.hljs-link,
.hljs-class {
    color: var(--dracula-cyan);
}


/* Dracula Green */
.hljs-title {
    color: var(--dracula-green);
}

/* Dracula Orange */
.hljs-params {
    color: var(--dracula-orange);
}

/* Dracula Pink */
.hljs-keyword {
    color: var(--dracula-pink);
}

/* Dracula Purple */
.hljs-literal,
.hljs-number {
    color: var(--dracula-purple);
}

/* Dracula Red */
.hljs-regexp {
    color: var(--dracula-red);
}

/* Dracula Yellow */
.hljs-string,
.hljs-name,
.hljs-type,
.hljs-attr,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-template-tag {
    color: var(--dracula-yellow);
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-title,
.hljs-section,
.hljs-doctag,
.hljs-type,
.hljs-name,
.hljs-strong {
  font-weight: bold;
}

.hljs-params,
.hljs-emphasis {
 font-style: italic;
}

svg[data-marp-fitting=svg] {
  max-height: 580px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0.5em 0 0 0;
  color: var(--dracula-pink);
}
h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
  font-weight: inherit;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.2em;
}

h3 {
  font-size: 1.3em;
}

h4 {
  font-size: 1.1em;
}

h5 {
  font-size: 1em;
}

h6 {
  font-size: 0.9em;
}

p,
blockquote {
  margin: 1em 0 0 0;
}

ul > li,
ol > li {
  margin: 0.1em 0 0 0;
  color:  var(--dracula-cyan);
}
ul > li > p,
ol > li > p {
  margin: 0.4em 0 0 0;
}

code {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6em;
  letter-spacing: 0;
  margin: -0.1em 0.15em;
  padding: 0.1em 0.1em;
  vertical-align: baseline;
  color: var(--dracula-green);
}

pre {
  display: block;
  margin: 1em 0 0 0;
  min-height: 1em;
  overflow: visible;
}
pre code {
  box-sizing: border-box;
  margin: 0;
  min-width: 100%;
  padding: 0.5em;
  font-size: 0.7em;
}
pre code svg[data-marp-fitting=svg] {
  max-height: calc(580px - 1em);
}

blockquote {
  margin: 1em 0 0 0;
  padding: 0 1em;
  position: relative;
  color: var(--dracula-orange);
}
blockquote::after, blockquote::before {
  content: "“";
  display: block;
  font-family: "Times New Roman", serif;
  font-weight: bold;
  position: absolute;
  color: var(--dracula-green);
}
blockquote::before {
  top: 0;
  left: 0;
}
blockquote::after {
  right: 0;
  bottom: 0;
  transform: rotate(180deg);
}
blockquote > *:first-child {
  margin-top: 0;
}

mark {
  background: transparent;
}

table {
  font-size: 0.5em;
  border-spacing: 0;
  border-collapse: collapse;
  margin: 0.2em 0 0 0;
}
table th,
table td {
  padding: 0.2em 0.4em;
  border-width: 1px;
  border-style: solid;
}

section {
  font-size: 33px;
  font-family: "IBM Plex Sans";
  line-height: 1.35;
  letter-spacing: 1.25px;
  padding: 70px;
  color: var(--dracula-foreground);
  background-color: var(--dracula-background);
}
section > *:first-child,
section > header:first-child + * {
  margin-top: 0;
}
section a,
section mark {
  color: var(--dracula-red);
}
section code {
  background: var(--dracula-current-line);
  color: var(--dracula-current-green);
}
section h1 strong,
section h2 strong,
section h3 strong,
section h4 strong,
section h5 strong,
section h6 strong {
  color: var(--dracula-current-line);
}
section pre > code {
  background: var(--dracula-current-line);
}
section header,
section footer,
section section::after,
section blockquote::before,
section blockquote::after {
  color: var(--dracula-comment);
}
section table th,
section table td {
  border-color:  var(--dracula-current-line);
}
section table thead th {
  background: var(--dracula-current-line);
  color: var(--dracula-yellow);
}
section table tbody > tr:nth-child(even) td,
section table tbody > tr:nth-child(even) th {
  background: var(--dracula-current-line);
}

header,
footer,
section::after {
  box-sizing: border-box;
  font-size: 66%;
  height: 70px;
  line-height: 50px;
  overflow: hidden;
  padding: 10px 25px;
  position: absolute;
  color: var(--dracula-comment);
}

header {
  left: 0;
  right: 0;
  top: 0;
}

footer {
  left: 0;
  right: 0;
  bottom: 0;
}

section::after {
  right: 0;
  bottom: 0;
  font-size: 80%;
}