/** For loading **/
#iconLoad {
    position: absolute;
    top: 50%;
    right: 50%;
}
:root {
    --hue: 261;
    --fg: hsl(var(--hue), 90%, 10%);
    --primary: hsl(var (--hue), 90%, 50%);
    --trans-dur: 0.3s;
    /*font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));*/
}

.p11,
.p12,
.p13 {
    display: block;
    width: 8em;
    height: 8em;
}

.pl1_g,
.pl1_rect,
.p12_rect,
.p12_rect-g,
.p13_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;
}

.p12_rect,
.p12_rect-g {
    animation-name: p12-a;
}

.p12_rect {
    animation-name: p12-b;
}

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

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

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

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

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

.p13_rect {
    animation-name: p13;
}

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

/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: hsl(var (--hue), 90%, 10%);
        --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 p12-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 p12-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 p13 {
    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;
    }
}

.mt-8neg {
    margin-top: -8px;
}

.underlined {
    text-decoration: underline !important;
}
/** End of loading **/