.reveal-wrapper {
  flex-grow: 1;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: inherit;
}

.reveal {
  width: 100% !important;
  height: 100% !important;
  background-color: transparent;

  --r-background-color: transparent;
  --r-controls-color: var(--color-navy);
  --r-progress-color: var(--color-red);

  --r-main-font: "Roboto", sans-serif;
  --r-main-color: var(--color-text);

  --r-heading-font: "Roboto Slab", serif;
  --r-heading-color: var(--color-navy);
  --r-heading-font-weight: 700;
  --r-heading-text-transform: none;

  --r-block-margin: min(2vh, 16px);
  
  --r-code-font: "Roboto Mono", monospace;
}

.reveal .slides {
  width: 100%;
  font-size: 3vh;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.reveal .slides section ::selection {
  color: var(--color-navy);
  background-color: color-mix(in srgb, var(--color-highlight), transparent 15%);
}

.reveal .slides section ::-moz-selection {
  color: var(--color-navy);
  background-color: color-mix(in srgb, var(--color-highlight), transparent 15%);
}

.reveal .slides section h1,
.reveal .slides section h2,
.reveal .slides section h3,
.reveal .slides section h4,
.reveal .slides section h5,
.reveal .slides section h6 {
  text-align: left;
  width: 100%;
}

.reveal .slides section p,
.reveal .slides section ol,
.reveal .slides section ul,
.reveal .slides section li {
  text-align: left;
  width: 100%;
}

.reveal .slides section:has(> h1:first-child) {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  padding-top: 0 !important;
}

.reveal .slides section > h1:first-child {
  font-size: 10vh;
  position: relative;
  margin: min(4vh, 32px) 0;
  width: auto;
  border-bottom: min(1.5vh, 12px) solid var(--color-red);
  padding-bottom: min(2vh, 16px);
}

.reveal .slides section:has(> h1:first-child) p {
  text-align: center;
}

.reveal .slides section:has(> h2:first-child) {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  text-align: left;
  height: 100%;
  padding-top: 0 !important;
}

.reveal .slides section > h2:first-child {
  font-size: 8vh;
  position: relative;
  margin: 4vh 0;
  width: auto;
  text-decoration: underline;
  text-decoration-color: var(--color-red);
  text-decoration-thickness: min(1vh, 8px);
  text-underline-offset: min(4vh, 32px);
}

.reveal .slides section > :is(h3, h4, h5, h6):first-child {
  font-size: 4.5vh;
  padding-bottom: min(2vh, 16px);
  margin-bottom: min(3vh, 32px);
}

.reveal .slides section > h3:first-child {
  border-bottom: min(1vh, 8px) solid var(--color-red);
}

.reveal .slides section > h4:first-child {
  border-bottom: min(0.75vh, 6px) dotted var(--color-red);
}

.reveal .slides section > h5:first-child {
  border-bottom: min(0.5vh, 4px) dashed var(--color-red);
}

.reveal .slides section > h6:first-child {
  text-decoration: underline;
  text-decoration-color: var(--color-red);
  text-decoration-thickness: min(1vh, 8px);
  text-underline-offset: min(1vh, 8px);
  border-bottom: none;
}

.reveal .slides section a {
  color: var(--color-navy);
  background-color: color-mix(in srgb, var(--color-highlight), transparent 60%);
  text-decoration: dotted underline;
  text-decoration-color: var(--color-navy);
  text-decoration-thickness: min(0.25vh, 2px);
  text-underline-offset: min(0.5vh, 4px);
  transition: all 0.2s ease-in-out;
}

.reveal .slides section a:hover {
  color: var(--color-red);
  background-color: color-mix(in srgb, var(--color-highlight), transparent 45%);
  text-decoration: dotted underline;
  text-decoration-thickness: min(0.25vh, 2px);
  text-underline-offset: min(1.25vh, 10px);
}

.reveal .slides section ol,
.reveal .slides section ul {
  margin: 0 0 0 min(4vh, 32px);
  padding: 0 0 0 min(3vh, 24px);
}

.reveal .slides section ul li input[type="checkbox"] {
  display: none;
}

.reveal .slides section ul li:has(input[type="checkbox"]) {
  list-style-type: none;
  position: relative;
  padding-left: 2vh;
}

.reveal .slides section ul li:has(input[type="checkbox"]:not(:checked))::before {
  content: "○";
  color: var(--color-navy);
  position: absolute;
  left: calc(-1 * min(3vh, 32px));
  font-weight: bold;
}

.reveal .slides section ul li:has(input[type="checkbox"]:checked)::before {
  content: "✓";
  color: #32a852;
  position: absolute;
  left: calc(-1 * min(3vh, 32px));
  font-weight: bold;
}

.reveal .slides section ul li:has(input[type="checkbox"]:checked) {
  text-decoration: line-through;
  color: color-mix(in srgb, var(--color-text), transparent 50%);
}

.reveal .slides section pre {
  width: 90%;
  background: #22272e;
  border: 1px solid #444c56;
  border-radius: min(1vh, 8px);
  padding-top: 3.5vh;
  position: relative;
  box-shadow: var(--color-shadow-dots) 0px min(0.5vh, 8px) min(1vh, 16px) 0px;
  overflow: hidden;
}

.reveal .slides section pre::before {
  content: "";
  position: absolute;
  top: 1.2vh;
  left: 1.2vh;
  height: 1.2vh;
  width: 5vh;
  background-image:
    radial-gradient(circle, #ff5f56 0.5vh, transparent 0.5vh),
    radial-gradient(circle, #ffbd2e 0.5vh, transparent 0.5vh),
    radial-gradient(circle, #27c93f 0.5vh, transparent 0.5vh);
  background-size: 1.2vh 1.2vh;
  background-position:
    0% center,
    50% center,
    100% center;
  background-repeat: no-repeat;
  z-index: 10;
}

.reveal .slides section .hljs-ln-numbers {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  text-align: right;
  color: var(--color-cream);
  vertical-align: top;
  padding-right: min(1vh, 16px);
  min-width: min(2vh, 32px);
}

.reveal .slides section.hljs-ln-code {
  padding-left: min(1vh, 16px);
}

.reveal .slides section > table {
  margin: auto;
  border-collapse: collapse;
  border-spacing: 0;
  width: 90%;
  font-size: 2vh;
}

.reveal .slides section > table thead th {
  background: var(--color-navy);
  color: var(--color-cream);
  font-family: var(--r-heading-font);
  font-weight: 700;
  padding: min(1.5vh, 12px);
  border: none;
}

.reveal .slides section > table thead tr:first-child th:first-child {
  border-radius: min(1vh, 8px) 0 0 0;
}
.reveal .slides section > table thead tr:first-child th:last-child {
  border-radius: 0 min(1vh, 8px) 0 0;
}

.reveal .slides section > table tbody tr:nth-child(even) {
  background-color: color-mix(in srgb, var(--color-navy), transparent 96%);
}

.reveal .slides section > table tbody td,
.reveal .slides section > table tbody tr:last-child td {
  padding: min(1.5vh, 12px) min(1.5vh, 12px);
  border-bottom: 1px solid
    color-mix(in srgb, var(--color-navy), transparent 90%);
  color: var(--color-text);
}

.reveal .slides section > table tbody tr:hover {
  background-color: color-mix(
    in srgb,
    var(--color-highlight),
    transparent 80%
  );
  transition: background 0.2s ease;
}

.reveal .slides section hr {
  border: none;
  border-top: min(0.5vh, 4px) dotted var(--color-red);
  background: transparent;
  height: 0;
  margin: min(2vh, 16px) auto;
  width: 80%;
  opacity: 0.8;
}

.reveal .slides section blockquote {
  background: color-mix(in srgb, var(--color-highlight), transparent 75%);
  box-shadow: none;
  width: 90%;
  padding: min(3vh, 24px) min(3.5vh, 28px);
  font-style: normal;
  
  border-left: min(1vh, 8px) solid var(--color-navy);
  border-radius: min(1vh, 8px);
  
  font-family: var(--r-heading-font);
  line-height: 1.5;
  text-align: left;
}