@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap');


:root {
    --r-background-color: #EEEEEE;
    --r-main-color: #111012;
    --r-main-font: 'Noto sans';
    --r-heading-color: #222333;
    --r-link-color: #8FAADC;
    --progress-bar-color: #6ABFAD;
}

body {
    /* Footer styles for devfest-logo if body has .title */

    &.title footer:has(.event-logo) {
        z-index: 10;
        position: absolute;
        left: 35%;
        bottom: 0;
        min-height: 80px;
        text-align: center;
        width: 600px;
        padding: 2em;
    }

    /* Footer styles for onepoint-logo if body does not have .present.demo or .title */

    &:not(:has(.present.demo)):not(.title) footer:has(.onepoint-logo) {
        z-index: 10;
        position: absolute;
        left: 0;
        width: 100%;
        bottom: 0;
        min-height: 80px;
        text-align: center;
    }

    .reveal {
        h1 {
            --r-heading1-size: 82px;
            color: var(--r-heading-color);
            text-shadow: 1px 1px 10px #fff, 1px 1px 10px #ccc;
            position: fixed;
            left: 28px;
            width: 100%;
            text-align: center;
        }

        .title.present h2 {
            position: fixed;
            top: 208px;
            left: 630px;
            width: 100%;
            font-family: var(--r-main-font);
            text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
            text-transform: none;
        }

        .to-the-bottom {
            position: absolute;
            left: 50%;
            bottom: 20px;
            transform: translate(-50%, -50%);
            margin: 0 auto;
        }

        h2 {
            --r-heading-color: #000000;
            position: fixed;
            left: 50%;
            top: 6px;
            transform: translateX(-50%);
            width: 100%;
        }

        ul {
            list-style-type: none;
        }

        .progress {
            color: var(--progress-bar-color);
            height: 7px;
        }

        .blur-background {
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.5);
        }
    }

    .transparency.slide-background.present {
        opacity: 0.40;
    }

    .big {
        font-size: 60px;
        color: #012d3f;
    }

    img {
        border-radius: 10px;
    }

    .vertical-align-middle > p,
    .vertical-align-middle > p > span,
    .vertical-align-middle > p > span > img {
        vertical-align: middle;
        margin: 0;
    }

    .important-text > * {
        font-size: xxx-large;
        font-weight: bold;
        color: #012d3f;
    }

    .small {
        font-size: small;
    }

    .medium {
        font-size: 38px;
    }

    .column.has-text-right > div > div.hdlist.small > table {
        margin-right: 0;
    }

    .column.has-text-left > div > div.hdlist.small > table {
        margin-left: 0;
    }

    .blur {
        filter: blur(4px);
    }

    li {
        list-style-type: none;
    }

    audio {
        display: none;
    }

    .down {
        position: fixed;
        bottom: 0;
        right: 0;
    }
}