/** {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}*/

:root {
    --Per-hue: 223;
    --Per-bg: hsl(var(--Per-hue),90%,90%);
    --Per-fg: hsl(var(--Per-hue),90%,10%);
    --Per-primary: hsl(var(--Per-hue),90%,50%);
    --Per-trans-dur: 0.3s;
    /*font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));*/
}

.AddToBody {
    
    background-color: var(--tblr-body-bg);
    color: var(--Per-fg);
    display: flex;
    /*font: 1em/1.5 sans-serif;*/
    height: 100vh;
    transition: background-color var(--Per-trans-dur), color var(--Per-trans-dur);
}

.AddTomain {
    display: flex;
    padding: 1.5em;
    gap: 3em;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto !important;
    font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
}

.pl1,
.pl2,
.pl3 {
    display: block;
    width: 8em;
    height: 8em;
}

.pl1__g,
.pl1__rect,
.pl2__rect,
.pl2__rect-g,
.pl3__rect {
    animation: pl1-a 1.5s cubic-bezier(0.65,0,0.35,1) infinite;
}

.pl1__g {
    transform-origin: 64px 64px;
}

.pl1__rect:first-child {
    animation-name: pl1-b;
}

.pl1__rect:nth-child(2) {
    animation-name: pl1-c;
}

.pl2__rect,
.pl2__rect-g {
    animation-name: pl2-a;
}

.pl2__rect {
    animation-name: pl2-b;
}

.pl2__rect-g .pl2__rect {
    transform-origin: 20px 128px;
}

.pl2__rect-g:first-child,
.pl2__rect-g:first-child .pl2__rect {
    animation-delay: -0.25s;
}

.pl2__rect-g:nth-child(2),
.pl2__rect-g:nth-child(2) .pl2__rect {
    animation-delay: -0.125s;
}

    .pl2__rect-g:nth-child(2) .pl2__rect {
        transform-origin: 64px 128px;
    }

.pl2__rect-g:nth-child(3) .pl2__rect {
    transform-origin: 108px 128px;
}

.pl3__rect {
    animation-name: pl3;
}

.pl3__rect-g {
    transform-origin: 64px 64px;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --Per-bg: hsl(var(--hue),90%,10%);
        --Per-fg: hsl(var(--hue),90%,90%);
    }
}

/* Animations */
@keyframes pl1-a {
    from {
        transform: rotate(0);
    }

    80%, to {
        animation-timing-function: steps(1,start);
        transform: rotate(90deg);
    }
}

@keyframes pl1-b {
    from {
        animation-timing-function: cubic-bezier(0.33,0,0.67,0);
        width: 40px;
        height: 40px;
    }

    20% {
        animation-timing-function: steps(1,start);
        width: 40px;
        height: 0;
    }

    60% {
        animation-timing-function: cubic-bezier(0.65,0,0.35,1);
        width: 0;
        height: 40px;
    }

    80%, to {
        width: 40px;
        height: 40px;
    }
}

@keyframes pl1-c {
    from {
        animation-timing-function: cubic-bezier(0.33,0,0.67,0);
        width: 40px;
        height: 40px;
        transform: translate(0,48px);
    }

    20% {
        animation-timing-function: cubic-bezier(0.33,1,0.67,1);
        width: 40px;
        height: 88px;
        transform: translate(0,0);
    }

    40% {
        animation-timing-function: cubic-bezier(0.33,0,0.67,0);
        width: 40px;
        height: 40px;
        transform: translate(0,0);
    }

    60% {
        animation-timing-function: cubic-bezier(0.33,1,0.67,1);
        width: 88px;
        height: 40px;
        transform: translate(0,0);
    }

    80%, to {
        width: 40px;
        height: 40px;
        transform: translate(48px,0);
    }
}

@keyframes pl2-a {
    from, 25%, 66.67%, to {
        transform: translateY(0);
    }

    50% {
        animation-timing-function: cubic-bezier(0.33,0,0.67,0);
        transform: translateY(-80px);
    }
}

@keyframes pl2-b {
    from, to {
        animation-timing-function: cubic-bezier(0.33,0,0.67,0);
        width: 40px;
        height: 24px;
        transform: rotate(180deg) translateX(0);
    }

    33.33% {
        animation-timing-function: cubic-bezier(0.33,1,0.67,1);
        width: 20px;
        height: 64px;
        transform: rotate(180deg) translateX(10px);
    }

    66.67% {
        animation-timing-function: cubic-bezier(0.33,1,0.67,1);
        width: 28px;
        height: 44px;
        transform: rotate(180deg) translateX(6px);
    }
}

@keyframes pl3 {
    from {
        transform: translate(64px,0);
        width: 64px;
        height: 64px;
    }

    25% {
        transform: translate(0,0);
        width: 128px;
        height: 32px;
    }

    50% {
        transform: translate(0,0);
        width: 64px;
        height: 64px;
    }

    75% {
        transform: translate(0,0);
        width: 32px;
        height: 128px;
    }

    to {
        transform: translate(0,64px);
        width: 64px;
        height: 64px;
    }
}

.my-re-loader{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none;
}