minislides.css

@import url('https://fonts.googleapis.com/css2?family=Gentium+Basic:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');

:root {
    --background-light: #fdfdfd;
    --text-dark: #101010;
    --blue: #4271ae;
    --green: #718c00;
    --orange: #f5871f;
    --gray-light: #bbbbbb;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background: gray;
}

.slides section {
    position: relative;
    box-sizing: border-box;
    background: var(--background-light);
    margin: 16px auto 8px auto;
    padding: 2rem;
    height: calc(100vh - 16px);
    width: calc((100vh - 16px) * 1.414);
    max-width: calc(100vw - 16px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    font-family: 'Gentium Basic', serif;
}

.slides section:nth-child(1) {
    margin-top: 8px;
}

@media (max-width: 600px), (max-height: 500px) {
    .slides section {
        height: auto;
        min-height: calc(100vh - 16px);
    }
}

.slides.numbered {
    counter-reset: section;
}

.slides.numbered section::after {
    position: absolute;
    bottom: 1rem;
    right: 1.5rem;
    counter-increment: section;
    content: counter(section);
    font-size: 1rem;
    color: var(--text-dark);
    opacity: 0.7;

}

.slides.numbered section:nth-child(1)::after {
    counter-increment: none;
    content: '';
}

@media print {
    body {
        background: var(--background-light);
    }
    .slides section {
        margin: 0 !important;
        height: 100vh !important;
        width: 100% !important;
        page-break-after: always;
        page-break-inside: avoid;
    }
}

.slides h1,
.slides h2,
.slides h3,
.slides p,
.slides ul,
.slides ol,
.slides blockquote {
    text-align: left;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    width: 70%;
    max-width: 70%;
    color: var(--text-dark);
}

@media (max-width: 500px) {
    .slides h1,
    .slides h2,
    .slides h3,
    .slides p,
    .slides ul,
    .slides ol,
    .slides blockquote {
        width: 90%;
        max-width: 90%;
    }
}

.slides.centered h1, .slides section.centered h1,
.slides.centered h2, .slides section.centered h2,
.slides.centered h3, .slides section.centered h3,
.slides.centered p, .slides section.centered p,
.slides.centered ul, .slides section.centered ul,
.slides.centered ol, .slides section.centered ol,
.slides.centered blockquote, .slides section.centered blockquote {
    text-align: center;
    width: auto;
}

.slides section .centered {
    text-align: center;
}

.slides h1 {
    padding: 0 0 1rem 0;
    font-size: 3rem;
    opacity: 0.85;
    box-shadow: inset 0 -3px var(--orange);
}
.slides .subtitle {
    margin: 1rem 0;
    font-size: 1.5rem;
    opacity: 0.7;
}
.slides .author {
    margin: 4rem 0 0 0;
    font-size: 1.9rem;
    font-style: italic;
}
.slides .affiliation {
    margin: 0.1rem 0;
    font-style: italic;
    opacity: 0.7;
}

.slides h2 {
    font-size: 2rem;
    margin: 1.5rem 0;
}
.slides h3 {
    font-size: 1.7rem;
    margin: 1rem 0 0.5rem 0;
}

.slides p {
    font-size: 1.5rem;
    margin: 0.5rem 0;
    line-height: 1.4em;
}
.slides ul,
.slides ol {
    font-size: 1.5rem;
    margin: 0.3rem 0;
    line-height: 1.2em;
}

.slides blockquote {
    margin: 1rem 0;
    box-shadow: inset 8px 0 var(--gray-light);
}
.slides blockquote p {
    width: auto;
    padding-left: 6ch;
    opacity: 0.9;
    font-style: italic;
}

.slides i,
.slides em {
    color: var(--green);
}

.slides b,
.slides strong {
    color: var(--orange);
}

.slides a {
    text-decoration: none;
    color: var(--blue);
}

.slides code,
.slides pre {
    font-family: 'Fira Code', monospace;
    font-size: 1.2rem;
    background: none;
}
.slides p code,
.slides ul code,
.slides ol code {
    color: var(--blue);
}
.slides pre {
    text-align: left;
    max-width: 100%;
}
.slides pre code {
    margin: 1rem 0;
    overflow-x: scroll;
}

.slides img {
    max-width: 70%;
    max-height: 80%;
    margin: 1rem 0;
}
.slides img.large {
    max-width: 100%;
    max-height: 100%;
}

.slides table {
    font-size: 1.5rem;
    margin: 1rem 0;
    overflow: scroll;
    border-collapse: collapse;
}

.slides th,
.slides td {
    padding: 0.2rem 0.5rem;
}
.slides thead {
    border-bottom: 2px solid var(--text-dark);
}
.katex {
    font-size: 1.07em !important;
}