@import url("https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/reveal.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/theme/dracula.min.css");

@import url("https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/plugin/highlight/monokai.min.css");


:root {
    --r-heading1-size: 2em;
    --r-heading2-size: 1.5em;

    --r-main-font-size: 30px;

    --r-inline-code-color: var(--r-inline-code-color);

    /* NODES Theme */
    --r-background-color: #223B4A;
    --r-heading-color: #7DCC3D;
    --r-bold-color: #7DCC3D;
    --r-link-color: var(--r-inline-code-color);

    --red: #F04438;
    --green: #12B76A;
    --grey: #A5A5A5;
    --lighter-background: #264252;
}

.reveal .slides  {
    height: 800px;
    width: 1200px;
    /*max-height: 90vh;*/
    /*max-width: 90vw;*/
}

section {
    padding-top: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

section h1:only-child {
    /*outline: 2px solid red;*/
    position: relative;
    top: 30%;
}

section h1 {
    position: absolute;
    top: 10px;
    width: 100%;
    text-align: center;
}

.reveal a {
    text-decoration: underline;
}

.reveal .slides {
    text-align: start;
}
.reveal .slides h1,
.reveal .slides h2,
.reveal .slides h3,
.reveal .slides h4,
.reveal .slides .centered,
.reveal .slides .mermaid {
    text-align: center;
}

.reveal iframe, .reveal img, .reveal video {
    max-width: 90%;
    max-height: 650px;
}

.reveal .slides .mermaid {
    /*max-height: 70vh;*/
    /*height: 70vh;*/

    max-height: 650px;
    height: 650px;

    svg {
        max-height: 100%;
    }
}

.warning-box {
    padding: 2rem;
    border-radius: 5px;
    margin: 2rem;
    border: 1px solid #F04438;
    background: #2a0e0c;
    color: #F04438;
}

.two-columns {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
}

.two-columns > * {
    flex: 1;
    min-width: 0; /* Prevents flex items from overflowing */
}

.card {
    padding: 1rem;
    background: var(--lighter-background);
    border-radius: 0.5rem;
}

.critical {
    color: var(--red) !important;
}

.success {
    color: var(--green) !important;
}

.disabled {
    color: var(--grey) !important;
}


/* Mermeid */

.node.default.red strong {
    color: var(--red);
}
.node.default.red .label-container {
    stroke: var(--red) !important;
}

.node.default.green strong {
    color: var(--green);
}
.node.default.green .label-container {
    stroke: var(--green) !important;
}

.node.default.pruned strong {
    color: var(--grey);
}
.node.default.pruned .label-container {
    stroke: var(--grey) !important;
}