body{
    display: block;
    height: fit-content;
}

main{
    height: fit-content;
}

.aboutme{
    display: grid;
    grid-template-columns: 60% 40%;
    position: relative;
    height: fit-content;
    width: 100%;
    align-items: flex-start;
}

.effects{
    position: fixed;
    height: 100%;
    width: 100%;
    margin-top: -10dvh;
    outline-offset: -10px;
    box-sizing: border-box;
}

.effects-images{
    position: sticky;
    height: 100%;
    width: 100%;
    top: 0;
}

.backeffect{
    display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url(../resources/backeffect.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
    --mask-value: 60%;
    mask-image: linear-gradient(transparent 0%, white calc(100% - var(--mask-value)), white var(--mask-value), transparent 100%);
    z-index: 1;
    top: 0;
}

.fronteffect{
    display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url(../resources/fronteffect.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
    --mask-value: 60%;
    mask-image: linear-gradient(transparent 0%, white calc(100% - var(--mask-value)), white var(--mask-value), transparent 100%);
    background-position: center;
    z-index: 3;
    top: 0;
}

.whiimaz{
    display: flex;
    width: 100%;
    aspect-ratio: 1024/1050;
    position: sticky;
    align-self: flex-start;
    box-sizing: border-box;
    grid-column: 2;
    top: 0dvh;

    &::after{
        content: "";
        display: flex;
        width: 100%;
        max-height: 100%;
        aspect-ratio: 1;
        background-image: url(../resources/whiimaz.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        --mask-value: 80%;
        mask-image: linear-gradient(transparent 0%, white calc(100% - var(--mask-value)), white var(--mask-value), transparent 100%);
        z-index: 2;
    }
}

.info{
    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    justify-content: end;
    align-items: center;
    z-index: 4;
    box-sizing: border-box;
    padding: 10dvh;
    grid-column: 1;

    & .content{
        display: flex;
        height: fit-content;
        max-width: 100%;
        width: fit-content;
        flex-direction: column;
        background-color: rgba(2, 0, 0, 0.2);
        box-sizing: border-box;
        border-radius: .5vh;
        /*backdrop-filter: blur(5px);*/
        padding: 1.5vh;
        gap: 4vh;
    }

    & .title{
        display: flex;
        height: 20vh;
        width: 100%;
        background-image: url('../resources/aboutmelabel.png');
        background-position: center;
        background-position-x: 20%;
        background-size: contain;
        background-repeat: no-repeat;
        user-select: none;
    }

    & .description{
        display: inline-block;
        word-break: normal;
        word-break: normal;
        overflow-wrap: break-word;
        /*
        display: inline-block;
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
        */
        font-family: Arial;
        color: white;
        font-size: 1.6dvh;
        text-align: justify;
    }
}