.block
    margin-bottom: 1rem
    padding: 1rem

    display: flex
    flex-direction: column

    background-color: rgba($black, 0.5)
    border-radius: 2px
    border: 1px solid RGBA($white, 0.05)

    > h2
        margin: 0 0 0.2rem 0
        font-size: 1.3em
        color: RGB($white)

    > p
        margin: 0 0 1rem 0
        font-size: 1em

    &.secondary
        border: 1px solid RGB($secondary)

        > h2
            color: RGB($secondary)

    form
        display: flex
        flex-direction: column
        gap: 0.5rem

.account-block
    margin-bottom: 1rem
    padding: 1rem

    display: flex
    flex-direction: row
    gap: 1rem

    background-color: rgba($black, 0.5)
    border-radius: 2px
    border: 1px solid RGBA($white, 0.05)

    > img
        height: 10rem
        width: 10rem

        background-color: RGBA($white, 0.02)
        border: 1px solid RGBA($white, 0.1)
        border-radius: 2px

        object-fit: cover

    .other
        width: 100%

        display: flex
        flex-direction: column
        justify-content: flex-start

        gap: 0.5rem

        p
            margin: 0
            font-size: 1rem
            color: RGB($white)

        hr
            margin: 0
            width: 100%
            border: 0 solid transparent
            border-bottom: 1px solid RGBA($white, 0.1)

        .profile-title
            display: flex
            flex-direction: row
            justify-content: space-between
            gap: 0.5rem

            h2
                margin: 0
                font-size: 1.3rem
                color: RGB($white)

            .profile-tag
                margin: auto 0
                padding: 0.2rem 0.3rem

                font-size: 0.8rem

                color: RGB($black)
                background-color: RGB($white)
                border-radius: 2px

                > img
                    width: 0.9rem
                    height: 0.9rem
                    margin-right: 0.2rem

        .profile-links
            display: flex
            flex-direction: row
            flex-wrap: wrap
            gap: 0.5rem

            > .discord, > .twitter, > .twitch, > .youtube
                margin: 0
                padding: 0.2rem 0.3rem

                width: 2rem
                height: 2rem

                display: flex
                flex-direction: row
                align-items: center
                justify-content: center

                text-decoration: none

                color: RGB($white)
                border-radius: 2px
                border: 0 solid transparent

                > i
                    font-size: 1.3rem

                &:hover
                    cursor: pointer
                    filter: brightness(1.2)

            > .discord
                background-color: #5865F2

            > .twitter
                background-color: #1DA1F2

            > .twitch
                background-color: #9146FF

            > .youtube
                background-color: #FF0000
                color: RGB($white)


@media (max-width: 550px)
    .account-block
        // flex-direction: column

        > img
            margin: 0 auto
            width: 5rem
            height: 5rem