.body_img {
    text-align: center;
    width: 250px;
    height: 250px;
    border-radius: 30px;
}

.body_img2 {
    text-align: center;
    width: 250px;
    height: 250px;
}

main {
    margin: 10px;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(auto, 1fr));
    grid-template-areas:
        "pic content"
        "content1 pic1"
        "pic2 content2"
    ;
    row-gap: 50px;
}

hr {
    border-color: #6c3b5e;
    border-width: 2px;
    width: 10%;
}

.content {
    /* padding: 5px; */
    grid-area: content;
}

.content1 {
    grid-area: content1;
}

.content2 {
    grid-area: content2;
}

.pic {
    grid-area: pic;
}

.pic1 {
    grid-area: pic1;
}

.pic2 {
    grid-area: pic2;
}

.blueSideBox {
    grid-column: 1;
    grid-row: 1;
}

.bottomBorder-title {
    border-bottom: solid 5px #8c9dbc;

}

.purple {
    background-color: #a4779a;
}

.lightGrey {
    background-color: #f1f3f7;
}

.darkblue {
    background-color: #3e4465;
}

.deco {
    display: grid;
    grid-template-columns:  auto;
    grid-template-rows: auto;
}

.decoContent {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    justify-content: center;
}

.pic {
    grid-template-columns: auto;
}

.img-round {
    width: 250px;
    border-radius: 50%;
    align-self: center;
    justify-self: center;
    margin-bottom: 15px;
}

.backgroundLineContainer {
    display: grid;
    grid-template-columns: 50px 1fr 50px;
    grid-template-rows: auto 100px auto
}

.backgroundLineDarkBlue {
    grid-column: 1/span 3;
    grid-row: 2;
}

.img1 {
    width: 250px;
    grid-column: 2;
    grid-row: 1/span 3;
}

p { margin: 10px;}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: hwb(320 87% 8%);
}

::-webkit-scrollbar-thumb {
    background: #a4779a;
    ;
}

::-webkit-scrollbar-thumb:hover {
    background: #8c9dbc;
}

@media (max-width:280px) {

    main {
        margin: 1000px;
        grid-template-columns: 500px;
        grid-template-areas:
            "pic"
            "content"
            "pic1"
            "content1"
            "pic2"
            "content2"
        ;
        justify-content: center;
    }
    .pic1 {
        text-align: center;
    }
    .blueSideBox{
        display: none;
    }
    .decoContent {
        grid-column: 1;

    }

    .content{
        
        margin: 0px;
    }

   p{ margin: 5px 80px;}

    h1{ line-height: 50px;
        margin: 10px 40px;
    }
}


@media (max-width: 768px) {
    main {
        margin: 10px;
        grid-template-columns: auto;
        grid-template-areas:
            "pic"
            "content"
            "pic1"
            "content1"
            "pic2"
            "content2"
        ;
        justify-content: center;
    }

    .pic1 {
        text-align: center;
    }

    .decoContent {
        grid-column: 1;

    }

    .content{
        margin: 0;
    }

}

@media (min-width: 1024px) {
    .main {
        grid-template-columns: auto;
    }
}