:root {
    --adeptask-primary-color: #EB58D7;
    --adeptask-secondary-color: #EF6CDB;
    --adeptask-subtle-color: #FBDBF6;

    /*Positioning*/
    --top-margin: 10vh;
    --left-margin: 10vw;
    --top-margin-compact: 2vh;
    --left-margin-compact: 2vw;

    /* Scaling */
    --base-font-size: calc(var(--ring-unit) * 4);
    --font-size: calc(var(--base-font-size) * 1.1);
    --heading-1-size: calc(var(--base-font-size) * 1.6);
    --heading-2-size: calc(var(--base-font-size) * 1.4);

}


section {
    background: var(--ring-content-background-color) !important;
    color: var(--ring-text-color) !important;
    font-family: var(--ring-font-family), sans-serif !important;

}


p, li {
    font-size: var(--font-size) !important;
}


li {
    background: linear-gradient(110deg, var(--adeptask-subtle-color) 30vw, transparent 50vw);
    padding: calc(var(--ring-unit) * 1)  calc(var(--ring-unit) * 2);
    margin-bottom: calc(var(--ring-unit) * 1.5) ;
    /*border-bottom: 2px solid var(--adeptask-secondary-color);*/
    /*border-left: 5px solid var(--adeptask-secondary-color);*/

    border-radius: var(--ring-border-radius-small) !important;
    list-style: none;
    opacity: 0;
    transform: translateX(-100%);
    animation: slideIn 0.3s forwards;
}

li li {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    margin-top: -30px!important;
    :before {
        color: var(--adeptask-primary-color);
        font-size: calc(var(--font-size)*1.4);
     content: "⎣"
    }
}

li:nth-child(1) {
    animation-delay: 0s;
}

li:nth-child(2) {
    animation-delay: 150ms;

}

li:nth-child(3) {
    animation-delay: 250ms;

}

li:nth-child(4) {
    animation-delay: 325ms;

}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: scaleX(0.95) scaleY(0.95);
        transform-origin: left;
    }
    to {
        opacity: 1;
        transform: scaleX(1) scaleY(1);
        transform-origin: left;
    }
}


li::before {
    width: 100px!important;
    height: 100% !important;
    background: red!important;
    /*content: "• "; !*TODO using a space here is silly*!*/
}


h1,h2,h3,h4,h5,h6 {
    strong {
        color: var(--adeptask-primary-color) !important;
    }
}

h1, h2, h3, h4, h5 {
    color: var(--ring-heading-color) !important;
}

h6 {color: var(--ring-heading-color) !important;}


h1 {font-size: var(--heading-1-size) !important;}

h2 {font-size: var(--heading-2-size) !important;}

a {
    color: var(--adeptask-primary-color) !important;
}

.footer {
    color: var(--ring-secondary-color) !important;
}

blockquote {
    color: var(--ring-secondary-color) !important;
    border-color: var(--ring-borders-color) !important;
    border-radius: 4px !important;
}


pre.mermaid {
    position: absolute;
    width: 70vw;
    max-width: 100vw;
    background: none!important;
    border: none!important;
    box-shadow: var(--ring-dialog-shadow) !important;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);


}


pre.mermaid svg {
    max-width: 80vw!important;
    height: 40vh!important;

}

.compact pre.mermaid svg {
    height: 50vh!important;
}

pre.mermaid.mblock {
    position: relative;
    translate: none!important;
    padding: 0;
    top:calc(var(--top-margin-compact)*5 + var( --heading-1-size));

    svg{
        height: unset!important;
        padding: 0!important;
    }

}


/* Image centering */
img[alt~="center"] {
    position: absolute;
    height: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: var(--ring-dialog-shadow);
}


/*Make the heading stick to the top*/
section:not(.special) {
    justify-content: start !important;
    padding-top: calc(var(--top-margin) * 2) !important;
    padding-left: calc(var(--left-margin) * 1.1) !important;
    h1 {
        position: absolute;
        top: var(--top-margin);
        left: var(--left-margin);
    }
}

section.compact {
    /* Image centering */
    img[alt~="center"] {
        height: 75%;
    }

    justify-content: start !important;
    padding-top: calc(var(--top-margin-compact)*2 + var( --heading-1-size)) !important;
    padding-left: calc(var(--left-margin-compact) * 1.1) !important;

    h1 {
        position: absolute;
        top: var(--top-margin-compact);
        left: var(--left-margin-compact);
    }

}


section.title h1 {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translate(0, -50%);
    left: 0;
    font-size: 2.4em !important;
}

section.title2 h1 {
    font-size: 2em !important;
}