main[data-barba-namespace="about"] {
    display: flex;
    align-items: center;
    justify-content: center;

    &::before {
        content: "";
        width: 100%;
        height: 100%;

        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;

        background-image: url(../futur3sn0w/imgs/confetti_ls.svg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        border-radius: inherit;

        pointer-events: none;

        transition: .25s;
    }

    .aboutMe {
        position: absolute;
        z-index: 2;

        width: 100%;
        height: 100%;

        border-radius: 30px;

        padding: 10px;

        font-size: 40px;
        flex-shrink: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        color: var(--root-text);

        transition: .4s;

        & .left {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: calc(50% + 30px);
        }

        & .metoken {
            width: 320px;
            height: 320px;
            overflow: hidden;
            border-radius: 50%;
            flex-shrink: 0;

            position: relative;

            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;

            transition: .3s;

            pointer-events: none;

            & .mtImg {
                width: calc(100% + 3px);
                height: calc(100% + 3px);
                object-fit: cover;
                object-position: center;

                /* pointer-events: none; */

                position: absolute;
                opacity: 0;
                transition: .25s;

                background-color: purple;

                &.v {
                    opacity: 1;
                }
            }
        }

        & .namecard {
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 10;
            position: relative;
            /* backdrop-filter: blur(10px); */
            padding: 20px 50px;
            border-radius: 10px;
            margin: -20px 0;

            pointer-events: none;

            .last {
                font-size: 40px;
                font-weight: 600;

                &::before {
                    content: "gavin";
                    font-weight: 200;

                    /* display: flex; */
                    /* justify-content: center; */

                    /* position: relative; */
                    /* top: 380px; */
                    /* left: 50%; */
                    /* transform: translateX(-50%); */
                }
            }

            .at {
                font-weight: normal;

                font-size: 20px;
                opacity: .5;
            }
        }

        & p.chunk {
            font-size: 15px;
            font-weight: 400;
            width: calc(50% - 30px);
            height: 100%;

            overflow-y: scroll;

            position: relative;

            padding: 15px 20px;
            background-color: var(--transparent-container);
            backdrop-filter: blur(10px);
            border-radius: 25px;
            transition: .3s;
        }
    }
}