/* The CSS code for the `body` selector is setting various properties for the body element of the HTML
document. */
body {
    margin: 0;
    padding: 0;
    font-family: 'Ubuntu', 'Arial', sans-serif;
    background-color: #333333;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* This line must for footer */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; /* This line must for footer */
    min-height: 100vh; /* This line must for footer */
    margin: 0; /* This line must for footer */
}

/* The CSS code you provided is defining the styles for the `.about-container`, `.text-container`,
`.image-container img`, and `.about-container` selectors. */
.about-container {
    padding: 80px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.text-container {
    text-align: justify;
    color: white;
}

.image-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    
}


.image-container > img {
    border-radius: 10px;
    width: 70%; /* Make sure the image takes 100% width of its container */
    height: 70%; /* Maintain the aspect ratio of the image */
}

/* The `@media screen and (max-width: 768px)` is a media query in CSS that targets screens with a
maximum width of 768 pixels. */
@media screen and (max-width: 768px) {
    .about-container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        justify-content: center;
    }

    .image-container > img {
        border-radius: 10px;
        width: 80%; /* Make sure the image takes 100% width of its container */
        height: 80%; /* Maintain the aspect ratio of the image */
    }
}