/* Styles */

@import 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css';
@import 'fonts.css';
@import 'shower/shower.css';
@import 'blocks/badge.css';
@import 'blocks/caption.css';
@import 'blocks/progress.css';
@import 'blocks/region.css';
@import 'slide/slide.css';

.shower {
    /* darker green for better contrast */
    --color-key: #008A06;
}

.a11y {
    position: absolute;
    left: -9999px;
}

.caption {
    padding-right: 5em;
}

#logo {
    position: absolute;
    top: 0.8em;
    right: 0.8em;
    font: 2em courier,monospace;
    font-weight: normal;
}

.slide iframe {
    border: 0;
}

.slide.black div.next.cover {
    background: #000;
}

.slide .pad {
    margin-top: 2em;
}
.slide .pad img {
    margin-right: 1em;
}

.slide.title header,
.slide.title .bottom {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 0 var(--slide-right-side) 0 var(--slide-left-side);
    box-sizing: border-box;
    background: black;
    background: rgba(0,0,0,0.55);
}
.slide.title header {
    top: 50%;
    transform: translateY(-50%);
}
.slide.title header.top {
    top: 0;
    transform: none;
}
.slide.title header * {
    color: white;
}
.slide.title header h2 {
    line-height: 1.1;
    font-size: 3em;
    font-weight: bold;
    margin: .33em 0;
}
.slide.title header h2 span {
    display: table;
    font-size: 48px;
}
.slide.title .bottom {
    bottom: 0;
    padding-top: .5em;
    padding-bottom: .5em;
}
.slide.title .bottom * {
    padding: 0;
    margin: 0;
    color: white;
}
.slide.title > p {
    position: absolute;
    bottom: 3em;
}

.contact {
    text-align: center;
}
.contact .footnote {
    text-align: center;
    width: 100%;
    left: 0;
}
.contact ul > li:before {
    content: '';
}
.contact ul > li {
    line-height: 2.5em;
}
.contact ul img {
    margin-right: 0.5em;
    vertical-align: text-bottom;
}

/**
 * Notes mode
 * For when slides are used as notes to accompany another deck.
 */

.notes-mode .slide {
    overflow: auto;
}

/**
 * Footnotes, Tips & Changes
 * Tips idea borrowed from Ashley Bischoff:
 * http://www.handcoding.com/presentations/
 * https://animate.style/
 */

.slide p.footnote {
    position: absolute;
    bottom: 2em;
}
#cover .tip {
    font-size: 0.75em;
}
#cover .tip {
    color: #DDD;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    animation-delay: 10.0s;
}
.slide del {
    color: #767676;
}
/* #cover.black p.tip {
    color: black;
} */

@media (prefers-color-scheme: dark) {
    .slide {
        background-color: var(--color-black);
    }
    .shower,
    .slide h2 {
        color: white;
    }
    .slide > footer {
        /* background-color: var(--color-dark); */
        /* background-color: var(--color-key); */
        background-color: black;
        color: var(--color-light);
    }
    img { /* svg on an img tag */
        -webkit-filter: invert(.85); /* safari 6.0 - 9.0 */
        filter: invert(.85);
    }
}