.about {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;

    &::before {
        content: "";
        background: url("../images/compressed_images/aboutBG.jpg") center center/cover no-repeat;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        filter:  brightness(.3);
        scale: 1.1;
        z-index: -1;
    }
    @media (max-width: 1080px) and (orientation: portrait) {
        &::before {
            background: url("../images/compressed_images/aboutBGphone.jpg") center center/cover no-repeat;
        }
    }
    h2 {
        font-size: 3dvw ;
        transition: all .3s ease-in-out;
            background: url("../images/text-bg2.png") center;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            position: relative;
            filter: hue-rotate(0deg);
            &::after {
                content: "About me !";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: url("../images/text-bg2.png") center;
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
                filter: blur(.5rem) brightness(1.5);
                z-index: -1;
            }
    }
    p {
        font-size: 1.5dvw;
        transition: all .3s ease-in-out;
        z-index: 1;
        position: relative;
        filter: hue-rotate(0deg);
        &::after {
            content: "Hello there!, am TomaTTich, an Algerian traditional artist specializing in pseudo-psychedelic and abstract art, i mostly create pieces on a whim and i love to experiment with colors and techniques to create something unique and eye-catching.";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("../images/text-bg2.png") center;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            filter: blur(.5rem) brightness(1.5);
            z-index: -1;
        }

    }
    @media (max-width: 1080px) and (orientation: portrait) {
        h2 {
            font-size: 9dvw;
        }
        p {
            font-size: 3dvw;
        }
    }
    
}
.aboutContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 1rem;
    @media (max-width: 1080px) and (orientation: portrait) {
        text-align: center;
        flex-direction: column;
        gap: 2rem;
    }

}
.aboutContainerText {
    display: flex;
    flex-direction: column;
    width: 40%;
    gap: 1rem;
    @media (max-width: 1080px) and (orientation: portrait) {
        text-align: center;
        width: 85%;
    }
}


.testingDiv {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 40vw;
    height: 40vw;
    gap: 2%;
    @media (max-width: 1080px) and (orientation: portrait) {
        width: 90vw;
        height: 50vh;
    }
}

.testingDivImgContainer1 {
    background: url("../images/compressed_images/showcase19.jpg") center center/cover no-repeat;
    width: 35%;
    height: 20vw;
    @media (max-width: 1080px) and (orientation: portrait) {
        height: 50%;
    }
}
.testingDivImgContainer2 {
    background: url("../images/compressed_images/showcase4.jpg") center center/cover no-repeat;
    width: 20%;
    height: 20vw;
    @media (max-width: 1080px) and (orientation: portrait) {
        height: 50%;
    }
}
.testingDivImgContainer3 {
    background: url("../images/compressed_images/showcase2.jpg") center center/cover no-repeat;
    width: 41%;
    height: 20vw;
    @media (max-width: 1080px) and (orientation: portrait) {
        height: 50%;
    }
}
.testingDivImgContainer4 {
    background: url("../images/compressed_images/showcase3.jpg") center center/cover no-repeat;
    width: 45%;
    height: 20vw;
    @media (max-width: 1080px) and (orientation: portrait) {
        height: 50%;
    }
}
.testingDivImgContainer5 {
    background: url("../images/compressed_images/showcase11.jpg") center center/cover no-repeat;
    width: 20%;
    height: 20vw;
    @media (max-width: 1080px) and (orientation: portrait) {
        height: 50%;
    }
}
.testingDivImgContainer6 {
    background: url("../images/compressed_images/showcase8.jpg") center center/cover no-repeat;
    width: 31%;
    height: 20vw;
    @media (max-width: 1080px) and (orientation: portrait) {
        height: 50%;
    }
}