#about-me {

    background-color: #131416;

    display: grid;
    grid-template-columns: 1fr 1fr;
    transition: 0.5s;
    padding-bottom: 100px;
}

.image {
    display: flex;
    margin: 80px auto 20px auto;
    border: 5px solid gray;
    width: 500px;
    transition: 0.5s;
    height: 600px;
}

.info {
    margin: 100px 0;
    width: 500px;
    text-align: justify;
    color: white;
    font-size: 1em;
    transition: 0.5s;
}

.info h1 {
    margin: 0 0 20px 0;
    color: white;
    font-size: 1.5em;
}

.info h3 {
    font-size: 1.8em;
    margin: 0 0 20px 0;
    word-spacing: unset;
}

.info span {
    color: orange;
}

.info p {
    font-size: 1.2em;
}

.about {
    margin-top: 40px;
    font-size: 1em;

    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 20px;
}

.number {
    text-decoration: none;
}

.about span {
    font-size: 0.9em;
    color: #afafaf;
}

.image {
    background-image: url(../Images/my-img.jpg);
    background-position-y: -40px;
    background-size: cover;
}

@media (max-width: 1400px) {
    .image {
        width: 400px;
        background-position-y: 0;
        background-position-x: 30%;
    }
}

@media (max-width: 1100px) {
    #about-me {
        display: flex;
        flex-direction: column;
    }
    .image {
        width: 500px;
        height: 600px;
        margin-bottom: 40px;
        background-position-y: 30%;
        background-position-x: 0;
        background-size: cover;

    }
    .info {
        padding: 0 20px;
        font-size: 1em;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }
    .info h1 {
        font-size: 1.5em;
    }

    .info h3 {
        font-size: 1.8em;
    }

    .info div {
        font-size: 1em;
    }

}
@media (max-width: 600px) {
    .image {
        width: 250px;
        height: 300px;
        margin-bottom: 50px;
        background-position-y: 80%;
        background-position-x: 40%;
        background-size: 300px;
    }
    .info {
        width: 300px;
    }
    .info h3{
        font-size: 1.5em;
    }
    .info h1 {
        font-size: 1.2em;
    }

    .info p {
        font-size: 0.9em;
    }

    .about {
        grid-template-columns: 1fr;
    }
}