:root {
    --stripe-width: 3rem;    
}

main {
    width: 100vw;
    align-items: center;
}

.abouttext {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    text-align: left;
    width: clamp(12rem, 100%, 60rem);
    align-items: center;
    min-height: 100vh;
}

.aboutimg {
    width: 100%;
    flex-basis: 0;
    flex-grow: 2;
}

.abouttext > p {
    text-align: center;
    max-width: 60rem;
    text-wrap: auto;
}

.abouttext > div {
    display: flex;
    align-items: center;
    column-gap: 1.2rem;
    max-width: 60rem;
}

.abouttext > div > div {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    flex-grow: 3;
    flex-basis: 0;
}

.abouttext > div:nth-child(1),
.abouttext > div:last-child {
    text-align: right;
}


.stripe-up, .stripe-down {
    height: var(--stripe-width);
}

.stripe-up::before,
.stripe-up::after,
.stripe-down::before,
.stripe-down::after {
    content: '';
    width: 50%;
    border-style: solid;
    border-color: transparent;
    position: absolute;
    z-index: -6;
}

.stripe-up::before {
    border-width: var(--stripe-width) 0 0 var(--stripe-width);
    border-image: radial-gradient(closest-side, var(--stripes-left));
    border-image-slice: 49% 49% 49% 49%;
    left: 0;
}

.stripe-up::after {
    border-width: var(--stripe-width) var(--stripe-width) 0 0;
    border-image: radial-gradient(closest-side, var(--stripes-left));
    border-image-slice: 49% 49% 49% 49%;
    right: 0;
}

.abouttext {
    border-style: solid;
    width: 100vw;
    box-sizing: border-box;
    border-width: 0 var(--stripe-width) 0 var(--stripe-width);
    border-image: radial-gradient(closest-side, var(--stripes-left));
    border-image-slice: 49%;
    border-image-outset: 2px 0 2px 0;
    padding: 1.2rem;
}

.stripe-down::before {
    border-width: 0 0 var(--stripe-width) var(--stripe-width);
    border-image: radial-gradient(closest-side, var(--stripes-left));
    border-image-slice: 49% 49% 49% 49%;
    left: 0;
}

.stripe-down::after {
    border-width: 0  var(--stripe-width) var(--stripe-width) 0;
    border-image: radial-gradient(closest-side, var(--stripes-left));
    border-image-slice: 49% 49% 49% 49%;
    right: 0;
}

.stripe-down {
    position: sticky;
    bottom: 0;
    width: 100vw;
}

.aboutlink {
    color: var(--color-main);
    text-decoration: underline;
    font-variation-settings: "wght" 300;
    white-space: nowrap;
}

.aboutlink:hover {
    color: var(--color-subtle);
}

@media (max-width: 720px) {
    :root {
        --stripe-width: 1.8rem;
    }

    .abouttext {
        padding: .6rem;
    }
    
    .aboutimg {
        max-width: 18rem;
    }

    /* .abouttext > div:last-child .aboutimg {
        margin-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    } */

    .aboutimg {
        margin-block: 1rem;
    }

    .aboutimg, .projectimage {
        margin-inline: 0;
    }

    .abouttext div {
        flex-direction: column;
    }

    .abouttext > div:nth-child(even){
        flex-direction: column-reverse;
    }
}