body {
    margin: 50px;
    background-color: whitesmoke;
}

/* Font family for common elements */
body, h1, h2, h3, p {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/* Flex container styles */
.flex-container, .nested-flex-container {
    display: flex;
    background-color: aquamarine;
    border: 5px aqua solid;
    border-radius: 15%;

}

/* Common style for flex items */
.flex-container p, .nested-flex-container p {
    background: peachpuff;
    border: 4px solid brown;
    height: 100px;
    margin: 10px;
    flex: 1;
    text-align: center;
    padding-top: 5%;
    border-radius: 15%;
}

h1, h2, h3 {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.threevalues {
    display: flex;
}

.threevalues p {
    border: 2px black solid;
    background-color: bisque;
    padding: 20px;
    border-radius: 15%;

}

.threevalues .small {
    flex: 0.5;
}

.threevalues .big {
    flex: 2;
}

.shrinking {
    display: flex;
}

.shrinking p {
    border: 2px black solid;
    background-color: bisque;
    padding: 20px;
    flex: 1 1 auto;
    border-radius: 15%;

}

.shrinking .smallbro {
    flex: 0 2;
}

.columncontainer {
    flex-direction: column;
}

.columncontainer p {
    border: 2px black solid;
    background-color: bisque;
    padding: 20px;
    flex: 1 1 auto; 
    max-width: 500px;
    border-radius: 15%;

}



/* Styles for elaborate and its child elements */
.elaborate {
    display: flex;
    background: beige;
    border: brown 4px solid;
    gap: 20px;
    flex-wrap: wrap;
    border-radius: 15%;

}

.elaborate p {
    border: black 2px solid;
    background-color: plum;
    max-width: fit-content;
    padding: 30px;
    border-radius: 15%;

}

.elaborate .right {
    margin-left: auto;
    margin-right: 0;
    justify-content: flex-end;
    align-items: flex-end;
}

.parent {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    flex-direction: column;
    border-radius: 15%;

}

.parent .imageflex {
    display: flex;
    background: beige;
    border: brown 4px solid;
    gap: 20px;
    flex-wrap: wrap;
    border-radius: 15%;


}
/* Styles for imageflex */
.imageflex { 
    display: flex;
    align-items: flex-start;
    border: 4px brown;
    padding: 20px;
    gap: 150px;
    flex-direction: row-reverse;

}
.imageflex > * {
    border: 4px brown;
    padding: 20px;
    margin: 150 px;
    
}
.imageflex .content {
    flex: 1;
    border: 4px brown;
    padding: 20px;
    margin: 150 px;
}

.imageflex .media {
    max-width: 400px;
    flex: 0.5;
}

img {
    max-width: 100%;
}

strong {
    font-size: 2em;
}