@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&display=swap");

:root {
  --hrt-orange: #ff8200;
  --hrt-amber: #ffc180;
  --hrt-black: #151526;
  --hrt-space: #1f1f38;
  --hrt-graphite: #535461;
  --hrt-slate: #78708c;
  --hrt-ghost: #eeeff8;
  --hrt-white: #ffffff;
}

.reveal-viewport {
  background: var(--hrt-black);
  background-color: var(--hrt-black);
}

.reveal {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 42px;
  font-weight: 400;
  color: var(--hrt-ghost);
}

.reveal h1 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 300;
  color: var(--hrt-white);
  font-size: 2.2em;
  line-height: 1.15em;
  margin: 0 0 20px 0;
  text-transform: none;
  text-shadow: none;
}

.reveal h2 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  color: var(--hrt-orange);
  font-size: 1.5em;
  line-height: 1.3em;
  margin: 0 0 20px 0;
  text-transform: none;
  text-shadow: none;
}

.reveal h3 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
  color: var(--hrt-white);
  font-size: 1.2em;
  line-height: 1.3em;
  margin: 0 0 20px 0;
  text-transform: none;
  text-shadow: none;
}

.reveal h4 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
  color: var(--hrt-slate);
  font-size: 1em;
  line-height: 1.3em;
  margin: 0 0 20px 0;
  text-transform: none;
  text-shadow: none;
}

.reveal p {
  margin: 20px 0;
  line-height: 1.6;
}

.reveal strong,
.reveal b {
  font-weight: 700;
}

.reveal em {
  font-style: italic;
  color: var(--hrt-amber);
}

.reveal a {
  color: var(--hrt-orange);
  text-decoration: none;
  transition: color 0.15s ease;
}

.reveal a:hover {
  color: var(--hrt-amber);
  text-shadow: none;
  border: none;
}

.reveal ul,
.reveal ol {
  display: block;
  text-align: left;
  margin: 0 0 0 1em;
}

.reveal ul li,
.reveal ol li {
  margin-bottom: 0.4em;
}

.reveal ul li::marker {
  color: var(--hrt-orange);
}

.reveal ol li::marker {
  color: var(--hrt-orange);
}

.reveal blockquote {
  background: var(--hrt-space);
  border-left: 4px solid var(--hrt-orange);
  padding: 20px 30px;
  font-style: italic;
  color: var(--hrt-ghost);
  width: 90%;
  margin: 20px auto;
  box-shadow: none;
}

.reveal pre {
  width: 100%;
  box-shadow: none;
  text-align: left;
}

.reveal pre code {
  font-family: "IBM Plex Mono", monospace;
  background: rgba(10, 10, 25, 0.6);
  border-radius: 6px;
  padding: 15px 20px;
  font-size: 0.55em;
  line-height: 1.4;
  max-height: 500px;
}

.reveal code {
  font-family: "IBM Plex Mono", monospace;
  color: var(--hrt-amber);
}

.reveal pre code {
  color: var(--hrt-ghost);
}

.reveal .slides section .fragment.highlight-current-blue.current-fragment {
  color: var(--hrt-orange);
}

.reveal .controls {
  color: var(--hrt-orange);
}

.reveal .progress {
  background: var(--hrt-space);
}

.reveal .progress span {
  background: var(--hrt-orange);
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
}

.reveal .slide-number {
  color: var(--hrt-slate);
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  background: transparent;
}

::selection {
  color: var(--hrt-white);
  background: var(--hrt-orange);
}