:root {
    --sd-heading1-size: 5.5vw;
    --sd-heading1-line-height: 1;
    --sd-heading2-size: 5vw;
    --sd-heading2-line-height: 1;
    --sd-text-size: 2.2vw;
    --sd-text-line-height: 1.2;
    --sd-caption-font-size: 1vw;
    --sd-caption-line-height: 1;

    --sd-background-color: rgb(88, 200, 235);
    --sd-heading-color: #fff;
    --sd-text-color: #fcfcfc;
    --sd-primary-color: rgba(209, 51, 63, 0.97);
    --sd-caption-color: rgba(255, 255, 255, 0.7);
    --sd-caption-bgcolor: rgba(36, 36, 36, 0.7);

    /* SpeakerView */
    --sd-sv-timer-size: 80px;
    --sd-sv-text-size: 40px;
    --sd-sv-text-line-height: 1.2;
    --sd-sv-background-color: #242424;
    --sd-sv-text-color: rgba(255, 255, 255, 0.87);
}

/* Slides backgrounds */

.cover {
    background-image: url(backgrounds/andy-hermawan-O1jUvZX9DOA-unsplash.webp);
    background-size: cover;

    h1 {
        margin-left: 50%;
    }
}

.bun::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0.05;
    background: url("./backgrounds/Bun.svg");
    background-size: 256px;
    transform: rotate(-12deg) scale(1.35);
    animation: slide 30s linear infinite;
    pointer-events: none;
}

@keyframes slide {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 256px 224px;
    }
}

/* override html tags */

pre {
    font-size: 1.3vw;
    margin: 1vh auto;
    background-color: #fff;
    color: #000;
    padding: 10px 20px;
    border-radius: 20px;
}

blockquote {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 1vh 2vw;
    border-radius: 20px;
    font-size: 0.8em;
}

iframe {
    border-radius: 20px;
}
/* override plugins */

.sd-qrcode {
    border-radius: 20px;

    & .sd-qrcode-icon img {
        border-radius: 20px;
        border: 4px solid #000;
    }
}

.xterm-viewport {
    border-radius: 20px;
}

/* components */

.bird {
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
        background: white;
        border-radius: 100%;
        width: 200px;
    }

    & .sd-qrcode {
        width: 200px;
    }
}

/* templates */

.mid-cover-right .img {
    position: relative;

    &::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background: linear-gradient(
            to right,
            rgba(88, 200, 235, 0.5),
            rgba(88, 200, 235, 0)
        );
        z-index: 1;
    }
}

.mid-cover-left .img {
    position: relative;

    &::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background: linear-gradient(
            to left,
            rgba(88, 200, 235, 0.5),
            rgba(88, 200, 235, 0)
        );
        z-index: 1;
    }
}

/* specifics */

.sd-logo-svg {
    width: 300px;
    height: 300px;
    background-color: #fff;
    color: #000;
    border-radius: 20px;
    transition:
        background-color 1s ease,
        color 1s ease;
}

.invlogo {
    .sd-logo-svg {
        background-color: #000;
        color: #fff;
    }
}

.qrfeed {
    svg {
        stroke: var(--sd-primary-color);
    }
}