THE GALAXY [links outside]

<!--
NOTES
01. please do not remove credit, redistribute, or claim as your own
02. WYSIWYG off, otherwise things will break easier. you can use https://th.circlejourney.net/# or https://cheeriko.github.io/playhouse/character.html to see what changes as you update it
03. remember to link to the source of whatever resources you use
04. https://fontawesome.com/icons for more icons, the "spinners" category is especially useful for this

quick replace (ctrl+f, replace all)
background color: #600000
background/overlay img: https://f2.toyhou.se/file/f2-toyhou-se/images/21089376_yY4meU5AMAoWefM.png
spinning icon: #2d0707
text color: #d7bbbb
text shadow: #a20000
-->

<div class="rounded-circle card border-0 mx-auto text-center mt-5"
     style="width:500px;height:500px;color:#d7bbbb;
            background: #600000
            url(https://f2.toyhou.se/file/f2-toyhou-se/images/21089376_yY4meU5AMAoWefM.png);
            background-blend-mode:color-burn;
            font-family:verdana;">

    <!-- Spinner -->
    <div style="position:absolute;color:#2d0707;top: 150px;left: 125px;">
        <span class="fa-stack" style="font-size:100px;height:100px;">
            <i class="fad fa-sun fa-stack-2x" style="-webkit-animation: fa-spin 10s infinite linear;animation: fa-spin 10s infinite linear;"></i>
        </span>
    </div>

    <!-- Overlay Card-->
    <div class="rounded-circle border-0 card mx-auto text-center" style="width:500px;height:500px;position:absolute;opacity: 0.1;background:url(https://f2.toyhou.se/file/f2-toyhou-se/images/21089376_yY4meU5AMAoWefM.png);"></div>
    <div class="rounded-circle card mx-auto text-center" style="width:500px;height:500px;background:transparent;">
    <div class="my-auto mx-5" style="z-index:2;font-size: 15px; text-shadow: 0 0 5px #a20000; letter-spacing: 0.5px;">
        info goes here!
        <br>
        supports a fair amount of text!
        <br>
        looks better shorter though
        </div>
    </div>


    <div style="font-size:larger;">

        <!-- TIP:
        To remove a link you don't need without leaving a gap, copy the "top:[number]px;right:[number]px" and move it to the next link you are using, moving that link's position to the next and so on

        For example, to remove the twitter link, tumblr would gain the position "top:50px;right:110px;", discord would become "top:65px;right:90px;", etc.

        To add another link, copy + paste the whole "a" element, add around 15~20px to the top property and subtract around 20px from the right property; these are just approximations numbers, and will probably take some finessing to get looking right
        -->

        <!-- Social Links -->
        <a class="tooltipster" href="LINK" title="DeviantArt" style="position:absolute;top:10px;right:102px;"><i class="fab fa-deviantart fa-fw"></i></a>
        <a class="tooltipster" href="LINK" title="Twitter" style="position:absolute;top:25px;right:80px;"><i class="fab fa-twitter fa-fw"></i></a>
        <a class="tooltipster" href="LINK" title="Tumblr" style="position:absolute;top:42px;right:60px;"><i class="fab fa-tumblr fa-fw"></i></a>
        <a class="tooltipster" href="" title="NAME#0000" style="position:absolute;top:62px;right:42px;"><i class="fab fa-discord fa-fw"></i></a>
        <!-- BG Credit, Change if changing the bg -->
        <a class="tooltipster" href="https://toyhou.se/6259293" title="Background by CanadianLyynx" style="position:absolute;top:85px;right:20px;"><i class="fas fa-images fa-fw"></i></a>
        <!-- code credit, plz do not remove -->
        <a class="tooltipster" href="https://toyhou.se/10367680" title="Code by METALOCALYPSE" style="position:absolute;top:110px;right:06px;"><i class="fas fa-cog fa-fw text-primary"></i></a>
    </div>
    </div>