.personalitytitle {
    z-index: 10;
    width: 100%;
    text-align: center;
    font-size: 50px;
    color: #5E2A4A;
    position: relative;
    top: 100px;
}

@media (max-width: 500px) {
    .personalitytitle {
        font-size: 14vw;
    }
}


.personalityouter {
    background-color: #CCEAFD;
    color: #5E2A4A;

    position: relative;
    left: 0;
    width: 100%;
    padding-top: 300px;
    padding-bottom: 100px;
    top: -140px;
    margin-bottom: -285px;
}

.personalityinner {
    text-align: left;
    width: 90%;
    left: 5%;
    position: relative;

    display: grid;
    grid-gap: 50px;
    grid-template-columns: auto auto auto;
}

@media (max-width: 1200px) {
    .personalityinner {
        grid-template-columns: auto auto;
    }
}

@media (max-width: 800px) {
    .personalityinner {
        grid-template-columns: auto;
    }
}

.block {
    border-radius: 20px;
    background-color: white;
    padding: 20px;
    line-height: 1.5;
}


.block div {
    font-size: 250%;
    width: 100%;
    text-align: center;
}

.pers-image {
    margin-top: -130px;
    background-color: #8B87C2;
    margin-bottom: -147px;
}

.pers-image img {
    width: 90%;
    margin-left: 5%;
}