:root {
    --main-text-color: #363636;
    --secondary-color: #4768cb;
    --emphasis-color: #e95273;
}

.slidesRoot {
    position: relative;
}

.slidesRoot * {
    box-sizing: border-box;
    color: var(--main-text-color);
    font-family: 'Inter', 'Roboto', 'sans-serif';
}

.slidesRoot.presenterMode * {
    font-size: max(16px, 2vw);
}

.slidesRoot.presenterMode h1 {
    font-size: max(36px, 5vw);
}

.slidesRoot.presenterMode h2 {
    font-size: max(24px, 4vw);
}

.slidesRoot.presenterMode h3 {
    font-size: max(20px, 3vw);
}

.slidesRoot section {
    height: 100%;
    width: 100%;
}

.slidesRoot:not(.presenterMode) section {
    height: 100%;
    overflow-y: auto;
    position: absolute;
    top: 100vh;
    left: 0;
}

.slidesRoot.presenterMode article {
    height: min(100%, 100vh);
    position: absolute;
    left: 100vw;
    top: 0;
}

.slidesRoot article {
    overflow-y: auto;

    padding: 30px;

    width: 100%;
}

.slidesRoot.presenterMode .step {
    opacity: 0;
}

.slidesRoot article ul {
    list-style: disc inside;
}
.slidesRoot article ol {
    list-style: decimal inside;
}

.slidesRoot article ul li, .slidesRoot article ol li {
    margin-bottom: 20px;
}

.slidesRoot article ul li::marker, .slidesRoot article ol li::marker {
    color: var(--secondary-color);
}

.slidesNav .selected button {
    border-bottom: 2px var(--secondary-color) solid;
}

.slidesRoot ul.level2 {
    margin: 20px 0 0 30px;
    list-style: square inside;
}

.slidesRoot ul.level3 {
    margin: 20px 0 0 60px;
    list-style: disclosure-closed inside;
}

.slidesRoot.presenterMode code, .slidesRoot.presenterMode code * {
    font-size: max(16px, 1.5vw);
}

.slidesRoot:not(.presenterMode) code, .slidesRoot:not(.presenterMode) code * {
    font-size: 16px;
}

.slidesRoot.presenterMode code {
    padding-top: 50px;
}

.slidesRoot:not(.presenterMode) code {
    padding-top: 35px;
}

.slidesRoot code {
    border: 1px var(--secondary-color) solid;
    border-radius: 5px 0 0 0;

    background-color: #fff;
    padding: 50px 20px 20px 20px;

    display: block;
    margin-top: 10px;

    position: relative;
}

.slidesRoot code::after {
    content: "Code";

    position: absolute;
    left: 0;
    top: 0;

    display: inline-block;
    padding: 5px;

    background-color: var(--secondary-color);
    color: #fff;

}

.slidesRoot code .fullLine {
    display: block;
}

.slidesRoot:not(.presenterMode) code .fullLine {
    margin: 10px 0;
}

.slidesRoot code .comment {
    color: #aaa;
    font-style: italic;
}

.slidesRoot code .fullLine .comment {
    padding-left: 20px;
}

.slidesRoot code .codeLevel2 {
    padding-left: 20px;
}

.slidesRoot code .codeLevel3 {
    padding-left: 40px;
}

.slidesRoot .inlineCode {
    color: var(--emphasis-color);
    font-style: italic;
}

.slidesRoot .sideNode {
    font-size: 0.75em;
    font-style: italic;
}

.slidesRoot a {
    text-decoration: underline;
}

.slidesRoot.presenterMode a {
    font-size: 0.75em;
}

.slidesRoot img {
    max-height: 50vh;
    max-width: 100%;
}

.slidesRoot div.centered {
    text-align: center;
}

.slidesRoot img.smallImage {
    max-height: 200px;
    max-width: 100%;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        left: 0;
        opacity: 1;
    }

    to {
        left: 0;
        opacity: 0;
    }
}

@keyframes appearRight {
    from {
        left: 100vw;
    }

    to {
        left: 0;
    }
}

@keyframes appearLeft {
    from {
        left: -100vw;
    }

    to {
        left: 0;
    }
}

@keyframes appearTop {
    from {
        left: 0;
        top: -100vh;
    }

    to {
        left: 0;
        top: 0;
    }
}

@keyframes appearBottom {
    from {
        left: 0;
        top: 100vh;
    }

    to {
        left: 0;
        top: 0;
    }
}

@keyframes leaveRight {
    from {
        left: 0;
        top: 0;
    }

    to {
        left: 100vw;
        top: 0;
    }
}

@keyframes leaveLeft {
    from {
        left: 0;
        top: 0;
    }

    to {
        left: -100vw;
        top: 0;
    }
}

@keyframes leaveTop {
    from {
        left: 0;
        top: 0;
    }

    to {
        left: 0;
        top: -100vh;
    }
}

@keyframes leaveBottom {
    from {
        left: 0;
        top: 0;
    }

    to {
        left: 0;
        top: 100vh;
    }
}