.constellation {
    animation-duration: 5000ms;
}

.star {
    transition-duration: 1000ms;
}

.star-star {
    animation-duration: 10000ms;
}

.star-link::before {
    animation-duration: 10000ms;
}

.star-line {
    transition-duration: 800ms,
                         1000ms;
}

.flair {
    transition-duration: 2500ms;
}


#group-social {
    top: 10%;
    left: 70%;

    z-index: 2;

    animation-delay: -4459ms;
}










#star-bsky {
    top: 75%;
    left: 30%;
    width: 72px;
    height: 72px;

    transition-delay: 451ms; /* for fade in animation */
}

#star-bsky-star {
    animation-delay: -7753ms;
}

#star-bsky-star-img {
    filter: drop-shadow(0 0 5px #bbb6ed) brightness(110%);
}

.star-link:not(.star-link-disabled):hover #star-bsky-star-img {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px #bbb6ed) brightness(110%);
}

#star-bsky-link::before {
    box-shadow: 0 0 36px 18px #bbb6ed;

    animation-delay: -7753ms;
}

.star-link:not(.star-link-disabled):hover.#star-bsky-link::before {
    box-shadow: 0 0 48px 24px #bbb6ed;
}

#star-bsky-icon {
    width: 72px;
    height: 72px;

    background-color: #bbb6ed;
    -webkit-mask: url("/static/resources/icons/bluesky.svg") no-repeat center;
    mask: url("/static/resources/icons/bluesky.svg") no-repeat center;
}

#star-bsky-label-text {
    color: #bbb6ed;

    filter: contrast(5%) saturate(1000%) brightness(150%);
}

@media (400px <= width < 650px), (400px <= height < 650px) {
    #star-bsky {
        width: 54px;
        height: 54px;
    }

    #star-bsky-icon {
        width: 54px;
        height: 54px;
    }

    #star-bsky-link::before {
        box-shadow: 0 0 27px 13px #bbb6ed;
    }

    .star-link:not(.star-link-disabled):hover#star-bsky-link::before {
        box-shadow: 0 0 36px 18px #bbb6ed;
    }

    #star-bsky-star-img {
        filter: drop-shadow(0 0 3px #bbb6ed) brightness(150%);
    }

    .star-link:not(.star-link-disabled):hover #star-bsky-star-img {
        filter: drop-shadow(0 0 3px white) drop-shadow(0 0 6px #bbb6ed) brightness(150%);
    }
}

@media (width < 400px), (height < 400px) {
    #star-bsky {
        width: 45px;
        height: 45px;
    }

    #star-bsky-icon {
        width: 45px;
        height: 45px;
    }

    #star-bsky-link::before {
        box-shadow: 0 0 22px 11px #bbb6ed;
    }

    .star-link:not(.star-link-disabled):hover#star-bsky-link::before {
        box-shadow: 0 0 30px 15px #bbb6ed;
    }

    #star-bsky-star-img {
        filter: drop-shadow(0 0 2px #bbb6ed) brightness(150%);
    }

    .star-link:not(.star-link-disabled):hover #star-bsky-star-img {
        filter: drop-shadow(0 0 2px white) drop-shadow(0 0 4px #bbb6ed) brightness(150%);
    }
}









#star-telegram {
    top: 40%;
    left: 45%;
    width: 64px;
    height: 64px;

    transition-delay: 306ms; /* for fade in animation */
}

#star-telegram-star {
    animation-delay: -9398ms;
}

#star-telegram-star-img {
    filter: drop-shadow(0 0 5px var(--icon-color)) brightness(110%);
}

.star-link:not(.star-link-disabled):hover #star-telegram-star-img {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px var(--icon-color)) brightness(110%);
}

#star-telegram-link::before {
    box-shadow: 0 0 32px 16px var(--icon-color);

    animation-delay: -9398ms;
}

.star-link:not(.star-link-disabled):hover.#star-telegram-link::before {
    box-shadow: 0 0 42px 21px var(--icon-color);
}

#star-telegram-icon {
    width: 64px;
    height: 64px;

    background-color: var(--icon-color);
    -webkit-mask: url("/static/resources/icons/telegram.svg") no-repeat center;
    mask: url("/static/resources/icons/telegram.svg") no-repeat center;
}

#star-telegram-label-text {
    color: var(--icon-color);

    filter: contrast(5%) saturate(1000%) brightness(150%);
}

@media (400px <= width < 650px), (400px <= height < 650px) {
    #star-telegram {
        width: 48px;
        height: 48px;
    }

    #star-telegram-icon {
        width: 48px;
        height: 48px;
    }

    #star-telegram-link::before {
        box-shadow: 0 0 24px 12px var(--icon-color);
    }

    .star-link:not(.star-link-disabled):hover#star-telegram-link::before {
        box-shadow: 0 0 32px 16px var(--icon-color);
    }

    #star-telegram-star-img {
        filter: drop-shadow(0 0 3px var(--icon-color)) brightness(150%);
    }

    .star-link:not(.star-link-disabled):hover #star-telegram-star-img {
        filter: drop-shadow(0 0 3px white) drop-shadow(0 0 6px var(--icon-color)) brightness(150%);
    }
}

@media (width < 400px), (height < 400px) {
    #star-telegram {
        width: 40px;
        height: 40px;
    }

    #star-telegram-icon {
        width: 40px;
        height: 40px;
    }

    #star-telegram-link::before {
        box-shadow: 0 0 20px 10px var(--icon-color);
    }

    .star-link:not(.star-link-disabled):hover#star-telegram-link::before {
        box-shadow: 0 0 26px 13px var(--icon-color);
    }

    #star-telegram-star-img {
        filter: drop-shadow(0 0 2px var(--icon-color)) brightness(150%);
    }

    .star-link:not(.star-link-disabled):hover #star-telegram-star-img {
        filter: drop-shadow(0 0 2px white) drop-shadow(0 0 4px var(--icon-color)) brightness(150%);
    }
}









#star-mastodon {
    top: 55%;
    left: 80%;
    width: 56px;
    height: 56px;

    transition-delay: 184ms; /* for fade in animation */
}

#star-mastodon-star {
    animation-delay: -94ms;
}

#star-mastodon-star-img {
    filter: drop-shadow(0 0 5px var(--icon-color)) brightness(110%);
}

.star-link:not(.star-link-disabled):hover #star-mastodon-star-img {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px var(--icon-color)) brightness(110%);
}

#star-mastodon-link::before {
    box-shadow: 0 0 28px 14px var(--icon-color);

    animation-delay: -94ms;
}

.star-link:not(.star-link-disabled):hover.#star-mastodon-link::before {
    box-shadow: 0 0 37px 18px var(--icon-color);
}

#star-mastodon-icon {
    width: 56px;
    height: 56px;

    background-color: var(--icon-color);
    -webkit-mask: url("/static/resources/icons/mastodon.svg") no-repeat center;
    mask: url("/static/resources/icons/mastodon.svg") no-repeat center;
}

#star-mastodon-label-text {
    color: var(--icon-color);

    filter: contrast(5%) saturate(1000%) brightness(150%);
}

@media (400px <= width < 650px), (400px <= height < 650px) {
    #star-mastodon {
        width: 42px;
        height: 42px;
    }

    #star-mastodon-icon {
        width: 42px;
        height: 42px;
    }

    #star-mastodon-link::before {
        box-shadow: 0 0 21px 10px var(--icon-color);
    }

    .star-link:not(.star-link-disabled):hover#star-mastodon-link::before {
        box-shadow: 0 0 28px 14px var(--icon-color);
    }

    #star-mastodon-star-img {
        filter: drop-shadow(0 0 3px var(--icon-color)) brightness(150%);
    }

    .star-link:not(.star-link-disabled):hover #star-mastodon-star-img {
        filter: drop-shadow(0 0 3px white) drop-shadow(0 0 6px var(--icon-color)) brightness(150%);
    }
}

@media (width < 400px), (height < 400px) {
    #star-mastodon {
        width: 35px;
        height: 35px;
    }

    #star-mastodon-icon {
        width: 35px;
        height: 35px;
    }

    #star-mastodon-link::before {
        box-shadow: 0 0 17px 8px var(--icon-color);
    }

    .star-link:not(.star-link-disabled):hover#star-mastodon-link::before {
        box-shadow: 0 0 23px 11px var(--icon-color);
    }

    #star-mastodon-star-img {
        filter: drop-shadow(0 0 2px var(--icon-color)) brightness(150%);
    }

    .star-link:not(.star-link-disabled):hover #star-mastodon-star-img {
        filter: drop-shadow(0 0 2px white) drop-shadow(0 0 4px var(--icon-color)) brightness(150%);
    }
}









#star-twitter {
    top: 50%;
    left: 15%;
    width: 96px;
    height: 96px;

    transition-delay: 162ms; /* for fade in animation */
}

#star-twitter-star {
    animation-delay: -3383ms;
}

#star-twitter-star-img {
    filter: drop-shadow(0 0 5px var(--icon-color)) brightness(110%);
}

.star-link:not(.star-link-disabled):hover #star-twitter-star-img {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px var(--icon-color)) brightness(110%);
}

#star-twitter-link::before {
    box-shadow: 0 0 48px 24px var(--icon-color);

    animation-delay: -3383ms;
}

.star-link:not(.star-link-disabled):hover.#star-twitter-link::before {
    box-shadow: 0 0 64px 32px var(--icon-color);
}

#star-twitter-icon {
    width: 96px;
    height: 96px;

    background-color: var(--icon-color);
    -webkit-mask: url("/static/resources/icons/twitter.svg") no-repeat center;
    mask: url("/static/resources/icons/twitter.svg") no-repeat center;
}

#star-twitter-label-text {
    color: var(--icon-color);

    filter: contrast(5%) saturate(1000%) brightness(150%);
}

@media (400px <= width < 650px), (400px <= height < 650px) {
    #star-twitter {
        width: 72px;
        height: 72px;
    }

    #star-twitter-icon {
        width: 72px;
        height: 72px;
    }

    #star-twitter-link::before {
        box-shadow: 0 0 36px 18px var(--icon-color);
    }

    .star-link:not(.star-link-disabled):hover#star-twitter-link::before {
        box-shadow: 0 0 48px 24px var(--icon-color);
    }

    #star-twitter-star-img {
        filter: drop-shadow(0 0 3px var(--icon-color)) brightness(150%);
    }

    .star-link:not(.star-link-disabled):hover #star-twitter-star-img {
        filter: drop-shadow(0 0 3px white) drop-shadow(0 0 6px var(--icon-color)) brightness(150%);
    }
}

@media (width < 400px), (height < 400px) {
    #star-twitter {
        width: 60px;
        height: 60px;
    }

    #star-twitter-icon {
        width: 60px;
        height: 60px;
    }

    #star-twitter-link::before {
        box-shadow: 0 0 30px 15px var(--icon-color);
    }

    .star-link:not(.star-link-disabled):hover#star-twitter-link::before {
        box-shadow: 0 0 40px 20px var(--icon-color);
    }

    #star-twitter-star-img {
        filter: drop-shadow(0 0 2px var(--icon-color)) brightness(150%);
    }

    .star-link:not(.star-link-disabled):hover #star-twitter-star-img {
        filter: drop-shadow(0 0 2px white) drop-shadow(0 0 4px var(--icon-color)) brightness(150%);
    }
}




#line-twitter-bsky.star-line-fade-in, #line-twitter-bsky.star-line-fade-out {
    width: 0%;
}

#line-twitter-bsky {
    top: 50%;
    left: 15%;
    height: 4px;
    width: 29%;

    transform-origin: 0% 50%;
    transform: translate(0px, -2px) rotate(59.04deg);

    transition-delay: 787ms;
}


#line-twitter-telegram.star-line-fade-in, #line-twitter-telegram.star-line-fade-out {
    width: 0%;
}

#line-twitter-telegram {
    top: 50%;
    left: 15%;
    height: 4px;
    width: 32%;

    transform-origin: 0% 50%;
    transform: translate(0px, -2px) rotate(-18.43deg);

    transition-delay: 630ms;
}


#line-telegram-mastodon.star-line-fade-in, #line-telegram-mastodon.star-line-fade-out {
    width: 0%;
}

#line-telegram-mastodon {
    top: 40%;
    left: 45%;
    height: 4px;
    width: 38%;

    transform-origin: 0% 50%;
    transform: translate(0px, -2px) rotate(23.2deg);

    transition-delay: 848ms;
}




#group-shop {
    top: 58%;
    left: 25%;

    z-index: 1;

    animation-delay: -559ms;
}










#star-trello {
    top: 20%;
    left: 88%;
    width: 64px;
    height: 64px;

    transition-delay: 263ms; /* for fade in animation */
}

#star-trello-star {
    animation-delay: -642ms;
}

#star-trello-star-img {
    filter: drop-shadow(0 0 5px #9A96F4) brightness(110%);
}

.star-link:not(.star-link-disabled):hover #star-trello-star-img {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px #9A96F4) brightness(110%);
}

#star-trello-link::before {
    box-shadow: 0 0 32px 16px #9A96F4;

    animation-delay: -642ms;
}

.star-link:not(.star-link-disabled):hover.#star-trello-link::before {
    box-shadow: 0 0 42px 21px #9A96F4;
}

#star-trello-icon {
    width: 64px;
    height: 64px;

    background-color: #9A96F4;
    -webkit-mask: url("/static/resources/icons/trello.svg") no-repeat center;
    mask: url("/static/resources/icons/trello.svg") no-repeat center;
}

#star-trello-label-text {
    color: #9A96F4;

    filter: contrast(5%) saturate(1000%) brightness(150%);
}

@media (400px <= width < 650px), (400px <= height < 650px) {
    #star-trello {
        width: 48px;
        height: 48px;
    }

    #star-trello-icon {
        width: 48px;
        height: 48px;
    }

    #star-trello-link::before {
        box-shadow: 0 0 24px 12px #9A96F4;
    }

    .star-link:not(.star-link-disabled):hover#star-trello-link::before {
        box-shadow: 0 0 32px 16px #9A96F4;
    }

    #star-trello-star-img {
        filter: drop-shadow(0 0 3px #9A96F4) brightness(150%);
    }

    .star-link:not(.star-link-disabled):hover #star-trello-star-img {
        filter: drop-shadow(0 0 3px white) drop-shadow(0 0 6px #9A96F4) brightness(150%);
    }
}

@media (width < 400px), (height < 400px) {
    #star-trello {
        width: 40px;
        height: 40px;
    }

    #star-trello-icon {
        width: 40px;
        height: 40px;
    }

    #star-trello-link::before {
        box-shadow: 0 0 20px 10px #9A96F4;
    }

    .star-link:not(.star-link-disabled):hover#star-trello-link::before {
        box-shadow: 0 0 26px 13px #9A96F4;
    }

    #star-trello-star-img {
        filter: drop-shadow(0 0 2px #9A96F4) brightness(150%);
    }

    .star-link:not(.star-link-disabled):hover #star-trello-star-img {
        filter: drop-shadow(0 0 2px white) drop-shadow(0 0 4px #9A96F4) brightness(150%);
    }
}









#star-ko-fi {
    top: 55%;
    left: 55%;
    width: 72px;
    height: 72px;

    transition-delay: 115ms; /* for fade in animation */
}

#star-ko-fi-star {
    animation-delay: -969ms;
}

#star-ko-fi-star-img {
    filter: drop-shadow(0 0 5px #efebff) brightness(110%);
}

.star-link:not(.star-link-disabled):hover #star-ko-fi-star-img {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px #efebff) brightness(110%);
}

#star-ko-fi-link::before {
    box-shadow: 0 0 36px 18px #efebff;

    animation-delay: -969ms;
}

.star-link:not(.star-link-disabled):hover.#star-ko-fi-link::before {
    box-shadow: 0 0 48px 24px #efebff;
}

#star-ko-fi-icon {
    width: 72px;
    height: 72px;

    background-color: #efebff;
    -webkit-mask: url("/static/resources/icons/kofi.svg") no-repeat center;
    mask: url("/static/resources/icons/kofi.svg") no-repeat center;
}

#star-ko-fi-label-text {
    color: #efebff;

    filter: contrast(5%) saturate(1000%) brightness(150%);
}

@media (400px <= width < 650px), (400px <= height < 650px) {
    #star-ko-fi {
        width: 54px;
        height: 54px;
    }

    #star-ko-fi-icon {
        width: 54px;
        height: 54px;
    }

    #star-ko-fi-link::before {
        box-shadow: 0 0 27px 13px #efebff;
    }

    .star-link:not(.star-link-disabled):hover#star-ko-fi-link::before {
        box-shadow: 0 0 36px 18px #efebff;
    }

    #star-ko-fi-star-img {
        filter: drop-shadow(0 0 3px #efebff) brightness(150%);
    }

    .star-link:not(.star-link-disabled):hover #star-ko-fi-star-img {
        filter: drop-shadow(0 0 3px white) drop-shadow(0 0 6px #efebff) brightness(150%);
    }
}

@media (width < 400px), (height < 400px) {
    #star-ko-fi {
        width: 45px;
        height: 45px;
    }

    #star-ko-fi-icon {
        width: 45px;
        height: 45px;
    }

    #star-ko-fi-link::before {
        box-shadow: 0 0 22px 11px #efebff;
    }

    .star-link:not(.star-link-disabled):hover#star-ko-fi-link::before {
        box-shadow: 0 0 30px 15px #efebff;
    }

    #star-ko-fi-star-img {
        filter: drop-shadow(0 0 2px #efebff) brightness(150%);
    }

    .star-link:not(.star-link-disabled):hover #star-ko-fi-star-img {
        filter: drop-shadow(0 0 2px white) drop-shadow(0 0 4px #efebff) brightness(150%);
    }
}









#star-gumroad {
    top: 75%;
    left: 20%;
    width: 64px;
    height: 64px;

    transition-delay: 225ms; /* for fade in animation */
}

#star-gumroad-star {
    animation-delay: -3950ms;
}

#star-gumroad-star-img {
    filter: drop-shadow(0 0 5px #d2c7fc) brightness(110%);
}

.star-link:not(.star-link-disabled):hover #star-gumroad-star-img {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px #d2c7fc) brightness(110%);
}

#star-gumroad-link::before {
    box-shadow: 0 0 32px 16px #d2c7fc;

    animation-delay: -3950ms;
}

.star-link:not(.star-link-disabled):hover.#star-gumroad-link::before {
    box-shadow: 0 0 42px 21px #d2c7fc;
}

#star-gumroad-icon {
    width: 64px;
    height: 64px;

    background-color: #d2c7fc;
    -webkit-mask: url("/static/resources/icons/gumroad.svg") no-repeat center;
    mask: url("/static/resources/icons/gumroad.svg") no-repeat center;
}

#star-gumroad-label-text {
    color: #d2c7fc;

    filter: contrast(5%) saturate(1000%) brightness(150%);
}

@media (400px <= width < 650px), (400px <= height < 650px) {
    #star-gumroad {
        width: 48px;
        height: 48px;
    }

    #star-gumroad-icon {
        width: 48px;
        height: 48px;
    }

    #star-gumroad-link::before {
        box-shadow: 0 0 24px 12px #d2c7fc;
    }

    .star-link:not(.star-link-disabled):hover#star-gumroad-link::before {
        box-shadow: 0 0 32px 16px #d2c7fc;
    }

    #star-gumroad-star-img {
        filter: drop-shadow(0 0 3px #d2c7fc) brightness(150%);
    }

    .star-link:not(.star-link-disabled):hover #star-gumroad-star-img {
        filter: drop-shadow(0 0 3px white) drop-shadow(0 0 6px #d2c7fc) brightness(150%);
    }
}

@media (width < 400px), (height < 400px) {
    #star-gumroad {
        width: 40px;
        height: 40px;
    }

    #star-gumroad-icon {
        width: 40px;
        height: 40px;
    }

    #star-gumroad-link::before {
        box-shadow: 0 0 20px 10px #d2c7fc;
    }

    .star-link:not(.star-link-disabled):hover#star-gumroad-link::before {
        box-shadow: 0 0 26px 13px #d2c7fc;
    }

    #star-gumroad-star-img {
        filter: drop-shadow(0 0 2px #d2c7fc) brightness(150%);
    }

    .star-link:not(.star-link-disabled):hover #star-gumroad-star-img {
        filter: drop-shadow(0 0 2px white) drop-shadow(0 0 4px #d2c7fc) brightness(150%);
    }
}









#star-comms {
    top: 25%;
    left: 45%;
    width: 96px;
    height: 96px;

    transition-delay: 116ms; /* for fade in animation */
}

#star-comms-star {
    animation-delay: -5042ms;
}

#star-comms-star-img {
    filter: drop-shadow(0 0 5px #837A7A) brightness(110%);
}

.star-link:not(.star-link-disabled):hover #star-comms-star-img {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px #837A7A) brightness(110%);
}

#star-comms-link::before {
    box-shadow: 0 0 48px 24px #837A7A;

    animation-delay: -5042ms;
}

.star-link:not(.star-link-disabled):hover.#star-comms-link::before {
    box-shadow: 0 0 64px 32px #837A7A;
}

#star-comms-icon {
    width: 96px;
    height: 96px;

    background-color: #837A7A;
    -webkit-mask: url("/static/resources/icons/paint-brush.svg") no-repeat center;
    mask: url("/static/resources/icons/paint-brush.svg") no-repeat center;
}

#star-comms-label-text {
    color: #837A7A;

    filter: contrast(5%) saturate(1000%) brightness(150%);
}

@media (400px <= width < 650px), (400px <= height < 650px) {
    #star-comms {
        width: 72px;
        height: 72px;
    }

    #star-comms-icon {
        width: 72px;
        height: 72px;
    }

    #star-comms-link::before {
        box-shadow: 0 0 36px 18px #837A7A;
    }

    .star-link:not(.star-link-disabled):hover#star-comms-link::before {
        box-shadow: 0 0 48px 24px #837A7A;
    }

    #star-comms-star-img {
        filter: drop-shadow(0 0 3px #837A7A) brightness(150%);
    }

    .star-link:not(.star-link-disabled):hover #star-comms-star-img {
        filter: drop-shadow(0 0 3px white) drop-shadow(0 0 6px #837A7A) brightness(150%);
    }
}

@media (width < 400px), (height < 400px) {
    #star-comms {
        width: 60px;
        height: 60px;
    }

    #star-comms-icon {
        width: 60px;
        height: 60px;
    }

    #star-comms-link::before {
        box-shadow: 0 0 30px 15px #837A7A;
    }

    .star-link:not(.star-link-disabled):hover#star-comms-link::before {
        box-shadow: 0 0 40px 20px #837A7A;
    }

    #star-comms-star-img {
        filter: drop-shadow(0 0 2px #837A7A) brightness(150%);
    }

    .star-link:not(.star-link-disabled):hover #star-comms-star-img {
        filter: drop-shadow(0 0 2px white) drop-shadow(0 0 4px #837A7A) brightness(150%);
    }
}




#line-comms-trello.star-line-fade-in, #line-comms-trello.star-line-fade-out {
    width: 0%;
}

#line-comms-trello {
    top: 25%;
    left: 45%;
    height: 4px;
    width: 43%;

    transform-origin: 0% 50%;
    transform: translate(0px, -2px) rotate(-6.63deg);

    transition-delay: 791ms;
}


#line-comms-kofi.star-line-fade-in, #line-comms-kofi.star-line-fade-out {
    width: 0%;
}

#line-comms-kofi {
    top: 25%;
    left: 45%;
    height: 4px;
    width: 32%;

    transform-origin: 0% 50%;
    transform: translate(0px, -2px) rotate(71.57deg);

    transition-delay: 578ms;
}


#line-kofi-gumroad.star-line-fade-in, #line-kofi-gumroad.star-line-fade-out {
    width: 0%;
}

#line-kofi-gumroad {
    top: 55%;
    left: 55%;
    height: 4px;
    width: 40%;

    transform-origin: 0% 50%;
    transform: translate(0px, -2px) rotate(150.26deg);

    transition-delay: 973ms;
}




#flair-shu {
    top: 25%;
    left: 45%;

    transition-delay: 900ms;
}

#flair-shu-animation {
    animation-delay: -3500ms;
}

#flair-shu-img {
    width: 317%;
    height: auto;

    transform: translate(-43%, -87%);
}

@media (aspect-ratio < 3 / 4) {
    #flair-shu-img {
        width: 253.60000000000002%;
    }
}


#group-art {
    top: 75%;
    left: 60%;

    z-index: 0;

    animation-delay: -2405ms;
}










#star-gallery {
    top: 55%;
    left: 55%;
    width: 80px;
    height: 80px;

    transition-delay: 17ms; /* for fade in animation */
}

#star-gallery-star {
    animation-delay: -53ms;
}

#star-gallery-star-img {
    filter: drop-shadow(0 0 5px #E6C275) brightness(110%);
}

.star-link:not(.star-link-disabled):hover #star-gallery-star-img {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px #E6C275) brightness(110%);
}

#star-gallery-link::before {
    box-shadow: 0 0 40px 20px #E6C275;

    animation-delay: -53ms;
}

.star-link:not(.star-link-disabled):hover.#star-gallery-link::before {
    box-shadow: 0 0 53px 26px #E6C275;
}

#star-gallery-icon {
    width: 80px;
    height: 80px;

    background-color: #E6C275;
    -webkit-mask: url("/static/resources/icons/palette.svg") no-repeat center;
    mask: url("/static/resources/icons/palette.svg") no-repeat center;
}

#star-gallery-label-text {
    color: #E6C275;

    filter: contrast(5%) saturate(1000%) brightness(150%);
}

@media (400px <= width < 650px), (400px <= height < 650px) {
    #star-gallery {
        width: 60px;
        height: 60px;
    }

    #star-gallery-icon {
        width: 60px;
        height: 60px;
    }

    #star-gallery-link::before {
        box-shadow: 0 0 30px 15px #E6C275;
    }

    .star-link:not(.star-link-disabled):hover#star-gallery-link::before {
        box-shadow: 0 0 40px 20px #E6C275;
    }

    #star-gallery-star-img {
        filter: drop-shadow(0 0 3px #E6C275) brightness(150%);
    }

    .star-link:not(.star-link-disabled):hover #star-gallery-star-img {
        filter: drop-shadow(0 0 3px white) drop-shadow(0 0 6px #E6C275) brightness(150%);
    }
}

@media (width < 400px), (height < 400px) {
    #star-gallery {
        width: 50px;
        height: 50px;
    }

    #star-gallery-icon {
        width: 50px;
        height: 50px;
    }

    #star-gallery-link::before {
        box-shadow: 0 0 25px 12px #E6C275;
    }

    .star-link:not(.star-link-disabled):hover#star-gallery-link::before {
        box-shadow: 0 0 33px 16px #E6C275;
    }

    #star-gallery-star-img {
        filter: drop-shadow(0 0 2px #E6C275) brightness(150%);
    }

    .star-link:not(.star-link-disabled):hover #star-gallery-star-img {
        filter: drop-shadow(0 0 2px white) drop-shadow(0 0 4px #E6C275) brightness(150%);
    }
}









#star-youtube {
    top: 15%;
    left: 65%;
    width: 64px;
    height: 64px;

    transition-delay: 377ms; /* for fade in animation */
}

#star-youtube-star {
    animation-delay: -2751ms;
}

#star-youtube-star-img {
    filter: drop-shadow(0 0 5px var(--icon-color)) brightness(110%);
}

.star-link:not(.star-link-disabled):hover #star-youtube-star-img {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px var(--icon-color)) brightness(110%);
}

#star-youtube-link::before {
    box-shadow: 0 0 32px 16px var(--icon-color);

    animation-delay: -2751ms;
}

.star-link:not(.star-link-disabled):hover.#star-youtube-link::before {
    box-shadow: 0 0 42px 21px var(--icon-color);
}

#star-youtube-icon {
    width: 64px;
    height: 64px;

    background-color: var(--icon-color);
    -webkit-mask: url("/static/resources/icons/youtube.svg") no-repeat center;
    mask: url("/static/resources/icons/youtube.svg") no-repeat center;
}

#star-youtube-label-text {
    color: var(--icon-color);

    filter: contrast(5%) saturate(1000%) brightness(150%);
}

@media (400px <= width < 650px), (400px <= height < 650px) {
    #star-youtube {
        width: 48px;
        height: 48px;
    }

    #star-youtube-icon {
        width: 48px;
        height: 48px;
    }

    #star-youtube-link::before {
        box-shadow: 0 0 24px 12px var(--icon-color);
    }

    .star-link:not(.star-link-disabled):hover#star-youtube-link::before {
        box-shadow: 0 0 32px 16px var(--icon-color);
    }

    #star-youtube-star-img {
        filter: drop-shadow(0 0 3px var(--icon-color)) brightness(150%);
    }

    .star-link:not(.star-link-disabled):hover #star-youtube-star-img {
        filter: drop-shadow(0 0 3px white) drop-shadow(0 0 6px var(--icon-color)) brightness(150%);
    }
}

@media (width < 400px), (height < 400px) {
    #star-youtube {
        width: 40px;
        height: 40px;
    }

    #star-youtube-icon {
        width: 40px;
        height: 40px;
    }

    #star-youtube-link::before {
        box-shadow: 0 0 20px 10px var(--icon-color);
    }

    .star-link:not(.star-link-disabled):hover#star-youtube-link::before {
        box-shadow: 0 0 26px 13px var(--icon-color);
    }

    #star-youtube-star-img {
        filter: drop-shadow(0 0 2px var(--icon-color)) brightness(150%);
    }

    .star-link:not(.star-link-disabled):hover #star-youtube-star-img {
        filter: drop-shadow(0 0 2px white) drop-shadow(0 0 4px var(--icon-color)) brightness(150%);
    }
}









#star-twitch {
    top: 65%;
    left: 10%;
    width: 56px;
    height: 56px;

    transition-delay: 231ms; /* for fade in animation */
}

#star-twitch-star {
    animation-delay: -3700ms;
}

#star-twitch-star-img {
    filter: drop-shadow(0 0 5px #c9bdff) brightness(110%);
}

.star-link:not(.star-link-disabled):hover #star-twitch-star-img {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px #c9bdff) brightness(110%);
}

#star-twitch-link::before {
    box-shadow: 0 0 28px 14px #c9bdff;

    animation-delay: -3700ms;
}

.star-link:not(.star-link-disabled):hover.#star-twitch-link::before {
    box-shadow: 0 0 37px 18px #c9bdff;
}

#star-twitch-icon {
    width: 56px;
    height: 56px;

    background-color: #c9bdff;
    -webkit-mask: url("/static/resources/icons/twitch.svg") no-repeat center;
    mask: url("/static/resources/icons/twitch.svg") no-repeat center;
}

#star-twitch-label-text {
    color: #c9bdff;

    filter: contrast(5%) saturate(1000%) brightness(150%);
}

@media (400px <= width < 650px), (400px <= height < 650px) {
    #star-twitch {
        width: 42px;
        height: 42px;
    }

    #star-twitch-icon {
        width: 42px;
        height: 42px;
    }

    #star-twitch-link::before {
        box-shadow: 0 0 21px 10px #c9bdff;
    }

    .star-link:not(.star-link-disabled):hover#star-twitch-link::before {
        box-shadow: 0 0 28px 14px #c9bdff;
    }

    #star-twitch-star-img {
        filter: drop-shadow(0 0 3px #c9bdff) brightness(150%);
    }

    .star-link:not(.star-link-disabled):hover #star-twitch-star-img {
        filter: drop-shadow(0 0 3px white) drop-shadow(0 0 6px #c9bdff) brightness(150%);
    }
}

@media (width < 400px), (height < 400px) {
    #star-twitch {
        width: 35px;
        height: 35px;
    }

    #star-twitch-icon {
        width: 35px;
        height: 35px;
    }

    #star-twitch-link::before {
        box-shadow: 0 0 17px 8px #c9bdff;
    }

    .star-link:not(.star-link-disabled):hover#star-twitch-link::before {
        box-shadow: 0 0 23px 11px #c9bdff;
    }

    #star-twitch-star-img {
        filter: drop-shadow(0 0 2px #c9bdff) brightness(150%);
    }

    .star-link:not(.star-link-disabled):hover #star-twitch-star-img {
        filter: drop-shadow(0 0 2px white) drop-shadow(0 0 4px #c9bdff) brightness(150%);
    }
}




#line-youtube-gallery.star-line-fade-in, #line-youtube-gallery.star-line-fade-out {
    width: 0%;
}

#line-youtube-gallery {
    top: 15%;
    left: 65%;
    height: 4px;
    width: 41%;

    transform-origin: 0% 50%;
    transform: translate(0px, -2px) rotate(104.04deg);

    transition-delay: 861ms;
}


#line-gallery-twitch.star-line-fade-in, #line-gallery-twitch.star-line-fade-out {
    width: 0%;
}

#line-gallery-twitch {
    top: 55%;
    left: 55%;
    height: 4px;
    width: 46%;

    transform-origin: 0% 50%;
    transform: translate(0px, -2px) rotate(167.47deg);

    transition-delay: 590ms;
}




#flair-rishin {
    top: 55%;
    left: 55%;

    transition-delay: 600ms;
}

#flair-rishin-animation {
    animation-delay: -5000ms;
}

#flair-rishin-img {
    width: 250%;
    height: auto;

    transform: translate(-55%, -33%);
}

@media (aspect-ratio < 3 / 4) {
    #flair-rishin-img {
        width: 200.0%;
    }
}