@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600&display=swap");
:root {
    --bg: #FFF;
    --font-family: Fredoka, system-ui, sans-serif;
    --font-size: 13px;
    --img-size: 140px;
    --icon-size: 26px;
    --icon-box: 32px;
    --icon-gap: 17px;
    --icon-color: #000;
    --font-color: #3d3d3d;
    --label-shadow: rgba(150, 150, 150, 0.75)
    }
html, body, #root {
    height: 100%
    }
body {
    margin: 0;
    background: var(--bg)
    }
* {
    box-sizing: border-box
    }
.wrap {
    min-height: 97vh;
    display: grid;
    place-items: center;
    font-family: var(--font-family);
    color: var(--font-color)
    }
.centerpiece {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 21px
    }
.frameWrap {
    position: relative;
    width: var(--img-size);
    height: var(--img-size);
    border-radius: 9999px;
    isolation: isolate
    }
.frameWrap::before {
    content: "";
    position: absolute;
    inset: 5%;
    border-radius: inherit;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.035) 50%, transparent), linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.035) 50%, transparent);
    filter: blur(20px);
    opacity: 0.9;
    pointer-events: none;
    z-index: -1
    }
.circleFrame {
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    overflow: hidden;
    position: relative
    }
.circleImg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center
    }
.heroImage {
    position: relative;
    z-index: 1
    }
.socials {
    display: flex;
    gap: var(--icon-gap);
    margin-top: 8px
    }
.socialLink {
    width: var(--icon-box);
    height: var(--icon-box);
    display: inline-grid;
    place-items: center;
    opacity: 0;
    animation: iconFadeIn 1400ms ease-out 0.2s forwards
    }
.socialLink img {
    width: var(--icon-size);
    height: var(--icon-size);
    transition: transform 420ms ease
    }
.socialLink svg {
    width: var(--icon-size);
    height: var(--icon-size);
    transition: transform 420ms ease
    }
.throneIcon {
    color: var(--icon-color)
    }
.socials[data-hover="shrink"] .socialLink:hover img {
    transform: scale(0.82)
    }
.socials[data-hover="shrink"] .socialLink:hover svg {
    transform: scale(0.82)
    }
@keyframes iconFadeIn {
    to {
        opacity: 1;
        }
    }
.hoverLabel {
    margin-top: 18px;
    font-size: var(--font-size);
    letter-spacing: 0.18em;
    text-transform: lowercase;
    opacity: 0;
    color: var(--font-color);
    text-shadow: 0 0 20px var(--label-shadow);
    transition: opacity 900ms ease
    }
.hoverLabel.is-visible {
    opacity: 1
    }