How to mimic same design as the picture? - html

Question

The body is flexbox ,I do not how to display the divs in top-right corner and bottom-left corner?
body {
box-sizing: border-box;
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f5f7fb;
color: #122763;
}
main {
display: flex;
flex-direction: column;
align-items: center;
}

Answer 1

*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f5f7fb;
color: #122763;
}
/**top Right**/
main {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 0;
right: 0;
}
/**Bottom Left**/
main {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
}
/**No Need to set body position to relative**/

Answer 2

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
main {
height: 100vh;
width: 100%;
background-color: #f5f7fb;
color: #122763;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
overflow: hidden;
}
main::before {
content: '';
height: 40vh;
width: 20%;
margin-right: -9vw;
margin-top: -18vh;
align-self: flex-end;
background-color: #fffad2;
border-radius: 44%;
}
main::after {
content: '';
height: 40vh;
width: 25%;
margin-left: -14vw;
margin-bottom: -18vh;
align-self: flex-end;
align-self: flex-start;
background-color: #deecf9;
border-radius: 50%;
}
.container {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.container > h1 {
margin: 1%;
}
.container > p {
margin: 0.5% 1% 1% 1%;
font-size: large;
}
.container > button {
font-size: medium;
color: white;
background-color: #4d5b9e;
border-radius: 1rem;
width: 95px;
height: 45px;
border: 0;
margin: 2%;
cursor: pointer;
}