body {
    background-color: hsl(47, 88%, 63%); /* #1. added yellow bg color*/
    display: flex; /* #11. added methods to center main container*/
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
}

.main-container {
    background-color: white; /* #2. added main container properties*/
    width: 350px;
    border-radius: 5%;
}


.main-container * { /* #7. added margin to all descendants */
    margin: 15px;
}

.name {
    display: flex; /* #3. added flex property to name class*/
}

.profile { /* #4. adjusted image properties */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

.image { /* #5. centered image */
    display: flex;
    justify-content: center; 
}

.image:hover { /* #9. added hover state to div*/
    opacity: 0.5;
}

.image:focus-within .illustration { /* #10. added focus state to image */
    outline: 5px solid blue; 
}
   

.illustration { /* #6. set image properties*/
    width: 315px;
    height: auto;
    border-radius: 10%;
}

.learning { /* #8. added bg color around learning text */
    background-color: hsl(47, 88%, 63%) ;
    width: 85px;
}