@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-brands/css/uicons-brands.css');

.text {
    margin: -.5rem 0 -.5rem;
    width: 100%;
    padding: .5rem;
    font-family: "Work Sans", sans-serif
}

.text_center {
    text-align: center
}

.text_large {
    font-size: 1.5rem;
    line-height: 2rem
}

@media (min-width:640px) {
    .text_large {
        font-size: 1.875rem;
        line-height: 2.25rem
    }
}

.main {
    position: relative;
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
    background-attachment: fixed;
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: 13px;
    flex-direction: column;
    --button-height: 2.5rem;
    --button-margin: 0.3rem;
    --icon-width: 1.5rem
}

@media (min-width:640px) {
    .main {
        font-size: 16px;
        --button-height: 3rem;
        --button-margin: 0.5rem;
        --icon-width: 1.8rem
    }
}

.bg {
    --dark-color: #000;
    --light-color: #fff;
    background-color: rgb(209 213 219 / 1);
    --text-color: #fcfcfc;
    --link-color: 51, 51, 51;
    --link-background: 239, 239, 239;
    --link-shadow: 102, 102, 102;
    --link-border: 51, 51, 51;
    color: 51, 51, 51;
}

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.background_image {
    background-image: url(static/blue-flower.png);
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
    position: fixed;
    top: -2.5rem;
    left: -2.5rem;
    right: -2.5rem;
    bottom: -2.5rem;
    filter: blur(2rem);
}

.bg_container {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%
}

.container {
    position: relative;
    margin: auto;
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    width: 100%
}

@media (min-width:500px) {
    .container {
        max-width: 500px
    }
}

.container_component {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 0 .75rem .75rem
}

.profile {
    display: flex;
    flex-wrap: wrap;
    margin: -.5rem;
    position: relative;
    z-index: 10
}

.profile_image {
    background-image: url(static/alchime_icon.png);
    width: 6rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .75rem auto;
    overflow: hidden;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.container_social {
    margin-top: .75rem;
    width: 100%
}

.social {
    margin: .5rem 0 .5rem 0;
    display: flex;
    width: 100%;
    justify-content: center;
    padding: .5rem
}

.social_link {
    margin: 0 .25rem 0 .25rem;
    padding: .25rem;
    opacity: 1;
    transition: all .2s cubic-bezier(.4, 0, .2, 1);
    text-decoration: none;
}

.social_link:hover {
    opacity: .8
}

.social_link_circle {
    display: flex;
    height: 2.75rem;
    width: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: .375rem;
    opacity: 1;
    background-color: rgba(var(--link-background), 1);
    color: rgba(var(--link-color), 1);
    border-radius: 9999px
}

.social_link_circle:hover {
    filter: brightness(1.25)
}

.social_icon {
    max-width: 60%;
    height: auto;
    filter: invert(16%) sepia(1%) saturate(35%) hue-rotate(314deg) brightness(97%) contrast(87%);
    font-size: 1.5rem;
    margin: 1.4rem 1rem 1rem 1rem;
}

.container_link {
    position: relative;
    z-index: 10;
    margin: .5rem;
    width: 100%
}

.link_outer {
    width: 100%
}

.link {
    width: 100%;
    display: flex;
    align-items: stretch;
    transition: all .15s cubic-bezier(.4, 0, .2, 1);
    overflow-wrap: break-word;
    -moz-appearance: none;
    appearance: none;
    color: rgba(var(--link-color), 1)
}

.link_circle {
    border-radius: 1.65rem;
    background-color: rgba(var(--link-background), 1);
    border-color: var(--text-color);
    border: .1rem solid rgba(var(--link-border), 1);
    box-shadow: 0 .35rem 0 rgba(var(--link-shadow), 1);
    background-color: #efefef;
}

@media (min-width:640px) {
    .link_circle {
        border-radius: 2rem
    }
}

.link_circle:hover {
    box-shadow: 0 0 0 rgba(var(--link-shadow), 1)
}

.link_circle_shadow:hover {
    transform: translateY(.35rem);
    filter: brightness(.9)
}

.link_icon {
    flex-shrink: 0;
    border-radius: .5rem;
    background-color: rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: var(--button-height);
    height: var(--button-height);
    margin: var(--button-margin);
    border-radius: 9999px
}

.link_image {
    max-width: 75%;
    height: auto;
    filter: invert(16%) sepia(1%) saturate(35%) hue-rotate(314deg) brightness(97%) contrast(87%)
}

.link_outer_text {
    display: flex;
    align-items: center;
    padding: .5rem;
    width: 100%
}

.link_end {
    width: var(--button-height);
    height: var(--button-height);
    margin: var(--button-margin);
    flex-shrink: 0
}

svg:not(:host).svg-inline--fa,
svg:not(:root).svg-inline--fa {
    overflow: visible;
    box-sizing: content-box
}