.constellation.group-social {
    top: 10%;
    left: 70%;
}









.star.star-twitter {
    top: 50%;
    left: 10%;
    width: 96px;
    height: 96px;
}

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

    background-color: var(--star-color);
    -webkit-mask: url("/static/resources/icons/twitter.svg") no-repeat center;
    mask: url("/static/resources/icons/twitter.svg") no-repeat center;
    filter: opacity(50%);
}

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

    transition: all 0.25s ease;
}

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

.star-label.star-twitter-label {
    
    text-shadow:
        0 0 3px black
        0 0 1em var(--bg-color);
}

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

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

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

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

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

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

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

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








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

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

    background-color: var(--star-color);
    -webkit-mask: url("/static/resources/icons/bluesky.svg") no-repeat center;
    mask: url("/static/resources/icons/bluesky.svg") no-repeat center;
    filter: opacity(50%);
}

.star-link.star-bsky-link::before {
    box-shadow: 0 0 36px 18px var(--star-color);

    transition: all 0.25s ease;
}

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

.star-label.star-bsky-label {
    
    text-shadow:
        0 0 3px black
        0 0 1em var(--bg-color);
}

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

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

    .star-link.star-bsky-link::before {
        box-shadow: 0 0 27px 13px var(--star-color);
    }

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

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

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

    .star-link.star-bsky-link::before {
        box-shadow: 0 0 22px 11px var(--star-color);
    }

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








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

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

    background-color: var(--star-color);
    -webkit-mask: url("/static/resources/icons/telegram.svg") no-repeat center;
    mask: url("/static/resources/icons/telegram.svg") no-repeat center;
    filter: opacity(50%);
}

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

    transition: all 0.25s ease;
}

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

.star-label.star-telegram-label {
    
    text-shadow:
        0 0 3px black
        0 0 1em var(--bg-color);
}

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

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

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

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

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

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

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

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








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

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

    background-color: var(--star-color);
    -webkit-mask: url("/static/resources/icons/mastodon.svg") no-repeat center;
    mask: url("/static/resources/icons/mastodon.svg") no-repeat center;
    filter: opacity(50%);
}

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

    transition: all 0.25s ease;
}

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

.star-label.star-mastodon-label {
    
    text-shadow:
        0 0 3px black
        0 0 1em var(--bg-color);
}

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

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

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

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

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

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

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

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



.star-line.line-twitter-bsky {
    top: 50%;
    left: 10%;
    height: 4px;
    width: 32%;

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

.star-line.line-twitter-telegram {
    top: 50%;
    left: 10%;
    height: 4px;
    width: 36%;

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

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

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


.constellation.group-shop {
    top: 58%;
    left: 25%;
}









.star.star-comms {
    top: 25%;
    left: 40%;
    width: 96px;
    height: 96px;
}

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

    background-color: gray;
    -webkit-mask: url("/static/resources/icons/paint-brush.svg") no-repeat center;
    mask: url("/static/resources/icons/paint-brush.svg") no-repeat center;
    filter: opacity(50%);
}

.star-link.star-comms-link::before {
    box-shadow: 0 0 48px 24px gray;

    transition: all 0.25s ease;
}

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

.star-label.star-comms-label {
    color: gray;
    text-shadow:
        0 0 3px black
        0 0 1em var(--bg-color);
}

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

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

    .star-link.star-comms-link::before {
        box-shadow: 0 0 36px 18px gray;
    }

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

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

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

    .star-link.star-comms-link::before {
        box-shadow: 0 0 30px 15px gray;
    }

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








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

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

    background-color: var(--star-color);
    -webkit-mask: url("/static/resources/icons/trello.svg") no-repeat center;
    mask: url("/static/resources/icons/trello.svg") no-repeat center;
    filter: opacity(50%);
}

.star-link.star-trello-link::before {
    box-shadow: 0 0 32px 16px var(--star-color);

    transition: all 0.25s ease;
}

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

.star-label.star-trello-label {
    
    text-shadow:
        0 0 3px black
        0 0 1em var(--bg-color);
}

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

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

    .star-link.star-trello-link::before {
        box-shadow: 0 0 24px 12px var(--star-color);
    }

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

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

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

    .star-link.star-trello-link::before {
        box-shadow: 0 0 20px 10px var(--star-color);
    }

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








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

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

    background-color: var(--star-color);
    -webkit-mask: url("/static/resources/icons/kofi.svg") no-repeat center;
    mask: url("/static/resources/icons/kofi.svg") no-repeat center;
    filter: opacity(50%);
}

.star-link.star-ko-fi-link::before {
    box-shadow: 0 0 36px 18px var(--star-color);

    transition: all 0.25s ease;
}

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

.star-label.star-ko-fi-label {
    
    text-shadow:
        0 0 3px black
        0 0 1em var(--bg-color);
}

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

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

    .star-link.star-ko-fi-link::before {
        box-shadow: 0 0 27px 13px var(--star-color);
    }

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

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

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

    .star-link.star-ko-fi-link::before {
        box-shadow: 0 0 22px 11px var(--star-color);
    }

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








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

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

    background-color: var(--star-color);
    -webkit-mask: url("/static/resources/icons/gumroad.svg") no-repeat center;
    mask: url("/static/resources/icons/gumroad.svg") no-repeat center;
    filter: opacity(50%);
}

.star-link.star-gumroad-link::before {
    box-shadow: 0 0 32px 16px var(--star-color);

    transition: all 0.25s ease;
}

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

.star-label.star-gumroad-label {
    
    text-shadow:
        0 0 3px black
        0 0 1em var(--bg-color);
}

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

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

    .star-link.star-gumroad-link::before {
        box-shadow: 0 0 24px 12px var(--star-color);
    }

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

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

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

    .star-link.star-gumroad-link::before {
        box-shadow: 0 0 20px 10px var(--star-color);
    }

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



.star-line.line-comms-trello {
    top: 25%;
    left: 40%;
    height: 4px;
    width: 48%;

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

.star-line.line-comms-kofi {
    top: 25%;
    left: 40%;
    height: 4px;
    width: 34%;

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

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

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


.constellation.group-art {
    top: 75%;
    left: 60%;
}









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

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

    background-color: gray;
    -webkit-mask: url("/static/resources/icons/palette.svg") no-repeat center;
    mask: url("/static/resources/icons/palette.svg") no-repeat center;
    filter: opacity(50%);
}

.star-link.star-gallery-link::before {
    box-shadow: 0 0 40px 20px gray;

    transition: all 0.25s ease;
}

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

.star-label.star-gallery-label {
    color: gray;
    text-shadow:
        0 0 3px black
        0 0 1em var(--bg-color);
}

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

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

    .star-link.star-gallery-link::before {
        box-shadow: 0 0 30px 15px gray;
    }

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

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

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

    .star-link.star-gallery-link::before {
        box-shadow: 0 0 25px 12px gray;
    }

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








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

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

    background-color: var(--star-color);
    -webkit-mask: url("/static/resources/icons/youtube.svg") no-repeat center;
    mask: url("/static/resources/icons/youtube.svg") no-repeat center;
    filter: opacity(50%);
}

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

    transition: all 0.25s ease;
}

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

.star-label.star-youtube-label {
    
    text-shadow:
        0 0 3px black
        0 0 1em var(--bg-color);
}

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

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

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

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

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

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

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

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








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

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

    background-color: var(--star-color);
    -webkit-mask: url("/static/resources/icons/twitch.svg") no-repeat center;
    mask: url("/static/resources/icons/twitch.svg") no-repeat center;
    filter: opacity(50%);
}

.star-link.star-twitch-link::before {
    box-shadow: 0 0 28px 14px var(--star-color);

    transition: all 0.25s ease;
}

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

.star-label.star-twitch-label {
    
    text-shadow:
        0 0 3px black
        0 0 1em var(--bg-color);
}

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

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

    .star-link.star-twitch-link::before {
        box-shadow: 0 0 21px 10px var(--star-color);
    }

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

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

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

    .star-link.star-twitch-link::before {
        box-shadow: 0 0 17px 8px var(--star-color);
    }

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



.star-line.line-gallery-youtube {
    top: 55%;
    left: 55%;
    height: 4px;
    width: 41%;

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

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

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