body {
    background-color: hsl(212, 45%, 89%);
    font-family: 'Outfit', sans-serif;
}

div.flex-container {
    display: flex;
    height: 800px;
    width: 250px;
    justify-content: center;
    align-items: center;
}

img {
    width: 96%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
    text-align: center;
    margin: 10px;
}

#container {
    max-width: 300px;

    /* Center the container in middle on horizontal axis */
    margin: 0 auto;

    /* Add empty space above the container (20% of the view height) */
    margin-top: 20vh;
}

.card {
    /* Change background color */
    background-color: white;

    /* Add border */
    border: 1px solid #bacdd8;

    /* Add space between the border and the content */
    padding: 8px;

    border-radius: 15px;
}

div.img {
    display: flex;
    justify-content: center;
}

/* Style div elements that have class equal to name */
.name {
    font-size: 20px;
    font-weight: 700;
    margin: 15px;
    text-align: center;
}

/* Style p element */
p {
    font-size: 15px;
    line-height: 150%;
    font-weight: 400;
    margin: 15px;
    text-align: center;
    color: hsl(220, 15%, 55%);
}