@import '_base', '_githubcorner';

// MULTIMODAL DEMO


.reveal section a {text-decoration: underline;}
.reveal .modal a {text-decoration: underline;}

.reveal .example {
    border: 4px solid var(--code-full-bg);
    background: none;
    padding: 3vmin;
    // margin: 3vmin;
    border-radius: 0.5vmin;
    display: flex;
    flex-direction: row;
    gap: 1em;
    justify-content: center;
    align-items: center;
    font-style: initial;

    // align-content: center;

    a {
        display: flex;
        justify-content: center;
    }
    img {
        margin: 0;
        max-width: 100%;
        max-height: 100%;
        &.small {
            max-width: fit-content;
            max-height: 200px;
        }
    }
    &.small img {
        max-width: fit-content;
        max-height: 200px;
    }

}

p:last-child {
    margin-bottom: 0;
}

.reveal-viewport {
    &:not(.reveal-scroll) {
        .scrollvisible {
            display: none
        }
    }
    &.reveal-scroll {
        .scrollvisible {
            display: inline-block
        }
    }
}

.btn {
    font-size: inherit;
    font-family: inherit;
    display: inline-block;
    padding: 0.25em 1em;
    border: 1px solid;
    border-radius: 0.25em;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: inherit;
    background: none;
    &:hover {
        background: rgba(white, 0.1);
    }
}

.reveal blockquote {
    width: 100%;
    &.mm-content, &.hidden {
        display: none;
    }
}

.reveal blockquote p {
    margin-top: 0;
}

.slides section.present {
    transition: opacity 0.4s ease-in-out;
	.multimodal-open & {
        opacity: 0.75;
	}
}

.textcenter {
    text-align: center;
}

.reveal h2 {
    margin-bottom: 0 !important;
}


html {
    color-scheme: dark;
}

.videothumb:before {
    content: '';
    display: block;
    position: absolute;
    background: url(../../assets/img/play.svg) no-repeat center center;
    width: 100%;
    height: 100%;
}