img[alt~="medium"] {
    width: 40%;
}

img[alt~="logo"] {
    width: 10%;
    display: inline;
    float: left;
    padding: 0 10px;
}

iframe {
    border: none;
}

.fade-in-250 {
    opacity: 0;
    margin-right: -100px;
    animation: appear 500ms ease forwards, appear-text 250ms ease forwards;
    animation-delay: 1s;
}

.fade-out-250 {
    opacity: 1;
    margin-right: 0px;
    animation: disappear 500ms ease forwards, disappear-text 250ms ease forwards;
    animation-delay: 1s;
}

@keyframes appear-text {
    to {
        margin-right: 0px;
    }
}

@keyframes disappear-text {
    to {
        margin-right: -35%;
    }
}


.appear-after-500, section.appear-after-500 > * {

    opacity: 0;
    animation: appear 0s ease forwards;
    animation-delay: 400ms;
}

.appear-after-50, section.appear-after-50 > * {
    opacity: 0;
    animation: appear 0s ease forwards;
    animation-delay: 50ms;
}


@keyframes appear {
    to {
        opacity: 1;
    }
}

@keyframes disappear {
    to {
        opacity: 0;
    }
}


.loading-flash {
    background: var(--ring-content-background-color);
    width: 100%;
    height: 100%;

    position: absolute;
    visibility: hidden;
    animation: show 0ms ease forwards, hide 0ms ease forwards;;
    animation-delay: 1500ms, 1800ms;

}


section.dark .loading-flash {
    background: white;
}

.small {
    margin-top: 0px;
    height: 10px;
}


.show-after-loading-flash {
    position: absolute;
    visibility: hidden;
    animation: show 0ms ease forwards;
    animation-delay: 1800ms;

}

.hide-before-loading-flash {
    animation: hide 0ms ease forwards;
    animation-delay: 1500ms;
}


.full-content {
    width: 100%;
    height: 100%;
}


.show-after-1000 {
    position: absolute;
    visibility: hidden;
    animation: show 0ms ease forwards;
    animation-delay: 500ms;
}

.hide-after-1000 {
    animation: hide 0ms ease forwards;
    animation-delay: 500ms;
}

.show-after-1500 {
    position: absolute;
    visibility: hidden;
    animation: show 0ms ease forwards;
    animation-delay: 1500ms;
}

.hide-after-1500 {
    animation: hide 0ms ease forwards;
    animation-delay: 1500ms;
}

@keyframes show {
    to {
        position: revert;
        visibility: visible;
        display: block;
    }
}

@keyframes hide {
    to {
        position: absolute;
        visibility: hidden;
    }
}


section.adeptask {
    background: #171717 !important;;
}


section.adeptask h1 {
    position: unset;
    color: white !important;
}

section.adeptask strong {
    color: white !important;
}

section.adeptask .pink {
    color: var(--adeptask-primary-color) !important;
    /*color: #EB58D7 !important;*/
}

.comparison {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 10px;
    height: 100%;
}

.col {
    width: 100%;
    height: 100%;
}

.col-s {
    width: 50%;
    height: 100%;
}


.adeptask-title {
    display: flex;
    flex-direction: row;
    gap: 1em;
    justify-content: baseline;
    align-items: center;

    img {
        width: 3.5em;
    }

    h1 {
        font-size: 2.4em !important;
        line-height: 1em !important;
    }

    .adeptask-title-wrapper {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-between;

        img {
            width: 7em;

        }
    }
}

img[alt ~= "apps"] {
    width: 100% !important;
    max-width: 10000px !important;

}


#foo {
    view-transition-name: foo;
}

#bar {
    view-transition-name: bar;
}

#ne {
    view-transition-name: ne;
}


/*Constraints while building title anim*/
.droop {
    display: inline-block !important;
    animation: smashed 400ms ease-out forwards, droop 500ms cubic-bezier(.15, 2.85, .43, -0.1) forwards !important;
    animation-delay: 800ms, 2000ms !important;
    transform-origin: bottom left !important;
    transform: translateX(-20vw);

}

@keyframes smashed {
    from {
        transform: translateX(-20vw) skew(0deg) scaleY(0.7);
    }
    50% {
        transform: skew(-20deg);
    }
    to {
        transform: translateX(0vw) skew(0deg) scaleY(1);
    }
}

@keyframes droop {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(10deg);
    }
}


.smash {
    display: inline-block !important;
    animation: smash 300ms ease-in forwards, bounce 500ms linear forwards !important;
    animation-delay: 500ms, 800ms !important;
    transform: scaleY(1) translateY(-1000px);

}

@keyframes smash {
    from {
        transform: translateY(-1000px);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes bounce {
    from {
        transform: translateY(0) scaleY(1);
    }
    20% {
        transform: translateY(-10px) scaleY(0.9);
    }
    40% {
        transform: translateY(0) scaleY(1.1);
    }
    to {
        transform: translateY(0) scaleY(1);
    }
}

.appear-after-smash {
    display: inline-block !important;
    animation: appear 400ms linear forwards !important;
    animation-delay: 1300ms !important;
    opacity: 0;

}


.fouc1 {
    animation: fouc 3s ease-in forwards infinite;
    animation-delay: 300ms;
}

.fouc2 {
    animation: fouc 3s ease-in forwards infinite;
    animation-delay: 1600ms;
}

.fouc3 {
    animation: fouc 3s ease-in forwards infinite;
    animation-delay: 800ms;
}

.fouc4 {
    animation: fouc 3s ease-in forwards infinite;
    animation-delay: 200ms;
}

.fouc5 {
    animation: fouc 3s ease-in forwards infinite;
    animation-delay: 1400ms;
}

@keyframes fouc {
    from {
        font-family: inherit;
    }
    50% {
        font-family: serif;
    }
    to {
        font-family: inherit;
    }
}


.mermaid:not(.waterfall) {
    rect:not(.section) {
        fill: var(--ring-purple-background-color) !important;
        stroke: var(--ring-purple-border-color) !important;
        rx: var(--ring-border-radius) !important;
        ry: var(--ring-border-radius) !important;

    }

    .subGraph {
        tspan {
            fill: var(--ring-purple-text-color);
        }
        rect {
            fill: var(--ring-secondary-background-color) !important;
        }
    }
}



.no-margin{
    margin:0!important;
}