div.background-wrapper {
    position: fixed;
}

div.centering-wrapper {
    width: 100%;
    background: var(--background-color-a);
}

div.main-container {
    background: linear-gradient(var(--background-color-a), var(--background-color-b));
    padding: 1rem 1rem 5rem 1rem;
    box-sizing: border-box;
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 3rem), 50% 100%, 0% calc(100% - 3rem));
    /*box-shadow: 
        0 0.25rem 1.5rem var(--main-color-a-shadow),
        inset 0 -0.25rem 0.5rem white;*/
}

div.header-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: url(./profile_sp.webp) bottom / cover no-repeat;
    clip-path: initial;

    >h1 {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 100;
        margin: 0;
        padding: 0.5rem 1.5rem;
        text-shadow: 0 0 3rem var(--background-color-b);
    }
}

div.header-image-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent 49%, var(--background-color-a) 99%);
}

div.footer-wrapper {
    background: none;
    padding: 1.5rem 1rem 0rem 1rem;
    clip-path: initial;
}

div.inner-wrapper {
    margin: 0 0 1rem 0;
    overflow: hidden;
}



@media screen and (min-width: 1024px) {
    div.background-wrapper {
        position: fixed;
        right: 0;
        top: 0;
        width: 100%;
        height: 100lvh;
        background: url(./profile_pc.webp) 100% center / calc(100% + 640px) auto no-repeat fixed #ccc;
    }

    div.background-wrapper::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(210deg, transparent 49%, var(--background-color-a) 99%);
    }

    div.centering-wrapper {
        width: 560px;
        position: absolute;
        top: 0px;
        right: 80px;
        z-index: 10;
        box-shadow:
            0 0 0.25rem var(--background-color-a),
            0 0 1rem var(--background-edge-color);
    }

    div.main-container {
        padding: 1rem 2rem 5rem 2rem;
    }

    div.header-wrapper {
        position: fixed;
        width: calc(100% - 680px);
        bottom: 20px;
        left: 20px;
    }

    div.header-image-wrapper {
        background: none;
        aspect-ratio: initial;
        position: initial;

        >h1 {
            font-size: 4.5em;
            position: initial;
            padding: 1.5rem 1.5rem;
            margin-bottom: -1rem;
        }
    }

    div.header-image-wrapper::after {
        content: initial;
    }

    div.header-wrapper>div.main-container {
        clip-path: initial;
        padding: 1rem 0.5rem 1rem 1rem;
        border-radius: 1rem;
        background: var(--background-color-a);
        box-shadow:
            0 0 0.25rem var(--background-color-a),
            0 0 1rem var(--background-edge-color);

        >div.inner-wrapper {
            margin: 0;
            display: grid;
            gap: .5rem 0;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

            >a.linkButton {
                margin: 0;
            }
        }
    }
}

@media screen and (min-width: 1280px) {
    div.background-wrapper {
        background-size: calc(100% + 320px + 25%) auto;
    }

    div.centering-wrapper {
        right: calc(25% - 240px);
    }

    div.header-wrapper {
        left: calc(25% - 300px);
        width: calc(50% - 40px);
    }
}