:root {
--fg1: #aab3c0;
--fg2: #6e6e87;
--mg: #40404f;
--bg0: #373743;
--bg1: #2a2a33;
--bg2: #25252d;
--acc: #6087ae;
}
h1, h2, h3, code, p, ul, ol, li, blockquote {
color: var(--fg1);
}
a {
color: var(--acc);
}
blockquote {
font-style: italic;
margin: 0;
padding: 1rem;
background-color: var(--bg0);
}
pre {
margin: 0;
padding: 1rem;
padding-top: 0;
background-color: var(--bg0);
}
code {
color: var(--acc);
margin: 0;
padding: 0;
white-space: pre-wrap;
}
.checklist {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
body, html {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
background: var(--bg2);
overflow: hidden;
}
* {
box-sizing: border-box;
}
.progress-bar {
position: sticky;
top: 0;
background: var(--bg1);
border-bottom: none;
z-index: 1000;
}
.progress-container {
width: 100%;
height: 0.5rem;
background: var(--bg1);
position: relative;
}
img {
max-width: 33vw;
height: auto;
}
.progress-fill {
height: 100%;
background: var(--acc);
width: 0%;
transition: width .25s ease;
}
.progress-text {
position: absolute;
left: 2rem;
right: 2rem;
top: 1rem;
display: flex;
justify-content: space-between;
font-weight: bold;
font-weight: 400;
font-size: 0.8rem;
color: var(--acc);
}
.progress-section {
color: var(--fg2);
}
.content {
padding: 2rem;
}
.slide {
display: none;
background: var(--bg1);
margin-top: 0;
padding: 1rem;
box-shadow: none;
min-height:calc(100vh - 4.5rem);
}
.slide h1 {
margin-top: 0;
}